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

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

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

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

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

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

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

1

I

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

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

1

#140100

background: #140100

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

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

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

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

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

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

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

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

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

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

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

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

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

• 1

  words

  (слова)

• 1

  sentences

  (предложения)

• 1	paragraphs

  (параграфы)

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

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

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

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

1

checkbox

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

Вставим 3 предложения. Устанавливаем счетчик в значение

1

3

1

sentences

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

Вставляем 1 параграф. Устанавливаем счетчик в значение 1. Переводим радиокнопку в положение

1

paragraphs

Заключение

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

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

На этом все.

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

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

1

Tab

1

4

1

4

1

Tab

1

2

1

2

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

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

1

Tab

1

4

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

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

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

Первое - здесь можно выбрать размер табуляции - от

1

Tab Width: 1

1

Tab Width: 8

Если, к примеру, в текущем документе используется размер табуляции

1

4

1

2

1

4

1

2

1

4

1

2

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

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

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

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

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

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

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

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

Первая строка -

1

"tab_size": 2

1

2

Вторая строка -

1

"translate_tabs_to_spaces": true

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

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

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

• 1	"trim_trailing_white_space_on_save": true

  - удаление пустых символов в конце строки при сохранении файла;

• 1	"save_on_focus_lost": true

  - при потере фокуса Sublime автоматически сохраняет редактируемый файл;

• 1	"ensure_newline_at_eof_on_save": true

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

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

О темах для Sublime Text

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

1

Soda

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

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

Моя любимая тема оформления -

1

Farzher

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

1

Farzher Neon

На этом все.

Рассмотрим случай, когда на одной машине (desktop) стоит все та же Ubuntu, а на другой машине (notebook) стоит Windows XP.

Необходимо соединить оба компьютера по

1

ad-hoc

1

точка-точка

И в заключение, протестируем созданную нами сеть.

Шаг Первый - настройка ad-hoc wifi в Ubuntu Karmic

Открываем NetworkManager правым щелчком мыши на значке в Панели Gnome и выбираем “Edit connections”. Появляется окно “Network Connections”.

Переходим на вкладку “Wireless” (Беспроводные):

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

• 1	Connection name

  (имя сети) - это имя сети, которое будет отображаться на компьютере и в списке сетей NetworkManager;

• 1

  SSID

  - реальное имя сети. Каждая сеть Wi-Fi имеет свое имя, по которому сетевые устройства распознают их и подключаются к ним;

• 1

  Mode

  - режим сети. В выпадающем списке выбираем режим сети Ad-hoc;
• остальные три поля -

  1

  BSSID

  ,

  1	MAC address

  и

  1

  MTU

  оставляем пустыми.

Переходим на вкладку “Wireless Security”. Оставляем поле “Security” пустым (None):

Далее, переходим на вкладку “IPv4 Settings”. Здесь мы выбираем метод получения IP-адреса компьютером в сети. В нашем случае мы задаем его вручную.

Для этого в выпадающем списке “Method” выбираем “Manual” (Ручной). Затем, в поле “Addresses” (Адреса) нажимаем кнопку Add (Добавить) и последовательно задаем IP-адрес

1

192.168.0.30

1

255.255.255.0

1

1.1.1.1

Вкладку “IPv6 Settings” оставляем как есть, ничего не конфигурируя (Method - Ignore):

Нажимаем кнопочку Apply (Применить) и видим конечный результат работы - список сетей в “NetworkManager” и нашу Windows_XP среди них:

Закрываем окно. Вновь нажимаем, теперь уже левой кнопкой мыши, на значке “NetworkManager” в Панели Gnome. Выбираем в выпавшем списке “Connect to hidden wireless network” (Подключиться к скрытой беспроводной сети).

В списке “Connection” выбираем нашу Windows XP и нажимаем Connect (Соединить):

В эмуляторе терминала набираем команду:

$ sudo ifconfig -a

и видим, что сетевой интерфейс поднят и сеть запущена:

Шаг Второй - Настройка

1

ad-hoc

wifi в Windows XP

Открываем в “Панели управления” - “Сетевые подключения”:

Кликаем правой кнопкой мыши на значке “Беспроводное сетевое соединение” и в контекстном меню - “Properties” (Свойства). В окне “Свойств” находим в самом низу строку “Протокол Интернета (TCP/IP)”:

Нажимаем “Свойства”. Открывается окно настроек TCP/IP. Здесь мы задаем IP-адрес, маску сети и шлюз сети так же, как и в NetworkManager, за исключением того, что IP-адрес у нас будет несколько иной -

1

192.168.0.31

Нажимаем OK. Далее кликаем левой кнопкой мыши на значке “Беспроводное сетевое соединение” в “Сетевые подключения” “Панели управления”. Открывается окно со списком беспроводных сетей, находящихся в зоне доступа компьютера:

Выбираем “Установить беспроводную сеть” для создания сети

1

ad-hoc

Нажимаем “Готово”. Вновь открывается окно со списков доступных беспроводных сетей. В этом списке появилась и наша windows:

Выбираем сеть windows и нажимаем “Подключить”:

В итоге получаем подключение к сети windows:

Шаг Третий - тестирование сети из Ubuntu

Ping самих себя:

Ping Windows XP:

Трассировка Windows XP:

Сканирование портов Windows XP:

На этом все.

Свойство

1	box-shadow

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

1

div

.

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

Можно также создать тень, которая будет размещена не снаружи элемента, а внутри него.

Синтаксис свойства

1	box-shadow

:

box-shadow: h-shadow v-shadow blur spread color inset;

где:

• 1

  h-shadow

  - смещение тени по горизонтали;

• 1

  v-shadow

  - смещение тени по вертикали;

• 1

  blur

  - размытие границ тени;

• 1

  spread

  - размер тени;

• 1

  color

  - цвет тени;

• 1

  inset

  - создать тень внутри элемента.

Порядок следования значений свойства

1

box-shadow

Простой пример использования

1

box-shadow

Браузеры Firefox, Chrome, Opera и IE9 отобразят серую тень под этим блоком.

Код, выводящий данный результат:

box-shadow: 5px 5px 2px #888;

Однако, приведенный пример будет не совсем работоспособным. Для браузеров Firefox и Chrome более ранних версий может понадобиться добавление префиксов. Тогда полная версия кода будет выглядеть следующим образом:

box-shadow: 5px 5px 2px #888;
-moz-box-shadow: 5px 5px 2px #888;
-webkit-box-shadow: 5px 5px 2px #888;

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

Примеры использования кода:

box-shadow: 5px 5px;
box-shadow: 5px 5px 2px;
box-shadow: 5px 5px 2px #888;
box-shadow: 5px 5px 2px 3px #888;
box-shadow: 5px 5px 2px 3px #888 inset;
box-shadow: 5px 5px 2px #888, -5px -5px #f4f4f4, 1px 1px 2px #cc6600;

Последняя строка наиболее интересна, поэтому разберем ее подробнее.

Смещения по горизонтали и вертикали могут принимать как положительные, так и отрицательные значения. В последнем случае тень будет перемещаться не вправо, а влево. Размытие тени blur и размер тени spread могут иметь только положительные значения или 0. Несколько теней для одного элемента можно задавать последовательно, через запятую. В нашем примере было задано три тени с разными цветами и смещением.

Теория

1	box-shadow

По умолчанию, для элемента создается внешняя тень.

Тень создается как минимум с посощью двух обязательных параметров - горизонтального и вертикального смещения.

Горизонтальное смещение определяет смещение тени относительно элемента по горизонтали. Может принимать положительное или отрицательное значение. При положительном значении тень смещается вправо от элемента. При отрицательном - влево от элемента.

Вертикальное смещение задает смещение тени по вертикали относительно элемента. Может рпинимать положительное или отрицательное значение. При положительном значении тень смещается относительно элемента вниз по вертикали. При отрицательном значении смещение происходит вверх по вертикали.

Третье и необязательное значение свойства box-shadow, это размытие

1

blur

Размер тени spread также явлется необязательным параметром и может принимать как положительные, так и отрицательные значения. При положительном значении тень увеличивается по всем направлениям. При отрицательном наоборот уменьшается.

Несколько примеров теней

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

В примере A смещение тени происходит влево и вверх на 5 пикселей.

  #Example_A {
  -moz-box-shadow: -5px -5px #888;
  -webkit-box-shadow: -5px -5px #888;
  box-shadow: -5px -5px #888;
}

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

  #Example_B {
  -moz-box-shadow: -5px -5px 5px #888;
  -webkit-box-shadow: -5px -5px 5px #888;
  box-shadow: -5px -5px 5px #888;
}

В примере С таже самая тень имеет размер в 5 пикселей.

  #Example_C {
  -moz-box-shadow: -5px -5px 0 5px #888;
  -webkit-box-shadow: -5px -5px 0 5px#888;
  box-shadow: -5px -5px 0 5px #888;
}

Пример D показывает тень, имеющую размытие в 5 пикселей и размер в 5 пикселей.

  #Example_D {
  -moz-box-shadow: -5px -5px 5px 5px #888;
  -webkit-box-shadow: -5px -5px 5px 5px#888;
  box-shadow: -5px -5px 5px 5px #888;
}

В примере E показана тень, которая не имеет смещения по горизонтали и вертикали, но у нее задано размытие в 5 пикселей.

  #Example_E {
  -moz-box-shadow: 0 0 5px #888;
  -webkit-box-shadow: 0 0 5px#888;
  box-shadow: 0 0 5px #888;
}

В примере F тень также не имеет смещения, но имеет размытие и размер в 5 пикселей.

  #Example_F {
  -moz-box-shadow: 0 0 5px 5px #888;
  -webkit-box-shadow: 0 0 5px 5px#888;
  box-shadow: 0 0 5px 5px #888;
}

На этом все.