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

Легкий, удобный и бесплатный. С массой различных плагинов, превращающих его в тот инструмент, который необходим в работе. Это блокнот для программистов, причем не только web-кодеров, но из javascript, php-разработчиков. Недаром он пользуется неизменной популярностью на протяжении стольких лет.

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

Рассмотрим такую ситуацию. Имеются два документа, которые одновременно открыты в программе Notepad++. По умолчанию, каждый документ открывается в отдельной вкладке. Эти вкладки могут располагаться по разному, все зависит от предпочтений пользователя и настроек программы.

Может случится так, что имеется оригинал документа, на основе которого необходимо создать свой файл. Такой случай может произойти, к примеру, когда создается файл templateDetails при создании шаблона под Joomla.

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

Notepad++ может упросить и ускорить эту работу. Для этого необходимо щелкнуть правой кнопкой мыши на активной вкладке и выбрать из контекстного меню пункт “В другое окно”. Эта возможность мне кажется одной из наиболее удобных и полезных:

В результате окно блокнота разделится по вертикали на две половины. В левой половине останется оригинал - тот файл, который был неактивен. А в правую половину будет перенесен текущий документ. Получится, что одновременно будут видны оба документа:

Теперь оба документа, что называется, перед глазами. Можно легко сравнивать оригинал с редактируемым файлом. Одно слово - удобно.

Вторая возможность Notepad++ - это переместить копию текущего документа в правую часть окна. То есть, основное окно программы также разделяется на две вертикальные части. Но в правую часть перемещается копия открытого документа.

Чтобы открыть копию документа в правой части окна, также нужно щелкнуть правой кнопкой мыши на вкладке и выбрать из списка теперь уже пункт “Дублировать в другое окно”:

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

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

В результате будет запущен еще один экземпляр программы Notepad++, в котором автоматически откроется перемещаемый нами документ:

И последняя из рассматриваемых возможностей Notepad++ при работе с окнами - это когда необходимо открыть тот же экземпляр текущего документа в новом окне. То есть, текущий документ будет продублирован в новом экземпляре программы Notepad++.

Для этого снова открываем контекстное меню и выбираем теперь в нем пункт “Открыть в Новом экземпляре”:

Получится две копии одного и того же файла, но открытые в двух разных окнах программы Notepad++:

На этом рассмотрение возможностей блокнота при работе с открытыми документами заканчивается.

С недавнего времени, всерьез занявшись написанием статей, столкнулся в небольшой трудностью. Заключается она в следующем: имеется материал в формате pdf, перевод которого необходимо выполнить. Естественно, в любой более-менее серьезной и качественной статье есть скриншоты, хотя бы один или два.

Что делать, если хочется создать точный - и самое главное - хороший перевод? Нужно, чтобы в этом переводе тоже присутствовали соответствующие теме скрины. И как поступить? Создавать свои собственные? Это довольно трудоемкий и длительный процесс. Конечно, речь не идет о какой-либо программе - в репозиториях Linux достаточно одной команды, чтобы ее поставить. А вот если дело касается дистрибутива? И если он “весит” около 2Gb? “Тянуть” и ставить его только ради скриншотов?

Вывод однозначен - надо “забрать” картинки из самого pdf-файла. Под OS Windows ответ напрашивается сам собой - Adobe Acrobat. Но если под Linux? Тоже выход есть! И даже еще аккуратнее - не надо мучиться с установкой гиганта Acrobat только для извлечения картинок с помощью последнего (например, у меня версия Adobe Acrobat 9.4 Pro “весит” 631Mb! Уму непостижимо - ведь это всего лишь одна программа!).

Итак, решаем проблему под Linux.

Первый шаг

Устанавливаем пакет xpdf. Программа стара, как мир и имеется в репозитории любого уважающего себя дистрибутива Linux. А об Ubuntu/Debian и говорить не приходиться. Там как в Греции - все есть!

$ sudo aptitude install xpdf

Шаг второй

Сама по себе “смотрелка” pdf-файлов xpdf нам в принципе не нужна. Интерфейс у нее убогий и не тянет на сравнение с тем же Okular. Но это и не важно. Мы ее не затем ставили. А ставили ради маленькой программы pdfimages, которая входит в состав этого пакета. Лишний раз проверим, так ли это. Посмотрим, есть ли она в системе после установки xpdf:

$ whereis pdfimages
pdfimages: /usr/bin/pdfimages /usr/share/man/man1/pdfimages.1.gz

Есть. Все ОК.

Шаг третий

Теперь, собственно, и приступаем к самому процессу извлечения. Переходим в директорию, в которой лежит наш “пациент” - jul2011.pdf:

$ cd /media/disk-2/works/journals/indian_hacker
$ ls
apr2011.pdf jul2011.pdf jun2011.pdf mar2011.pdf may2011.pdf

И “напускаем” на него нашу “крошку” pdfimages:

$ pdfimages -f 3 -l 9 -j jul2011.pdf nessus

Опции команды описывать не буду - они, прямо скажем, примитивны и легко узнаются по стандартной команде -help. Здесь я применил только некоторые из них (и если честно сказать - почти все):

• 1

  -f

  - номер первой страницы pdf-файла, из которого будут извлекаться картинки;

• 1

  -l

  - аналогично - номер последней страницы pdf-файла (то есть, опциями

  1

  f

  и

  1

  l

  мы задаем диапазон в pdf-файле, откуда будем извлекать картинки; это в том случае, когда не хотим получить ВСЕ картинки из ВСЕГО pdf-файла);

• 1

  -j

  - конвертировать извлеченные картинки в формат jpg

Единственное, о чем стоит упомянуть - это следующее. У меня вызвано легкий ступор, ибо является неочевидным фактом: имя nessus в конце команды. Это имя может быть любым другим, на ваш выбор, но оно должно быть! Это своеобразная маска, по которой программа

1

pdfimages

$ ls nessus-003.jpg nessus-007.ppm nessus-011.ppm nessus-015.ppm nessus-019.ppm
nessus-023.jpg nessus-027.jpg nessus-000.ppm nessus-004.ppm nessus-008.ppm
nessus-012.ppm nessus-016.ppm nessus-020.ppm nessus-024.ppm nessus-001.ppm
nessus-005.ppm nessus-009.jpg nessus-013.jpg nessus-017.jpg nessus-021.jpg
nessus-025.ppm nessus-002.jpg nessus-006.ppm nessus-010.jpg nessus-014.jpg
nessus-018.jpg nessus-022.jpg nessus-026.jpg

Программка

1

pdfimages

1

jpg

1

-j

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

$ rm *.ppm

И опять смотрим:

$ ls nessus-003.jpg nessus-010.jpg nessus-014.jpg nessus-018.jpg
nessus-022.jpg nessus-026.jpg nessus-002.jpg nessus-009.jpg
nessus-013.jpg nessus-017.jpg nessus-021.jpg nessus-023.jpg
nessus-027.jpg

Совсем другое дело! Как раз то, что нам нужно! Можно сказать, дело в шляпе. Посмотрим результат. Ведь интересно же - действительно ли все получилось? Пусть это будет nessus-027.jpg:

Резюме

Как вам такое решение “проблемы”? Для меня, так очень даже ничего! Изящно, красиво и быстро. И самое главное - результат! И тогда зачем возиться с программами под Windows, такими как например, специализированная утилита PDF Image Extraction Wizard. Да, имеет она красивый интерфейс. Но ведь фактически нужно платить только за него. Я уже не говорю о стоимости “монстра” Adobe Acrobat!

На этом все.

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

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

1

points

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

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

Пользуясь этой таблицей, можно быстро перевести один размер в другой. В ней представлены единицы измерения

1

point

1

pixel

1

em

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

Отдельно стоит сказать, что не стоит путать

1

point

1

punct

1

pt

P.S.

В процессе изучения CSS-типографии столкнулся с очень интересным ресурсом по преобразованию одних единиц измерения в другие - пиксели в

1

em

1

pt

1

http://pxtoem.com/

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

1

normalize.css

1

http://pxtoem.com/

На этом все.

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

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

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

1

background-image:url()

1

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);

Мы хотим (точнее - так задумал дизайнер), чтобы градиент “шел” сверху вниз от светло-зеленого к темно-зеленому. Поэтому в правилах указываем начальную точку отсчета для градиента -

1

top

1

#77c531

1

#4d722d

1

background - linear-gradient

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

Для браузеров на движке 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);

… указывают, что это градиент линейный. Дальше -

1

0 0, 0 100%

1

top

1

top

1

left top

1

right top

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

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

1

left bottom

1

from(#77c531)

1

to(#4d722d)

Следующие три строки предназначены для браузеров Firefox (префикс

1

-moz

1

-o

1

-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 имеется скрипт для настройки конфигурационного файла

1	/etc/pacman.d/mirrorlist

–

1	rankmirrors

.

Что он делает?

1

rankmirrors

Что это дает? В результате работы

1

rankmirrors

1

/etc/pacman.d/mirrorlist

1

rankmirrors

1

-help

Похожими утилитами являются

1

netselect

1

mirrorselect

1

rankmirrors

1. Так как

   1	rankmirrors

   является python-скриптом, для его работы необходим установленный Python в системе. Устанавливаем, если его нет в системе:

$ sudo pacman -Sy python

1. Переходим в директорию со списком зеркал pacman’а:

$ cd /etc/pacman.d/

1. Делаем копию существующего списка зеркал

   1	mirrorlist

   :

$ sudo cp mirrorlist mirrorlist.backup

1. Открываем копию списка зеркал в своем любимом редакторе и раскомментируем все строки с адресами серверов, географически наиболее близко расположенных к нам (по идее, это и будут сервера с самым быстрым доступом):

$ sudo nano -w mirrorlist.backup

1. Сохраняем изменения в файле и выходим из него. Запускаем скрипт

   1	rankmirrors

   для выбора зеркал из указанного нами списка (для запуска

   1	rankmirrors

   потребуется войти в учетную запись

   1

   root

   ‘а. Под

   1

   sudo

   у меня скрипт отказался работать, ругаясь на отсутствие прав доступа к файлу

   1	mirrorlist

   ).

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

1

root

$ su -

Запускаем

1

rankmirrors

1

root

# rankmirrors -n 6 mirrorlist.backup > mirrorlist

где:

• 1

  -n 6

  – вывести (в нашем случае – записать) 6 сервером с самым маленьким временем отклика

• 1	mirrorlist.backup

  – список серверов для теста на время отклика

• 1	mirrorlist

  – файл, куда записываются адреса серверов скриптом

  1	rankmirros

В результате

1

rankmirrors

1

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. Теперь осталось последнее – заставить

   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.

На этом все.