Иногда при открытии файла в редакторе Sublime Text вместо читаемых символов можно увидеть абракадабру.

Это связано с тем, что открытый файл был создан в другом редакторе и сохранен в кодировке, отличной от той, которая по умолчанию установлена в настройках Sublime Text. Например, откроем файл

1

shablon.html

Это шаблон, с помощью которого создаются html-странички для одного сайта. Файл был создан (или отредактирован) в Adobe Dreamweaver и сохранен в кодировке

1

KOI8-R

Если этот файл открыть в Sublime Text, то увидим следующую картину:

Что нужно сделать в редакторе Sublime Text, чтобы этот документ открылся правильно и был удобочитаем? Все просто!

Для этого переходим в меню “File - Reopen with Encoding”. Стрелка справа от этой записи говорит, что за ней “скрывается” подменю.

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

1

shablon.html

1

KOI8-R

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

На этом краткую статью о смене кодировки открытого файла в Sublime Text можно считать завершенной.

В одной из предыдущих статей я описывал способ определения радиуса скругления элемента на макете Photoshop.

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

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

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

Первый вопрос. Трансформация прямоугольного выделения (Rectangular Marquee). Допустим, необходимо выделить какой-либо участок или элемент на psd-макете. Как обычно, выбираю инструмент выделения на панели Photoshop. И произвожу само выделение. Но бывает так, что после того, как выделение уже построено, его нужно изменить. Увеличить высоту или ширину. Или же наоборот - уменьшить. Каким образом нужно поступить в случае?

Все просто. Для изменения размеров выделения его нужно перевести в режим трансформирования. Проще всего это выполнить с помощью сочетания горячих клавиш Ctrl+T. Легко запомнить, Т - трансформирование.

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

Чтобы легче было представить, как это выглядит на деле, достаточно взглянуть на рисунок “Трансформация выделения” ниже.

С первым вопросом разобрались. Приступаю ко второму. В чем же заключается неточность, которая может “сгубить” шаблон?

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

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

В зависимости от цвета заливки, это может быть достаточно трудной задачей. Тут нужна внимательность и точность.

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

На этом можно закончить этот краткий обзор.

Хороший ресурс со шрифтами создан усилиями нескольких участников форума forum.htmlbook.ru.

Адрес ресурса - http://webfont.ru. На этом сайте собрана коллекция самых разнообразных и, самое главное, часто используемых шрифтов для web. Шрифты постоянно обновляются и добавляются.

Пользоваться сайтом можно двумя способами.

Первый - поиск и скачивание нужного набора шрифтов на самом ресурсе. На нем реализован механизм поиска. Скачивание необходимо делать в обязательном порядке, если шрифты будут использоваться на вашем собственном сайте. На локальную машину скачивается набор шрифтов, составляющих указанное семейство, и css-файл c правилами подключения его в коде. Точно также, как у известного FontSquirrel.

Второй - участник форума forum.htmlbook.ru Softlink сделал замечательную вещь - плагин под Sublime Text 2. Плагин называется WebFont и его установка производится как обычно, через менеджер плагинов в этом редакторе:

После подключения вставка в код нужного набора шрифтов производится двумя движениями. Для начала открываем сам плагин с помощью сочетания клавиш Ctrl+Alt+F:

В появившемся списке выбираем нужный шрифт (можно клавишами-стрелками) и нажимаем Enter. Плагин автоматически вставит в тело документа ссылку на выбранное семейство шрифтов и в комментариях укажет, какие именно семейства были подключены.

Теперь достаточно выбрать нужный

1

font-family

Стоит обратить внимание, что в этом случае в коде будет только ссылка на шрифт, который располагается на сайте WebFont. Получается аналог известного ресурса GoogleFonts.

Но, помимо этого, плагин WebFont обладает еще несколькими интересными способностями. Если посмотреть на первые три пункта списка при запуске плагина, можно увидеть следующие строки:

• • перейти на webfont.ru
• • обновить список шрифтов
• • скачать шрифт

Первое действие - перейти на webfont.ru - это прямая ссылка на сайт webfont.ru. Если выбрать ее, то автоматически запуститься браузер по-умолчанию, который откроет данный сайт. А именно - сразу в каталоге шрифтов. По-моему, это полезно, когда хочется/нужно поискать шрифт на самом сайте.

Второе действие - обновить список шрифтов - говорит само за себя. Плагин обновляет список шрифтов, соотносясь с сайтом webfont.ru.

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

Сделаю экспресс-пробежку по данной возможности.

Открываем плагин (сочетание клавиш Ctrl+Alt+F - учимся работать правильно, по максимуму забываем о мыше). Выбираем пункт “* скачать шрифт”.

Откроется еще один список, который по сути будет повторением первого, но без первых трех “служебных” пунктов:

Выбираем нужный шрифт и жмем Enter. Плагин спросит, куда нужно сохранить скачиваемый шрифт. Дело в том, что он умеет работать с файловой системой на локальном компьютере и определять в ней местоположение редактируемого файла (открытого на данный момент в редакторе Sublime Text 2).

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

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

1

fonts

Она отображена внизу списка - это те папки, которые находятся на одном уровне с файлом MyFreeLancer.html. Выбираю ее - и опять появиться дополнительный список с вопросами. Я просто хочу “* да, распаковать сюда”:

Sublime “скажет” о том, что нужно немного подождать (1-2 секунды). И все - больше ничего не появиться. Скачался шрифт или нет, неизвестно. Что-же, посмотрю сам. Открываю Total Commander и смотрю:

Вот они - выделены красненьким! Более того, тут присутствует и файл

1

css

1

acid.css

P.S.

Для меня ресурс WebFont показался полезным в первую очередь тем, что на нем собраны наиболее часто используемые шрифты. Хотя на момент написания статьи там находилось 133 семейства шрифтов.

Еще одной очень привлекательной чертой этого ресурса является наличие плагина WebFont под редактор Sublime Text 2, с помощью которого можно подключить нужный шрифт удобно и быстро.

Очень простой способ получить полный доступ (права

1

root

‘а) к системе Linux, используя загрузчик GRUB (даже LiveCD не нужен).

Что для этого нужно? Просто грузим систему и ждем появления меню GRUB’а со списком установленных в системе операционных систем.

Список может быть примерно такой:

Gentoo Linux 2.6.31-r6
ArchLinux 2.6.31
Ubuntu Karmic Koala 9.10
Sabayon Linux r5.1 KDE

Выбираем систему (стрелочками вверх-вниз), к которой хотим получить доступ. И нажимаем буковку

1

e

1

e

1

edit

Выбираем пункт ArchLinux 2.6.31, нажимаем

1

e

1

menu.lst

1

grub.cfg

title Archlinux 2.6.31
  root (hd0,5)
  kernel /boot/vmlinuz26 root=/dev/sda6 ro vga=0?318
  initrd /boot/kernel26.img

Удаляем в строке

1

kernel

1

/boot/vmlinuz26

1

root

1

root=/dev/sda6

kernel /boot/vmlinuz26 root=/dev/sda6

Дописываем в конец этой строки это:

1

rw init=/bin/bash

kernel /boot/vmlinuz26 root=/dev/sda6 rw init=/bin/bash

Сохраняем результаты нашего “непосильного” труда – нажимаем Enter и затем грузим ArchLinux с исправленными нами параметрами, нажав

1

b

1

b

1

boot

В итоге у нас загружается консоль с правами

1

root

На этом все.

Маленькая заметка о хитрости верстки.

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

С появлением стандарта CSS3 цветовые переходы можно передать в коде легко и быстро. Поэтому, закодировать градиент - это не вопрос. Главное - быть внимательным и не пропустить (заметить) его.

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

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

Допустим, есть страница 404 от известной web-студии TemplateMonster.com с фоновой заливкой определенного цвета:

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

1

I

Не закрываю окно “Пипетки”. “Забираю” цвет во-второй четверти фоновой заливки и проверяю, не изменился ли цвет. И так далее - третья четверть, четвертая четверть. И каждый раз смотрю, поменялся цвет или нет:

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

1

#140100

background: #140100

Все. Просто и со вкусом.