Показаны сообщения с ярлыком css. Показать все сообщения
Показаны сообщения с ярлыком css. Показать все сообщения

четверг, 4 декабря 2014 г.

Рубиновый механизм

Мало что изменилось за последние несколько столетий в отношении островного государства 日本国 (иероглифы означают «Солнце, начало, страна», то есть, «Страна восходящего Солнца»): как было окутано загадками, тайнами и мистикой «Опоньское царство», так и остаётся по сей день почти эквивалентом Беловодья, Шамбалы, Агартхи и не исключено, что бел–горюч камень Алатырь всё ещё находится там — «на море–окияне, на острое Буяне».

Вспоминается фрагмент телепередачи про трёх японских чудо–мастеров: один умеет филигранно затачивать резец здоровенного рубанка, второй с помощью этого рубанка может снять с деревянного бруса невероятно тонкую стружку, которую не отличить от листа бумаги, а третий — широкими размашистыми мазками пишет на этой деревяшке–бумажке наполненные глубоким содержанием иероглифы. Не удивительно, что получившийся продукт вызывает у японцев, ценителей прекрасного, умопомрачительные восторги, но удивительно, что «точильщик», «стругальщик» и «писарь» пользуются всенародными славой и почтением. Нам это сложно понять: воистину, «Восток — дело тонкое», ведь у нас Левши обычно умирают в безвестности и нищете.

А ещё вспомнились «путевые заметки» нашего соотечественника, длительное время прожившего и проработавшего в Японии: он рассказывал о том, что электронная промышленность страны выпускает много уникальных гаджетов, о которых в других странах даже не имеют ни малейшего представления, поскольку эти устройства производятся только для внутреннего потребления.

В общем, Япония так и продолжает оставаться «вещью в себе».

К чему этот географически–исторический экскурс? Дело в том, что в конце предыдущего века, в 1995 году, японский разработчик программного обеспечения опубликовал созданный им язык программирования Ruby, призванный, по замыслу автора, устранить недостатки Perl'а при помощи использования сильных сторон нескольких языков программирования. Свой, более «крепкий» язык Ю.Мацумото назвал «Рубином» (именно так переводится с английского слово ruby), очевидно в противовес «Жемчугу» (английское слово perl читается точно так же, как и pearl — жемчуг). То есть, с намёком на несравненно бо́льшую ценность.

Не исключено, что новый «рубиновый» язык изначально тоже предназначался для «внутреннего потребления» — его описание на английском языке появилось только спустя два года. Но с 1997 года начинается распространение Ruby по планете: был отмечен некоторый начальный всплеск интереса, но невероятной популярности, соответствующей «драгоценному» названию, он не приобрёл, хотя и занял свою нишу рядом с PHP, Python, Java и уже упоминавшимся Perl.

Пока в мои планы не входит переводить свой сайт «Заливная рыба» на Ruby — меня вполне устраивает старый добрый PHP, как бы ни исходили ненавистью к этому языку злопыхатели, — но эта статья возникла по другой необходимости: очень уж мне приглянулась система SASS/SCSS, а реализована она именно на Ruby.

Беглое ознакомление со «стилистически классными таблицами стилей» — так переводится с английского название системы, образующей аббревиатуру SASS — повергло меня в печаль великую: как же я раньше жил без этого «рубинового» механизма? Как можно по–старому верстать сайт, если в CSS–файла можно, оказывается, использовать переменные, вложенность, наследования, функции, подмешивания!

Я ни в коем случае не собираюсь разворачивать на страницах своего блога курсы работы с Ruby или SASS/SCSS: я сам только начинаю осваивать новые возможности по созданию таблиц стилей, а до изучения «Рубина» дело вообще может не дойти. В любом случае, в Сети есть прорва ресурсов, способных рассказать, показать, научить и первому, и второму. А также, третьему и четвёртому: эти самые «третий» и «четвёртый» — фреймворк Compass и система Scout — очень кстати обнаружились в процессе пятидневного разбирательства в ситуации (начитался я до одури всяких публикаций и про «рубин» и «рубинозависимые» приложения, а потом ещё дня три отходил от обилия информации и переваривал её).

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

Ещё более полезным оказался пакет Scout (мне досталась версия 0.7.1 для Windows) «3–in–1», как дерзко и цинично претендующая на звание кофе бурда MacCoffee. Вернее, я получил даже «четыре в одном»: и Ruby, и SASS/SCSS, и Compass и графическая оболочка (честно говоря, GUI можно назвать таковым весьма условно). Более того, всё моё новое достояние даже отдалённо не напоминает MacCoffee.

Установка пакета не занимает много времени и, в принципе, не может составлять какой–либо трудности: запускаешь ScoutAppInstaller-0.7.1.exe и отвечаешь на вопросы оконных диалогов (в какую папку ставить, куда выкладывать иконки и т.п.). В конечном итоге, пользователь получает возможность лицезреть серенькое окошко с заголовком «Scout» в левом верхнем углу и кнопкой со значком «+» в левом нижнем углу (см. скриншот внизу слева). Поскольку никаких иных элементов не наблюдается, шаловливые ручонки, практически без вмешательства головного и спинного мозгов нажимают кнопочку с плюсиком, что приводит к появлению диалога для выбора каталога, в котором размещён проект (см. скриншот справа внизу).

Искушённый читатель, наверное, уже догадался, что мой проект, базирующийся на домене «zaliv.info», располагается в папке с неожиданным именем Zaliv. После этого «Скауту» явно полегчало: он начал деловито собирать сведения о месте, где будут скрываться исходные SCSS–файлы (Input Folder) и куда потом нужно будет складывать результаты обработки «сырья», прошедшего горнило Compass и SASS (Output Folder — оба поля находятся в разделе Stylesheet Directories, см. скриншот внизу). Можно было указать и «Другие каталоги» (Other Directories), то есть, адреса папок, в которых расположены скрипты (Javascripts Folder), изображения (Imagess Folder), — говорят, что Scout с Compass'ом умеют «паковать» не только CSS, — но у меня насчёт всего остального (скрипты, изображения, страницы) были другие планы. Что касается файла конфигурации (Config File), то речь идёт, скорее всего, о тонких настройках работы системы: можно поиграться с различными параметрами, уходящими своими корнями в «рубиновый механизм», но я отложил эти эксперименты «на потом» (а может и «на никогда»).

Есть ещё два блока настроек: один связан с режимом вывода (Output Mode), а второй — с управлнием проектом (Manage Project). Сразу необходимо отметить, что управление проектом в Скауте оформлено очень незатейливо и сводится к его (проекта) удалению: рядом с лейбой «Удалить проект» (Remove Project) располагается кнопка удаления Remove. А вот режимы вывода предлагают выбор: то ли разработчик находится в процессе разработки (Environment:Devolopment в выпадающем списке), то ли формирует окончательный продукт для публикации (Environment:Production), то ли выходные файлы нужны во вложенном виде (Output Style::Nested), то ли развёрнутом (Output Style::Expanded), то ли компактном (Output Style::Compact), то ли сжатом (Output Style::Compressed). Вообще–то, разбираться в некоторых аспектах Скаута довольно непросто: пакет, практически недокументирован и пребывает в непонятном состоянии — ни альфа, ни бета, не говоря уже о пре-релизе. Да, и документация Компаса, хоть и подробна, но коряво организована, то есть, оставляет желать лучшего.

По некоторым косвенным данным можно предположить, что режим конечного продукта (Environment:Production) проводит какие–то более глубокие, трудоёмкие и длительные операции с исходными файлами. Режимы упаковки и сжатия (Output Style::Compact и Output Style::Compressed) удаляют из конечных файлов ненужности и красивости (например, комментарии, форматирующие пробелы и табуляции), что обеспечивает уменьшение размера CSS–файла и, соответственно, время на его загрузку.

«Шаловливые ручонки, нет покоя мне от вас!» Ну, как же утерпеть от проверки работоспособности установленной софтины?! Конечно же, наваял я простенький SCSS–файлик в своём прекрасном Блокноте и сохранил его в папку исходников (Input Folder) как test.scss:

@import "compass/css3"; 
@import "compass/support";

$color : green; 

.panella {
 background-color: $color;
 @include border-radius(25px);
}

Затем я запустил режим обработки SCSS–файла (при помощи кнопки Play в слоте моего проекта на левой панели). Как нетрудно заметить, графическая оболочка в этом месте «сдулась» и на глазах у изумлённой публики появилось традиционное окно для отображения командной строки (вот что я имел ввиду когда писа́л об «условном GUI»). При этом кнопка Play превратилась в кнопку Stop, то есть, Scout заступил на дежурство по наблюдению за изменениями в папке исходящих файлов, а на консоль выведено сообщение о замеченном изменении файла test.scss и его компиляции в файл test.css (на скриншоте внизу — верхние две строчки белым шрифтом на чёрном фоне). Любые попытки внести изменения в файл test.scss (например, удаление пробела) после его пересохранения немедленно обрабатывались системой с перезаписью файла test.css.

А вот так выглядит содержимое файла test.css:

/* line 6, scss/test.scss */
.panella {
  background-color: green;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
  border-radius: 25px;
}

Как говорится, насладитесь результатом.

По ходу дела вскочила ещё одна заковыка: любовно настроенный под мои предпочтения Notepad++ взял за моду грубо «ругаться» при каждом сохранении SCSS–файла. Дело в том, что предвкушая дружную и слаженную работу с SASS/SCSS я добавил в плагин jN скрипт Sass-Auto-Compile.js, призванный дело то же самое, что и Scout (тогда ещё Скаут даже не маячил на горизонте). Оказалось, что скрипту для правильной работы необходимо знать путь к интерпретатору Ruby, а в установленном пакете Scout интерпретатор не обнаружен. Перемещение проблемного скрипта в папку disabled проблему ликвидировало (Блокно перестал выбрасывать возмущённые сообщения), но «неприятный осадок остался»: что же я такое установил?

Внимательное исследование лога установки пакета Scout показало, что дополнительно была установлена только среда выполнения Adoba AIR, а вместо Ruby был установлен его Java–клон jruby-complete.jar, и при запуске Scout система вызывает интерпретатор Java.

понедельник, 14 апреля 2014 г.

Битва слоёв с таблицами

Четыре года тому назад уже полным ходом шли кровопролитные бои между сторонниками компоновки страниц сайта, с одной стороны, при помощи таблиц и с использованием слоёв (div'ов) с другой. Моя личная двадцатилетняя история работы с реляционными базами данных и, следовательно, таблицами совершенно предсказуемо и очевидно определила мой выбор в пользу табличной вёрстки. Последующая практика разработки сайтов хоть и внесла некоторые коррективы в концептуальное отношение к слоям, но пламенной любви к ним так и не привила — ну, не чувствую я div'ы так, как чувствую таблицы.

Вместе с тем, создание сложной структуры страницы исключительно «на таблицах» может ввести в ступор даже опытного «табличника» — одно время в Сети ходили леденящие душу истории о сайтах, свёрстанных из четырёх десятков вложенных друг в друга таблиц. Впрочем, не менее страшные ужастики рассказывали и о многократно вложенных слоях, но это не лишало впечатлительных разработчиков сна и не заставляло их пугливо вздрагивать от случайных шорохов в ночной тиши: сегодня полтора десятка вложенных слоёв — нормальное явления, например, для шаблонов Blogger'а.

Жизненный опыт неустанно твердит: никакая крайность не может быть наилучшим решением. Справедливости ради должен заметить, что я никогда не был фанатом–ультрас таблиц, хоть ощущаю определённую духовную близость с ними с ними, а к слоям испытываю некоторую отчуждённость. Тем не менее, провозглашаю приверженность разумной середине (ну, или почти середине) в их применении на практике.

Такая «условная середина» определяется практической необходимостью и целесообразностью: например, неоспоримо лидерство слоёв при устройстве различных эффектов (скажем, полупрозрачных локальных затененеий), всплывающих, разворачивающихся и появляющихся окон. Зато, что касается структурирования какой–либо регулярной информации (в случае с моим сайтом это, например, галерея фотографий с пространными комментариями–описаниями), то разумной альтернативы таблицам вообще не существует (и не надо со мной спорить — всё равно не переубедите!).

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

[...]
[...]

суббота, 12 апреля 2014 г.

Подключение скриптов и стилей

Не так, чтобы это было крайне необходимо, но неуёмная тяга к прекрасному заставила меня сотворить некоторые усовершенствования и без того очень гибкой блог–платформы Blogger от Google, где мы сейчас, собственно, и присутствуем. Дело в том, что по ходу повествования о своём тернистом пути к возрождению незаслуженно заброшенного сайта, мне предстоит публиковать какие–то фрагменты скриптов и стилей, и хотелось бы делать это так, чтобы это радовало глаз почтенного читателя.

С помощью всё того же Гугла разыскал я JQuery–библиотеку под названием плагин JQuery Sintax Highlight для «красивизации» кодов, написанных на различных языках программирования (мне могут потребоваться Javascript, CSS, PHP и SQL).

Но вот незадача: установочный пакет этого плагина (и, кстати, многих других) требуется скопировать на сервер, на котором размещён сайт, однако, для моего случая (сайтом является блог на Blogger) возможность загрузки файлов скриптов и таблиц стилей Гуглом не предусмотрена. Тем не менее, решение нашлось.

Среди услуг, предоставляемых Гуглом имеется сервис для размещения и хранения документов — облачное хранилище Google Drive. Если у вас есть аккаунт на Google (например, почта), значит у вас есть и Google Drive.

Запустить этот сервис можно нажав на квадратик из точек в правом верхнем углу панели Google (см. скриншот вверху) и выбрав из выпадающего окна иконку «Диск» После этого можно создать папку для своих скриптов (у меня это папка jquery) — именно для этого и существует красная кнопка «Создать», перейти в созданную папку и, нажав на меньшую безымянную красную кнопку (со стрелкой вверх), примыкающую к кнопке «Создать», загрузить требуемые файлы (в рассматриваемом случае это файл скрипта jquery.highlight.js и сопровождающий его файл стилей jquery.highlight.css, заранее взятые из репозитария).

Следующий этап — «разблокирование» файлов для всеобщего доступа: по умолчанию, при загрузке доступ к файлу имеет только его владелец. На скриншоте вверху для файла установлен наивысший уровень доступа: «Общедоступно в Интернете» (любые другие варианты у моего блога вызывали острое неприятие и скрипт просто не загружался на страницу). Кстати, если вы создаёте отдельную папку для своих скриптов (как моя jquery) и на неё устанавливаете требуемый доступа, то все загружаемые в эту папку файлы тоже будут «общедоступны в Интернете» (нужно будет только подтвердить это в диалоговом окне после загрузки).

Очень важный этап — переделка адреса ссылки на загруженные файлы. Гугл генерирует ссылку примерно такого вида (находится в поле «Совместный доступ»):

https://drive.google.com/file/d/0D-SchqSURoSlR2Mk0Vm12GJSWcy/edit?usp=sharing

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

https://googledrive.com/host/0D-SchqSURoSlR2Mk0Vm12GJSWcy

На этом упражнения с Google Drive можно было считать законченными и переходить к водным процедурам, но остался совсем небольшой этап: вставить в шаблон блога ссылки на загруженные файлы (ведь ради этого и затевался весь сыр–бор).

Первым делом, выберите в боковом меню вашего блога позицию «Шаблон». После этого очень многие начинающие (а зачастую и продолжающие) блогеры сразу же, смело и решительно заходят в святая святых, нажимая на кнопку «Изменить HTML». Наш путь, по большому счёту, лежит туда же, но сначала предпримем простой и необременительный шаг для обеспечения собственной безопасности — нужно сделать резервную копию шаблона, для чего и предусмотрена кнопка «Резервное копирование и восстановление» на той же странице.

Последуйте мудрому совету разработчиков платформы Blogger — «загрузите шаблон полностью», как предлагает надпись на кнопке диалогового окна и, если вдруг какие–нибудь ваши камлания над блогом приведут к фатальному перекосу в его работоспособности, вам не придётся в отчаянии рвать на себе пучками волосы, стеная от душевной боли по невосполнимой утрате и физической боли, неизбежно сопровождающей столь варварский способ эпиляции.

Теперь, если вы сохранили шаблон вашего блога, можно заходить в режим «Изменить HTML» и вставить в любое место шаблона между тегами <head> и </head> строки, сконструированные вами на предыдущем этапе, следя за тем, чтобы они не попали внутрь тела какого–либо условного выражения (я это делаю сразу после <title> и </title>):

<title><data:blog.pageTitle/></title>
<script language='JavaScript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'/>
    
<!-- jquery.highlight.js и jquery.highlight.css -->
<script language='JavaScript' src='http://googledrive.com/host/0B-SczaUpoUUY5SlkhqVm12GJS2g'/>
<link type="text/css" rel="stylesheet" media="all" href="http://googledrive.com/host/0B-SchqVm12GJT2pYaUtJd2UydlU" /> 

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

  • подключить библиотеку jquery.js (или её уплотнённый вариант jquery.min.js — строка №2 в верхней врезке кода),
  • вставить туда же (между тегами <head> и </head>) ещё один фрагмент кода:
<script language='JavaScript'>
 $(document).ready(function(){
  $('pre.code').highlight({source:1, zebra:1, indent:'space', list:'ol',attribute: 'data-language'});
 });
</script>

Теперь осталось поместить код между тегами <pre class="code"> и </pre> — обязательно нужно указать имя класса и можно указать название языка, который находится в контейнере (допускаются варианты html, js, php, css и sql):

<pre class="code" lang="html"> <p>Привет, мир!</p> </pre>

Как наверняка уже догадался мой проницательный читатель, все примеры отображены уже с помощью плагина подсветки синтаксиса JQuery Sintax Highlight, то есть поставленная в начале статьи задача выполнена. Но в заключение должен сделать несколько замечаний. Во–первых, в первом контейнере указаны произвольные идентификаторы на файлы скрипта и таблицы стилей: вам нужно будет сформировать и свои собственные на Google Drive, поскольку эти — не рабочие.

Во–вторых, перед вставкой в контейнер HTML–кода необходимо предварительно преобразовать символы < и > в HTML–тегах на &lt; и &gt;, соответственно. Для этих целей удобно использовать онлайн перекодировщики, например, этот. В–третьих, кол, приведенный во втором контейнере ($(document).ready(function()…) тоже можно поместить в отдельный файл, загрузить этот файл на Google Drive, сформировать ссылку по изложенному в этой статье алгоритму и включить в заголовок документа в виде <script language='JavaScript' src='http://googledrive.com/host/[идентификатор файла]'/>.