Столкнулся с небольшой, но достаточно неприятной проблемой.
Занимался изучением настройки сверстанного HTML-шаблона под WordPress. То есть, другими словами - создания темы WordPress из готового HTML-шаблона.
Для этой задачи у меня на Linux Mint 17 Cinnanom 64-bit установлен локальный сервер XAMPP. Если кто не знает, как сервер XAMPP устанавливается под Linux, то могут почитать в этой статье - “Установка XAMPP под Linux Mint 17”. Под локальным сервером у меня “крутятся” виртуальные хосты на основе движка WordPress.
Предпросмотр темы не отображается в WordPress
После создания директории под новую тему -
1
Choose
закинул к нее скриншот готовой темы для preview в менедежере тем WordPress -
1
wp-admin/themes.php
. Но вот неожиданность - картинка-скриншот будущей темы Choose не отобразилась!
… не сработало, так как в моем конфигурационном файле
1
httpd.conf
обе строчки были расскоментированы по умолчанию:
Решение оказалось на удивление простым. Я и не подозревал, что настройка прав доступа в Linux может быть такой “коварной” штукой! Сначала обратил внимание на тот факт, что preview тем WordPress, которые идут “в комплекте” с ним - “Twenty Fourteen”, “Twenty Thirteen”, “Twenty Twelve” нормально отображаются на странице. А вот
1
preview
моей темы - не отображается:
Решил проверить догадку методом “научного тыка” - тупо сравнить два файла-preview
1
screenshot.png
из разных тем, своей “Choose” и стандартной “Twenty Fourteen”:
Вот оно! У файла
1
screenshot.png
из темы “Twenty Fourteen” имеются права на чтение
1
r
для - владельца, группы и всех остальных
1
-rw-r-r-
. У файла
1
screenshot.png
из моей темы “Choose” имеются права на просмотр
1
r
только для владельца данного файла
1
-rw- - -
.
Ну что-же, нужно добавить
1
+
права чтения
1
r
для всех
1
a
пользователей файла
1
screenshot.png
темы “Choose”:
… и проверить результат:
Перехожу в WordPress на страницу управления темами
1
wp-admin/themes.php
и смотрю, что получилось:
Картинка по центру изображения - это preview создаваемой темы “Choose” под WordPress. Как видно, все прошло удачно.
Картинки темы WordPress не отображаются под XAMPP
Но вышеназванное решение оказалось лишь половиной дела. Вторая проблема заключалась в том, что при активации вновь созданной темы под WordPress изображения из нее не отображаются на странице.
Фоновые изображения, картинки в HTML-файле - ничего не появляется на странице. Firebug не смог мне помочь - единственное, что он “подсказал” - “Файл невозможно загрузить”. Многословно, ничего не скажешь!
Помог незаменимый ресурс для front-end разработчика - Stack Overflow. Решение проблемы заключено в двух строках:
То есть, переходим в директорию
1
htdocs
и меняем рекурсивно
1
-R
права на все действия
1
777
для всего содержимого текущей
1
.
директории. Не знаю, как там с вопросами безопасности в этом случае, но факт остается фактом - все стало работать, как и надо было:
Статья посвящена вопросу установки Node.js и пакетного менеджера npm под операционную систему Linux Mint 17 “Qiana” Cinnamon (64-bit).
Также рассмотрен вопрос установки пакетного менеджера Bower в этой же операционной системе.
Почему выбрана система Linux Mint - об этом не стоит говорить долго. Это система гораздо удобнее для задач кодинга, нежели Windows. Пакеты Node.js и пакетный менеджер npm необходим для дальнейшего изучения ремесла верстальщика.
Дело в том, что популярный фреймворк Foundation для своей корректной работы требует первоначальной установки Node.js. Автор планирует в дальнейшем познакомиться с фреймворком Foundation, поэтому ему потребовалась установка вышеназванных пакетов.
О том, что такое Node.js, в этой статье также не будет описано. Во-первых, автор статьи имеет лишь поверхностное представление об этом сервере. А во-вторых, в Интернете есть немало хороших материалов по данному вопросу.
Установка Node.js
Для установки пакета Node.js под систему Linux Mint можно воспользоваться официальным сайтом проекта - Node.js. В разделе Download имеется табличка для скачивания различных версий пакета Node.js. В случае системы Linux в этой таблице нужно найти строку Linux Binaries.
Однако я не буду “заморчиваться” установкой из исходного кода. В Linux Mint есть прекрасный менеджер пакетов
1
apt-get
, которым можно и нужно воспользоваться для быстрой и безопасной установки Node.js под Linux. Единственный минус такого подхода - в результате у меня на машине будет стоять не самая свежая версия сервера Node.js. Однако в данном случае это абсолютно не критично.
В терминале ввожу команду:
… пару секунд терпения и у меня под Linux Mint 17 “Qiana” Cinnamon (64-bit) установлен пакет Node.js версии:
На момент написания статьи самая свежая версия Node.js (как указано на официальном сайте) - это 0.10.28. Как видим, разница в версиях небольшая, так что я поступил правильно, воспользовавшись
1
apt-get
.
Установка npm под Linux Mint
Как хорошо известно, у данного сервера имеется свой собственный менеджер пакетов npm (Node Packaged Modules), для установки дополнительных модулей под Node.js. Другими словами, с помощью менеджера npm можно установить под сервер Node.js любой модуль, имеющийся в наличии на репозитории GitHub. Модуль расширяет возможности сервера Node.js в зависимости от того, какой это модуль (тавтология). С кратким описанием и списком всех модулей под Node.js можно ознакомиться на официальном сайте проекта npm - Node Packaged Modules.
При установке в свою систему Linux Mint через
1
apt-get
у меня был установлен только сам сервер Node.js. При этом менеджер пакетов npm отстуствовал в системе. Не знаю, как это происходит при установке пакета Node.js из исходников, но при использовании
1
apt-get
у меня получилось именно так. Поэтому следующим шагом будет инсталляция менеджера пакетов npm под систему Linux Mint.
В терминале Linux ввожу команду:
Пробежит много-много строк, но в результате в системе появиться пакет npm:
Использование менеджера npm очень похоже на использование менеджеров пакетов a-la Linux:
1
apt-get
,
1
emerge
,
1
pacman
и так далее. npm также является консольной командой и у него схожие ключи, поэтому пользователи Linux без труда разберутся с ним:
Давайте проверим работу установленного менеджера npm. Для этого я в специально отведенной директории Projects создам поддиректорию npm, перейду в нее для дальнейшего удобства работы и установлю в этой поддиректории модуль
1
underscore
из репозитория npm:
Если теперь посмотреть содержимое поддиректории npm c помощью команды
1
ls
, то обнаружим появление папки
1
node_modules
, внутри которой располагается подпапка
1
underscore
c содержимым одноименного модуля:
Модуль Underscore успешно установлен и менеджер npm также успешно справился со своей задачей.
Установка менеджера Bower под Linux Mint
Переходим к заключительному (и продолжительному) вопросу данной статьи и рассмотрим установку менеджера пакетов Bower. Могу предвидеть у читателей логичный вопрос: “Как - еще один менеджер пакетов?! Но зачем? Разве не хватает npm, c которым мы только что познакомились?”
Все правильно! npm - это менеджер пакетов. И Bower - тоже менеджер пакетов. Отличие первого от второго заключается в том, что npm - это менеджер пакетов для сервера Node.js (и только). А Bower (хотя сам является модулем под Node.js) - это менеджер пакетов для всего проекта в целом.
Npm понимает и может работать только с JavaScript-приложениями (модулями под Node.js, написанными на этом языке). Bower умеет работать с пакетами на JavaScript, HTML, CSS. C помощью него можно одним движением добавить в разрабатываемый проект все, что нужно: библиотеку jQuery, фреймворк Foundation, модуль Underscore, сброс стилей Normalize.css и так далее.
Не нужно самому “вручную” выискивать на безбрежных просторах Интернет пакет и подключать его в проект - Bower это сделает сам. Заманчиво, не правда ли? На официальной странице проекта Bower можно почитать подробную информацию о данном менеджере (правда, на английском языке). В разделе Search Packages можно поискать нужный пакет для установки.
Я же приступлю к установке Bower на свою локальную машину. Так как Bower является модулем для Node.js, то его можно установить с помощью менеджера npm:
Однако, если запустить после этого в терминале команду просмотра версии, то увидим такой результат:
Исправить ситуацию можно созданием ссылки:
Теперь если снова посмотреть версию установленного пакета, увидим следующее:
Создаю специальную поддиректорию
1
bower
в директории Projects, перехожу туда и запускаю менеджер bower на установку пакета jquery:
Если до этого момента на локальной машине (как у меня) не был установлен пакет
1
git
, то самое время это сделать, иначе bower не сможет установить указанный пакет jquery:
Все пакеты для скачивания и установки менеджер bower берет с GitHub, поэтому без пакета git этот менеджер не сможет обойтись.
Установка Git на Linux производится простой командой:
После этого, повторив команду установки jquery через bower, получаю следующий отзыв в консоли:
Если посмотреть на содержимое поддиректории
1
bower
, то увидим, что там появилась директория
1
bower_components
, в которой находится поддиректория
1
jquery
c установленным пакетом:
В результате была установлена последняя версия библиотеки jQuery - 2.1.1. Если нужна какая-то конкретная версия пакета (jQuery, в частности), то нужно это указать с помощью тега:
Внимательный читатель мог заметить, менеджер пакетов Bower также (как и npm) является консольным. Список доступных для него команд можно получить вызовом:
В частности, для обновления уже установленного пакета существует команда:
Для удаления установленного пакета имеется команда:
Посмотреть информацию о пакете:
Этой командой можно воспользоваться при настройке файла пакетной установки
1
bower.json
Плагин Bower под Sublime Text
Под редактор Sublime Text имеется одноименный плагин Bower, который в точности повторяет все возможности менеджера Bower. Все преимущество использования плагина Bower заключается в том, что производить инсталляцию, обновление или удаление пакетов можно прямо в редакторе Sublime Text, не переходя в консоль.
Установка плагина Bower выполняется стандартно - через менеджер пакетов Sublime Text: нажимаем сочетание клавиш Shift+Ctrl+P, введем в строке Install и выбираем из появившегося списка пакет Bower.
Теперь попробуем установить какой-либо пакет, не выходя из Sublime Text, c помощью плагина Bower. Для этого снова нажмем сочетание клавиш Shift+Ctrl+P, вводим Bower:Install и из появившегося списка выбираем пакет Foundation (к примеру).
Видим, как в панели проектов Sublime Text, в папке
1
bower_components
появилась целая куча подпапок, являющихся частью единого целого - фреймворка Foundation:
Настройка плагина Bower
Поддиректория
1
bower_components
, в которую плагин Bower производит установку пакетов, не является чем-то постоянным. То есть, можно легко изменить имя и расположение этой директории. Делается это следующим образом - в Sublime Text нажимаем сочетание клавиш Shift+Ctrl+P и вводим Bower: Configure project (никто не запрещает создать файл конфигурации вручную).
В текущую директорию автоматически добавиться файл
1
.bowerrc
типа json, в котором будет всего лишь одна строка - имя директории, в которую производится установка пакетов через плагин Bower:
Для эксперимента изменим имя папки с:
на:
… удалим старую директорию
1
bower_components
с пакетом foundation и установим через Bower другой пакет - underscore. В результате получим следущее:
Пакетная установка в менеджере Bower
У менеджера пакетов Bower есть еще одна замечательная особенность. Это возможность пакетной установки через специально созданный конфигурационный файл. Другими словами, создается специальный файл формата json (
1
component.json
), в котором прописываются имена всех пакетов, которые необходимы для установки в данном проекте. Затем в консоли запускается менеджер Bower c одной командой:
… менеджер bower прочитает файл
1
component.json
и автоматически установит все пакеты, перечисленные в нем. Отлично, не правда ли?
Примечание: начиная с Bower v.0.9 файл конфигурации
1
component.json
был переименован в файл
1
bower.json
, который я буду использовать в дальнейшем.
Файл
1
bower.json
имеет следующий формат:
… где
1
name
- это имя проекта,
1
version
- версия проекта,
1
dependencies
- зависимости проекта. Под зависимостями проекта подразумевается список сторонних пакетов (к примеру - foundation, backborne, jquery и так далее), которые используются при создании данного проекта.
Прописав в этом списке нужные пакеты, тем самым мы заставим Bower автоматически отслеживать наличие указанных пакетов для текущего проекта. Но, от слов к делу - давайте попрактикуемся и создадим примерный файл
1
bower.json
для текущего “проекта” bower. Для этого я удалю все ранее установленные в этой поддиректории пакеты:
… создам в этой директории пустой файл
1
bower.json
и наполню его следующим содержимым:
… где
1
latest
- самая последняя версия пакета. Сохраняю изменения, перехожу в консоль и запускаю команду:
В результате будет произведена автоматическая установка всех перечисленных в файле пакетов. Кроме того, Bower умеет отслеживать зависимости пакетов. В моем примере в консоль была выведена следующая информация:
… то есть, Bower отследил, что я устанавливаю библиотеку jQuery версии 1.9.1; но при этом самая последняя версия фреймворка Foundation 5.2.3 требует для своей работы jQuery версии 2.1.1. Вот менеджер и спрашивает у меня - как быть дальше? Ай да Bower!
Добавление зависимостей в файл bower.json
После создания пакетного файла
1
bower.json
в менеждере Bower можно автоматически добавлять в него запись при ручной установке отдельного пакета. Допустим, в ходе работы срочно потребовалась установка пакета backbone.
Тогда выполняем следующую команду:
… пакет
1
backbone
(и его зависимость
1
underscore
) успешно установились. Но нас интересует факт добавления записи в файл
1
bower.json
, поэтому смотрим:
Автоматическое создание файла bower.json
Помимо ручного создания и настройки файла
1
bower.json
, у данного менеджера предусмотрена команда для автоматического создания и настройки этого файла. Для этого необходимо в консоли запустить команду:
… тогда менеджер проведет нас “за ручку” через все этапы создания настроек файла
1
bower.json
путем задания серии вопросов. Взгляните на примерный результат вышеназванной команды:
Плагин AutoFileName в Sublime Text
Редактор Sublime Text имеет неизмеримое количество полезных плагинов. Одним из них является AutoFileName - незаменимая вещь для автодополнения путей файлов в проекте. Кто имел мало-мальский опыт работы в Dreamveawer (или подобные ему IDE), могут сразу догадаться, о чем идет речь.
Поэтому данный плагин “must have” в коллекции под рабочую версию Sublime Text любого верстальщика.
Заключение
Завершаю обзор установки пакетов Node.js, npm и Bower под систему Linux Mint. Надеюсь, статья оказалась достаточно полной, точной и грамотной. В ее написании неоценимую помощь оказало видео “ Bower - Обзор пакетного менеджера “ Sorax’а.
Еще один фреймворк из бесчисленного на сегодняшний день полка фреймворков - Bootstrap 3. Точнее было бы сказать, что не еще один - а флагман CSS-фреймворков! Версия 2 вышла давно и на сегодня является устаревшей. Сегодня самая современная версия - это версия 3. Поэтому ее мы и будем рассматривать. Вопрос данной статьи будет посвящен основе данной фреймворка - CSS-сетке и особенностям ее создания в версии 3.
Установка и настройка Bootstrap 3
Ничего сложного и необычного в установке фреймворка Bootstrap 3 нет. Для этого скачиваем дистрибутив с официального сайта Bootstrap 3, распаковываем архив в готовый проект-директорию.
Затем с официального сайта берем готовый шаблон HTML-документа - Basic template и создаем свой собственный индексный файл HTML:
В этом файле проверяем правильность путей для CSS и JS-файлов:
Все готово для дальнейшей работы.
Система сеток Bootstrap 3
Важнейшей составляюшей любого CSS-фреймворка является система CSS-сетки (grid). Как и в предыдущей версии Bootstrap 2, в версии 3 используется 12-ти колоночная система.
Однако, в Bootstrap 3 применяются четыре типа классов для создания адаптивной (responsive) сетки. На официальном сайте Bootstrap 3 имеется таблица с побробным и наглядным описанием этих классов - Grid Options.
В этой таблице представлены четыре ширины экрана устройства, на котором будет отображена страница. Колонка “Extra small devices” с шириной менее 768px обозначает мобильные устройства. Колонка “Small devices” с шириной равной или больше 768px представляет планшетные компьютеры (планшеты). Две остальные колонки представляют обычный настольный монитор через колонку “Medium devices” с шириной равной или больше 992px и широкоформатный монитор через колонку “Large devices” с шириной равной или больше 1200px.
Вышеназванные величины 768px, 992px и 1200px являются контрольными точками (breakpoints), служащими для обработки медиа-запросов в адаптивном дизайне страницы.
В данной таблице строка “Class prefix” является чуть ли не самой важной, так как в ней содержатся имена (префиксы) классов фреймворка Bootstrap 3 для каждого из четырех типов устройств. Для мобильного устройства имя (префикс) класса будет
1
.col-xs-
, для планшетного компьютера префикс будет
1
.col-sm-
, для обычного монитора -
1
.col-md-
и для широкоформатного монитора -
1
.col-lg-
. Для видно из названия префиксов, они являются сокращениями от названия самих устройств, поэтому их легко запомнить.
Вот и все, что необходимо знать о системе CSS-сеток в фреймворке Bootstrap 3. Дальше можно легко домыслить ход построения адаптивной сетки для конкретного сайта.
Пример создания CSS-сетки в Bootstrap 3
Допустим, необходимо создать следующий макет:
для широкоформатного монитора в макете должно быть 2 столбца - один шириной 10 колонок и второй шириной 2 колонки;
для обычного монитора 2 столбца - один шириной 8 колонок и второй шириной 4 колонки;
для планшета 2 столбца - один шириной 6 колонок и второй шириной также 6 колонок;
для мобильного устройства макет должен остаться, как и для планшета - два столбца одинаковой ширины.
То есть, при изменении ширины монитора устройства ширина столбцов в макете должна меняться, как показано выше. Для этого создадим простую разметку и добавим в нее классы Bootstrap 3:
Если открыть созданную страницу в окне браузера и попробовать менять ширину его окна, то в диспечере свойств страницы увидим метаморфозы, связанные с работой медиа-запросов
1
media-queries
. При ширине окна больше 1200px будем наблюдать левый столбец шириной в 10 колонок и правый столбец шириной в 2 колонки.
Уменьшив ширину окна до 992px, получим левый столбец шириной в 8 колонок и правый стлбец шириной в 4 колонки. Еще уменьшив окно до 768px, получим два одинаковых столбца шириной в 6 колонок. Если окно окончательно уменьшится (менее 768px), ширина столбцов останется прежней, но они расположаться вертикально, друг под другом (поведение по умолчанию).
Видимость элементов сетки в Bootstrap 3
Немного усложним задачу и сделаем ее интереснее ради теоретического примера работы фреймворка Bootstrap 3. Допустим, нам необходим такой макет:
широкоформатный монитор - 12 колонок;
обычный монитор - 3 колонки;
планшетный монитор - 3 колонки;
мобильный монитор - 2 колонки.
Тогда HTML-разметка и классы фреймворка Bootstrap 3 следующими:
В данном случае при измении ширины окна браузера будет меняться количество колонок внутри макета. При ширине большей 1200px число колонок будет равняться шести. При уменьшении окна до ширины в 992px число колонок изменится до 4-х и будет оставаться таковым при ширине окна 768px. Если окно еще уменьшится ниже 768px, то количество колонок измениться до двух.
Подобные метаморфозы возможны благодаря классу
1
hidden-x
, который вы могли заметить в разметке. Задача этого класса скрыть указанный элемент при достижении окном браузера определенной контрольной точки. Для каждого из предполагаемых состояний окна браузера необходимо указать класс -
1
hidden-lg
,
1
hidden-md
,
1
hidden-sm
,
1
hidden-xs
:
Противоположностью класса
1
hidden-x
является класс
1
visible-x
. Несмотря на то, что действие этих классов должно быть прямо противоположным друг другу, на практике это различие уловить не так просто и тут может помочь сравнительная таблица с официального файта Bootstrap 3 - Responsive utilities. В этой таблице (см. таблицу выше) хорошо видно различие между этими классами.
В то время как класс
1
hidden-x
производит скрытие элемента в определенной контрольной точке (breakpoint), во всех остальных состояниях элемент видимый. Класс
1
visible-x
делает элемент видимым только в определенном состоянии - во всех остальных состояниях элемент невидимый.
Вложенность (nesting) сетки в Bootstrap 3
CSS-сетка в фреймворке Bootstrap 3 позволяет выполнять вложение одних ячеек в другие. Такое явление называется nesting. К примеру, необходим создать такую HTML-разметку:
Для наглядности примера оставим для элементов только один класс
1
.col-lg-
. Блок с классом
1
primo
имеет три обычные колонки
1
col-lg-4
. Блок с классом
1
secondo
имеет две колонки -
1
col-lg-8
и
1
col-lg-4
. Внутри колонки
1
col-lg-8
размещено еще два блока равной ширины - две колонки с классом
1
col-lg-6
. Это пример вложенности (nesting) одних ячеек CSS-сетки Bootstrap 3 в другие ячейки.
Аналогичная ситуация с блоком класса
1
tetro
, но в нем в оба “первичных” блока вложены еще два блока. Всего получается четыре блока. С блоком класса
1
quattro
все просто - там “обычные” (не вложенные) шесть блоков класса
1
col-lg-2
.
При этом нужно обратить внимание (если еще не догадались), что при вложении одних блоков в другие ширина блока-родителя принимается по умолчанию равной 12-колонкам.
Смещение (offsetting) колонок в Bootstrap 3
В Bootstrap 3 можно смещать колонки вправо с помощью класса
1
.col-*-offset-*
, который добавляет
1
margin-left
для указанной колонки. Смещение производится на ширину колонки, кратную указанному количеству.
Приведу пример, чтобы было наглядно понятно:
В этом примере колонка с классом
1
right
имеет ширину в два столбца и смещается вправо опять таки на два столбца -
1
col-lg-offset-2
. При этом стоит также заметить, что данное смещение будет выполняться только при ширине экрана больше 1200px (breakpoint), на что указывает имя класса -
1
col-lg-
. Если необходимо, чтобы такое смещение сохранялось при меньших размерах окна браузера, необходимо явно указать это в коде:
Адаптивная (responsive) сетка в Bootstrap 3
Переключать ширину сетки с фиксированной на резиновую в Bootstrap 3 можно точно также, как и во 2-й версии. Для этого нужно заменить для блока-контейнера имя класса с
1
container
на
1
container-fluid
:
Заключение
На этом обзор CSS-сетки в фреймворке Bootstrap 3 можно считать законченным. Субъективно для меня был интересен именно этот вопрос. Что касается рассмотрения остальных классов, предназначенных для оформления различных элементов на странице, то мне они кажутся не такими интересныи и важными.
Может быть, в дальнейшем я и вернусь к расмотрению деталей фреймворка Bootstrap 3.
В этой статье будет рассмотрен вопрос установки локального сервера XAMPP под операционной системой Linux Mint 17.
Почему этот локальный сервер и, тем более, почему именно Linux? Ответы просты - для меня лично сервер XAMPP является наиболее интуитивно понятным. А Linux - потому что в ней мне более удобно кодить на HTML&CSS, нежели под Windows.
Хотя бы взять удобный и полноценный терминал Linux, который всегда под рукой. Также, локальный сервер под Linux, по моим субъективным оценкам, работает гораздо быстрее, нежели под Windows.
С преимуществами работы кодера под Linux разобрались - осталось установить и настроить локальный сервер под эту операционную систему. В этом вопросе нет ничего сложного и есть даже локализованная версия инструкции на официальном сайте Apache Friends -FAQ Linux. В этой статье я постараюсь дать более подробное описание этого процесса, с картинками.
Локальный сервер под Linux выполнен в виде пошагового графического инсталлятора наподобие того, как это делается под Windows. С одной стороны это несколько непривычно для Linux; но с другой стороны так можно быстро и легко установить пакет для новичков в этой операционной системе.
Пакет инсталляции XAMPP под Linux Mint
Скачиваем пакет инсталлятора по ссылке Download официального сайта “Apache Friends”. При этом определяемся, под 32 или 64-битную систему необходим пакет - такой и выбираем. Помимо этого есть две версии пакета - стабильный 1.8.2/PHP 5.4.27 и более новый 1.8.3/PHP 5.5.11.
Мною был выбран пакет 1.8.2/PHP 5.4.27 (именно из-за его стабильности) версии 64-бита, под операционную систему Linux Mint 17 “Qiana” Cinnamon 64-bit.
После скачивания пакета открываю директорию “Downloads” (туда попадают все скачиваемые под Linux файлы) в терминале. Команда
1
ls
показывает мне содержимое этой директории - и файл
1
xampp-linux-x64-1.8.2-5-installer.run
в частности.
В этом же терминале делаю этот файл исполняемым:
… затем запускаю файл
1
xampp-linux-x64-1.8.2-5-installer.run
на выполнение командой:
Инсталляция XAMPP под Linux Mint
Запуститься пошаговый графический инсталлятор локального сервера. Пользователи Windows могут почувствовать себя здесь немного в своей стихии. Ниже приведу скриншоты все шагов установки сервера с кратким их описанием, где это необходимо.
Сервер будет установлен в директорию
1
/opt/lampp
:
В этом шаге необходимо убрать галочку в строке “Learn more about Bitnami for XAMPP”:
В этом шаге оставляем галочку в строке “Launch XAMPP”, чтобы локальный сервер автоматически запустился после установки:
Запуск и остановка XAMPP под Linux Mint
Помимо самого локального сервера будет установлено графическое приложение, задача которого - облегчить управление локальным сервером. Это приложение также запуститься автоматически, но его можно при необходимости запустить и вручную командой:
Переходим в этом приложении на вкладку “Manage Servers” и видим список служб локального сервера. Напротив каждой службы в виде лампочки показан ее статус - запущена она (Running) или остановлена (Stopped).
Первоначально запущен только локальный сервер Apache; база данных “MySQL Database” и FTP-сервер “ProFTPD” остановлены. Их можно запустить из данного приложения, просто нажав кнопку “Start”, но я поступлю более Linux-way и воспользуюсь терминалом. Для этого я введу в нем всего одну комадну:
Если все пройдет успешно, то в терминале будет следующий вывод:
… что можно проверить и в приложении:
Остановить локальный сервер можно также из терминала командой:
Установка WordPress под XAMPP в Linux Mint
С установкой локального сервера под Linux Mint разобрались. Стоит еще раз оговориться, что по моим субъективным оценкам он работает гораздо шустрее под Linux, нежели под Windows.
Переходим к заключительной части данной статьи и рассмотрим вопрос установки CMS WordPress под XAMPP в Linux Mint. Все виртуальные сервера располагаются в директории
1
/opt/lampp/htdocs/
.
То есть, если необходимо создать отдельный экземпляр какой-либо CMS (Joomla, WordPress, Drupal и так далее), то нужно просто создать поддиректорию в директории
1
htdocs
и распаковать туда нужную CMS. В моем случае такой CMS будет WordPress-3.9.1.
Создаю поддиректорию
1
travel
командой:
… и распаковываю в нее скачанный архив WordPress с помощью незаменимой консольной программы
1
mc
(не забудьте запустить ее через
1
sudo
, иначе получите ошибку прав доступа):
После распаковки WordPress приступим к его установке. Создадим вручную конфигурационный файл
1
wp-config.php
чтобы избежать ошибки прав доступа при обычной пошаговой инсталляции WordPress (не забываем, что мы находимся под Linux!). Для этого скопируем файл-шаблон
1
wp-config-sample.php
в ту же директорию под именем
1
wp-config.php
:
… и отредактируем его через редактор nano:
Затем в адресной строке браузера введем (XAMPP у нас все еще запущен, не забываем об этом!):
… и в приложении phpMyAdmin создаем базу данных под наш будущий локальный сайт, на котором будет “крутиться” WordPress. Перезапускаем локальный сервер, чтобы он “подхватил” изменения в базе данных MySQL и создание виртульного сервера
1
travel
в директории
1
htdocs
:
В браузере в адресной строке запускаем установку WordPress:
… далее проходим оставшиеся стандартные шаги инсталляции WordPress и получаем готовый локальный сайт - переходим на него по адресу:
На этом установка CMS WordPress под локальный сервер успешно завершена. А также успешно выполнена рассмотренная выше инсталляция локального сервера под операционной системой Linux Mint 17 “Qiana” Cinnamon 64-bit.
Заключение
Итог выполненных выше шагов - возможность иметь всегда “под рукой” готовый к работе локальный сервер. Еще один плюс к удобству кодинга под Linux. А кодинг под Linux субъективно для меня удобнее кодинга под Windows.
Стоит также сказать, что при установке и настройке могут возникнуть проблемы. В частности, автором данной статьи первоначально производилась установка “чистого” LAMPP, которая потом была удалена. И, хотя деинсталляция была произведена правильно, последующая установка XAMPP привела к тому, что данный сервер не запускался на компьютере.
Приступаем к очередной интересной и обширной теме - как с помощью Sass/Compass облегчить себе жизнь при работе с цветами во время верстки.
Каждый верстальщик хорошо знает, как часто ему приходиться при верстке определять и манипулировать цветами в CSS-коде. Препроцессор Sass и его библиотека Compass обладают богатым набором функций, предназначеных для всевозможных операций с цветом в SCSS-коде.
Эта статья посвящена обзору функций Sass и Compass для работы с цветом. Начнем, как обычно, с самой простой функции и будем плавно продвигаться от простого к сложному.
Первоначальная настройка проекта Compass
Для начала создадим пустой проект Compass и настроим его. Инициализируем несколько переменных $color и $color1, которым определим цвет. Эти переменные понадобятся нам в дальнейшем.
Фунции lighten и darken
Начнем с самых простых функций - lighten и darken. Кто маломальски знаком с английским языком, должен сам догадаться о их предназначении. Функция lighten осветляет исходный цвет, а функция darken затемняет его.
Синтаксис функций lighten и darken одинаков. Первым аргументом задается начальное значение цвета - передадим его функции в виде переменной $color. Вторым аргументом является значение в процентах, на которое нужно осветлить или затемнить исходный цвет:
Функции lighten и darken могут использоваться в любом месте SCSS-кода - везде, где применяется цвет. Например, видоизменим показанный выше пример. Применим функции lighten и darken для изменения цвета шрифта, границы и фона:
Функции complement и invert
Переходим к функциям обратного преобразования цвета. Первая функция complement преобразует исходный цвет на прямо противоположный. Допустим, у нас имеется переменная $color c заданным в ней цветом. Передадим эту переменную функции complement в качестве аргумента:
В результате на выходе получим цвет, расположенный на 180 градусов по отношению к исходному цвету. Чтобы было понятнее, посмотрим на “HSLA wheel”:
Исходным цветом у нас является hsla(120,100%,50%,.5). На 180 градусов по отношению к исходному цвету расположен hsla(300,100%,50%,.5), иначе называемый Magenta. Вот его и получаем от функции complement.
Функция invert практичеси аналогична функции complement. Она также производит инвертирование цвета от исходного. Но функция invert отличается от функции complement тем, что с помощью нее производится инвертирование цветов (красного, зеленого, синего), но прозрачность opacity остается неизменной.
Функция adjust-hue
Функция adjust-hue практически аналогична функции complement - она инвертирует исходный цвет. Но в отличие от последней обладает большей гибкостью. Если функция complement возвращает цвет, расположенный точно на 180 градусов от исходного (противоположный), то функция adjust-hue может управлять градусом расположения “выходного цвета.”
Другими словами, можно задать угол, отличный от 180 градусов. Кроме того, значение угла может быть как положительным, так и отрицательным:
Функции saturate и desaturate
В препроцессоре Sass имеется пара функций для управления насыщеностью цвета.
Функция saturate():
… увеличивает насыщенность цвета от исходного.
А функция desaturate():
… наоборот, уменьшает насыщенность цвета от исходного.
Функции transparentize и fade-out
Функция transparentize добавляет к исходному цвету альфа-канал и, тем самым, управляет прозрачностью исходного цвета. Особая прелесть этой функции заключается в том, что даже если исходный цвет не имеет альфа-канала, то на выходе к этому цвету будет добавлен альфа-канал с заданым уровнем прозрачности. То есть, будет выполнено преобразование в формат RGBA.
Значение прозрачности может находиться в диапазоне от 0 (полностью прозрачный) до 1 (полностью непрозрачный):
Функция fade-out аналогична функции transparentize:
Функции opacify и fade-in
Функции opacify и fade-in являются прямой противоположностью функций transparentize и fade-out. В помощью этих функций цвет делается менее прозрачным:
Функция grayscale
Функция преобразования исходного цвета в оттенки серого чрезвычайно проста в использовании. В принципе, тут и рассказывать особенно нечего:
Функция rgba
Если стоит задача преобразования исходного цвета (заданного в виде переменной, в формате HEX или HSLA) в формат RGBA, в этом случае на помощь придет функция rgba. При этом к выходному цвету добавляется альфа-канал для задания прозрачности цвета:
С практической точки зрения функция rgba равносильна функции transparentize/fade-out или opacify/fade-in.
Функция mix
В препроцессоре Sass имеется функция смешивания цветов для получения на выходе одного, результирующего цвета. Другими словами, у нас имеются два цвета, представленные переменными $color и $color1. C помощью функции mix можно смешать эти два цвета в определенной пропорции, чтобы получить на выходе один результирующий цвет.
В показанном выше примере у функции mix имеются два аргумента в виде переменных (два цвета). Последний третий аргумент в виде процентов задает пропорцию, в которой один цвет будет смешан с другим. В нашем случае цвет $color смешан с цветом $color1 в пропорции - 70% от первого цвета $color добавляется ко второму цвету $color1.
Функция adjust-color
Вот мы и подошли к более сложным функциям препроцессора Sass. Первой из таких функций является adjust-color, c помощью которой можно управлять любым значением цвета - красным, зеленым, синим (для цветовой модели RGB) или же цветом, насыщеностью и светлотой (для цветовой модели HSL). Функции adjust-color также доступно управление альфа-каналом (прозрачностью) цвета.
Функция adjust-color достаточно сложная, но с помощью нее можно управлять практически всем, что относится к цвету в SCSS-коде. Давайте последовательно разберемся во всех ее возможностях.
Каждому цвету в этой функции соответствует одноименный аргумент:
$red, $green, $blue - значения красного, зеленого и синего цветов в диапазоне от 0 до 255;
$hue - значение от 0 до 359 градусов, обозначающих цвет на HSL-диаграме; значение может быть как положительным, так и отрицательным;
$saturation, $lightness - значения насыщенности и светлоты для цветовой модели HSL; находятся в диапазоне от 0 до 100%; могут быть отрицательными или положительными;
$alpha - значение альфа-канала в диапазоне от 0 до 1.
Хватит теории, давайте рассмотрим работу функции adjust-color на примерах.
Изменение цвета от исходного $color для цветовой модели HSLA. Первым аргументом передается цвет в виде переменной $color; вторым аргументом задается изменение цвета через переменную $hue:
Изменение цвета и светлоты одновременно. Первым аргументом $color задается исходный цвет, вторым аргументом устанавливается цвет $hue, третьим аргументом задается изменение светлоты $lightness:
Изменение двух каналов цвета одновременно для цветовой модели RGB. Функции adjust-color передаются три аргумента: исходный цвет $color, канал красного цвета $red, канал зеленого цвета $green:
Смешивание аргументов цветовых моделей RGB и HSL в функции adjust-color. Передадим функции adjust-color аргументы исходного цвета $color, аргумент красного канала $red модели RGB и аргумент $hue модели HSL:
В результате компиляции данного кода в CSS получим такую ошибку:
… которая говорит о том, что в функции adjust-color недопустимо смешивание аргументов разных цветовых моделей - RGB и HSL.
Поэтому нужно быть внимательным при работе с функцией adjust-color и не допускать одновременной передачи функции аргументов разных цветовых моделей RGB и HSL.
Функция scale-color
Рассмотренная выше функция adjust-color производила изменение цвета на основе занчений передаваемых ей аргументов. Функция scale-color работает несколько иначе - она изменяет цвет на основе исходного цвета. Чтобы было сразу понятно, о чем идет речь, давайте рассмотрим несколько примеров:
В данном примере функция adjust-color берет за основу цвет в переменной $color и делает его светлее на фиксированные 20%. Функция scale-color, c другой стороны, поступает несколько иначе. Ею строиться шкала светлоты от 1 до 100%, в которой 1 соответствует светлоте цвета, заданной в переменной $color. Значение 100% соответствует полной прозрачности. И на основе этой шкалы функция scale-color вычисляет светлоту в 20%.
Неудивительно, что в показанном выше примере результат функции scale-color оказался светлее, чем результат функции adjust-color.
Функции shade и tint
Фреймворк Сompass также, как и препроцессор Sass, имеет в своем составе некоторое количество функций для работы с цветом. Наиболее интересными среди них могу показаться две функции - shade и tint.
Функция shade выполняет смешивание заданного цвета с черным цветом в указанной пропорции. Пропорция указывется в процентах от черного цвета:
Функция tint, напротив, выполняет смешивание исходного цвета с белым цветом в заданном соотношении. Код ниже создаст цвет на основе смешения цвета в переменной $color и 30% белого цвета:
Заключение
На этом обзор “цветовых” функций препроцессора Sass и библиотеки Compass можно считать завершенным. В качестве вывода можно сказать, что благодаря подобным функциям упрощается и убыстряется работа при верстке дизайна сайта.
Более того, с помощью данных функций, имея в качестве входного значения всего один цвет, можно создать отличный дизайн в профессиональной цветовой палитре. И не прибегнуть ни к одному из графических инструментов.
Помимо использования рассмотренных выше цветовых функций каждой по отдельности, можно комбинировать их в одном выражении, создавая достаточно сложные конструкции.
Данная статья является вольным переводом главы “Manipulate Color with Ease” замечательной книги “Sass and Compass for Designers” автора Ben Frain.