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

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

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

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

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

Установка плагина WebFont

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

Выбор шрифта для установки

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

Теперь достаточно выбрать нужный font-family, а ненужные удалить или закомментировать:

Подключенный шрифт

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

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

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

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

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

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

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

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

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

Выбор шрифта для скачивания

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

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

Выбор места для сохранения шрифта

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

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

Распаковываем шрифт

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

Распакованные шрифты в системе

Вот они - выделены красненьким! Более того, тут присутствует и файл css (в данном случае это acid.css) с уже готовыми правилами для вставки в код. Удобно, что сказать!

P.S.

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

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


Очень простой способ получить полный доступ (права 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

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

Выбираем пункт ArchLinux 2.6.31, нажимаем e и нам открывается для редактирования запись, соответствующая записи в конфигурационном файле GRUB menu.lst (для Debian-подобных систем, или grub.cfg – для Gentoo):

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

Удаляем в строке kernel (в данном случае – третья по счету) все, кроме пути к ядру /boot/vmlinuz26 и пути к разделу root (root=/dev/sda6). То есть, у нас получится запись такого вида:

kernel /boot/vmlinuz26 root=/dev/sda6

Дописываем в конец этой строки это: rw init=/bin/bash. В итоге запись будет выглядеть так:

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

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

В итоге у нас загружается консоль с правами root‘а. Что и требовалось. Дальше – только дело фантазии и умения.

На этом все.


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

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

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

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

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

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

Страница с фоном в Photoshop

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

Цвет в верхней половине фона в Photoshop

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

Цвет в нижней половине фона в Photoshop

Другими словами, я “пробежался” по-вертикали с помощью пипетки и выяснил, что в конкретном случае, который представлен здесь, цвет везде одинаков - #140100. Итог - фоновая заливка страницы 404 выполнена дизайнером с использованием одного цвета. Поэтому в CSS-правилах можно указать коротко:

background: #140100

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


При версте сайта из макета одним из часто повторяющихся действий является наполнение содержимого так называемой “рыбой”.

Что такое “рыба”? Это ничего незначащий текст, единственная роль которого состоит в качестве наполнителя текстом тех областей, в которых в последствии предполагается располагать осмысленный контент.

В процессе верстки такого текста у верстальщика естественно нет такого контента. Но он ему и не нужен. Для него главное создать полную копию макета и заполнить каким-либо текстом.

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

Помимо двух указанных источников, существует так называемая классическая “рыба”. Это текст на латинском языке, начинающийся со слов “Lorem ipsum dolor sit amet”.

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

В Интернете имеется достаточное количество сайтов, являющихся генераторами подобного текста. К примеру, популярный сайт Lipsum.com.

Однако, для распространенного блокнота программистов Notepad++ имеется плагин, который также является генератором Lorem ipsum. Название плагина именно такое - “Lorem Ipsum”. Устанавливается плагин через менеджер плагинов “Plugin Manager”.

После установки плагин прописывается в меню “Плагины - InsertLoremIpsum - View Insert Dialog”. При его активации открывается диалоговое окно в правой части:

Плагин LoremIpsum в Notepad++

Управление “LoremIpsum” минималистичное, но что называется - все по делу.

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

Следующие за ним три строки:

  • words (слова)
  • sentences (предложения)
  • paragraphs (параграфы)

… являются радиопереключателями, с помощью которых можно выбрать, что необходимо вставлять в код - слова, предложения или параграфы.

Флажок “Start with Lorem ipsum” задает условие, при котором каждый набор слов, предложения или параграфы начинаются с Lorem ipsum. И в самом низу расположена кнопка “Insert”, предназначение которой очевидно - вставить выбранный набор слов, предложений или параграфов в код html-документа.

Перейдем от слов к делу и на практике вставим “рыбу”.

Вставляем 4 слова. Устанавливаем в окне счетчика число 4, выбираем радиопереключатель в положение words. Чтобы вставляемые записи не повторялись, убираем галочку checkbox “Start with Lorem ipsum”.

Устанавливаем курсор мыши в то место html-кода, куда необходимо поместить “рыбу” и нажимаем кнопку “Insert”:

Плагин LoremIpsum - вставка слов в Notepad++

Вставим 3 предложения. Устанавливаем счетчик в значение 3. Переводим переключатель в положение sentences (предложения). Оставляем пустой строку “Start with Lorem ipsum”.

Устанавливаем курсор мыши в то место html-кода, куда необходимо поместить “рыбу”. Жмем на “Insert”:

Плагин LoremIpsum - вставка трех предложений в Notepad++

Вставляем 1 параграф. Устанавливаем счетчик в значение 1. Переводим радиокнопку в положение paragraphs (параграфы). Устанавливаем курсор мыши в то место html-кода, куда необходимо поместить “рыбу”. Нажимаем кнопку “Insert”:

Плагин LoremIpsum - вставка одного параграфа в Notepad++

Заключение

Как мне кажется, использование плагина “LoremIpsum”, встроенного в Notepad++, более удобно, чем сторонние источники, типа сайтов-генераторов. Удобство заключается в том, что все “под рукой”. В любой момент можно открыть диалоговое окно вставки “рыбы” и произвести практически моментальное наполнение содержимым.

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

На этом все.


Эта статья будет касаться настройки табуляции в Sublime Text. Первый вопрос - а для чего это нужно и что не устраивает в настройках редактора по умолчанию? На эти два вопроса у меня есть два ответа.

Первое - при общении на форуме верстальщиков было высказывание, что при создании HTML-кода желательно заменить символы табуляции на символы пробела. К примеру, Tab размером 4 нужно заменить на 4 символа пробела, или же Tab размером 2 заменить на 2 символа пробела.

Насколько я могу помнить, такое требование небезосновательно, ибо существуют рекомендации Google Руководство по оформлению HTML/CSS кода от Google, в которых упоминается данный вопрос.

Второе - изменить размер табуляции можно и нужно в случае, когда HTML-код большой. При Tab равным 4 (четырем) суммарное смещение строк всего кода может быть велико и такой код затруднительно читать.

Я нахожу такое объяснение (и это мое личное предпочтение) данному вопросу. Итак, приступим к рассмотрению, как настраивается отступы и табуляции в Sublime Text.

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

Вкладка настройки табуляции

В правом нижнем углу находится кнопка-текст, при нажатии на которую открывается контекстное меню, представленное выше.

Первое - здесь можно выбрать размер табуляции - от Tab Width: 1 до Tab Width: 8. Тот размер таба, который используется на данный момент, отмечен галочкой.

Если, к примеру, в текущем документе используется размер табуляции 4, а необходимо изменить его на размер 2, то достаточно изменить в этом окне значение с 4 на 2. Редактор автоматически изменит размер всей табуляции документа с 4 на 2 - очень удобно.

Строка “Convert Indentation to Spaces” позволяет автоматически конвертировать всю табуляцию открытого документа в символы пробелов. Строка “Convert Indentation to Tabs” выполняет противоположную функцию - преобразование пробельных символов с табуляцию. При этом редактор выполняет данную задачу также автоматически, для всего документа, ничего выделять не нужно.

Самая верхняя строка - “Indent Using Spacing” показывает, какие символы используются в текущем документе для создания отступов - табуляция или пробелы. В моем случае - это символы пробелов. Это настройка, выставленная в Sublime Text для всех документов, открываемых или создаваемых. Достичь ее можно, отредактировав файл конфигурации редактора.

Редактирование файла конфигурации Sublime Text

Для редактирования настроек в редакторе предназначено два файла - один общий, с настройками по умолчанию (открыть его можно в меню через “Preferences - Settings - Default”).

Настроек там много, но все они хорошо документированы, так что не проблема понять, для чего каждая предназначена. Данный файл редактировать не рекомендуется, так как для пользовательских настроек предназначен еще один файл конфигурации - “Preferences - Settings - User”.

Вот в него я и буду писать свои личные предпочтения для работы в Sublime Text.

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

Пользовательские настройки Sublime Text

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

Первая строка - "tab_size": 2 - задает размер отступа. В моем случае он равен 2 (два символа).

Вторая строка - "translate_tabs_to_spaces": true - заставляет Sublime Text преобразовывать символы табуляции в символы пробела.

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

Если вернуться к остальным настройкам, представленным выше, то можно сказать, что почти все они очень и очень полезны.

Отдельно стоит отметить понравившиеся мне:

  • "trim_trailing_white_space_on_save": true - удаление пустых символов в конце строки при сохранении файла;
  • "save_on_focus_lost": true - при потере фокуса Sublime автоматически сохраняет редактируемый файл;
  • "ensure_newline_at_eof_on_save": true - при закрытии файла автоматически добавлять пустую строку в его конец.

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

О темах для Sublime Text

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

Такое впечатление, что русскоязычные пользователи все являются фанатами Mac OS X, ибо это тема “закошена” под такой стиль оформления.

Лично мне она не нравиться. У нее слишком яркая цветовая гамма. Когда по полдня рассматриваешь HTML или CSS код в Sublime Text, то начинаешь это чувствовать.

Моя любимая тема оформления - Farzher. Даже в ее описании говориться, что “возможно, это лучшая тема для web-дизайнеров”.

Она действительно имеет приятную передачу цветов, сами цвета приглушены (если даже выбран светлый вариант). Ниже приведу картинку с открытым HTML-кодом, расцвеченым в Farzher Neon:

Тема оформления Farzher Neon

На этом все.