суббота, 29 ноября 2014 г.

Блокнот·два·плюса — форэва!

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

Как–то незаметно мои усилия по реорганизации инфраструктуры для разработки сайта (вернее, его переделки) во второй раз посягнули на святая святых разработчика — его редактор кодов. Напомню невнимательному читателю моего дневника, что однажды я уже перешёл с Homesite на Notepad++, а тут ещё раз шайтан взялся меня попутать — подсунул чудо современной программерско–компьютерной мысли, редактор Sublime Text. Грешен: повёлся! Ну, кто, скажите на милость, в здравом уме и при твёрдой памяти откажется от чуда чудного и дива дивного?

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

В конечном итоге, результаты заочного знакомства с новым редактором выглядели весьма оптимистично и привлекательно: и работает он шустрее, и интерфейс приятнее, и всяких приблуд для него видимо–невидимо… Весьма убедительны были традиционные пользователи Notepad++, которые стройными рядами, практически в едином порыве, с пламенным взором и песня́ми переходили под новые знамёна. Несколько настораживали встречавшиеся в Сети рекомендации о том, как изменить этот прекрасный редактор, чтобы он был похож на Notepad++.

И сегодня я, наконец–то, созрел: решил установить и попробовать — уж слишком много было хвалебных отзывов и практически отсутствовали весомые аргументы против (самым весомым являлась бесплатность Блокнота против «условнобесплатности» Сублима). Итак, установил, попробовал и …снёс, то есть, удалил. Фуфло!

Вообще–то, на этом можно было бы статью и закончить, но я решил, всё–таки, аргументировать свою позицию. Для начала повторю уже упоминавшийся аргумент: NPP (Notepad++) бесплатен, а ST (Sublime Text) пока условно бесплатен (лицензия стоит $70) — ключевой слово в этой фразе «пока», потому что никто не знает, когда разработчик включит обязательность приобретения лицензии, то есть, у пользователя возникнет необходимость поиска «таблэтки».

Кроссплатформенность ST, которую его апологеты выдвигают в качестве основного и весьма существенного преимущества, для меня неактуальна, а вот богатый инструментарий NPP для работы с различными кодировками кириллицы — весьма и весьма ценная фича. В ST я вообще не нашёл управления кодировками: наверное, потому, что редактор заточен под англоязычного пользователя, которому совершенно незачем заморачиваться со всякими там KOI–CP1251 и их многочисленными братьями–сёстрами. Я уж не говорю о том, что интерфейс редактора исключительно английский, и хотя у меня не возникает в этой связи языковой проблемы, русскоязычный NPP сердцу милее.

И хотя, как утверждают пользователи ST, уже наработана чёртова прорва плагинов под новый редактор, расширений для NPP всё равно больше. Я вполне допускаю, что моё поверхностное личное знакомство с SP оказалось уж слишком поверхностным, но у меня внезапно пропало желание углубляться, а я привык доверять своей интуиции, тем более, что был изначально настроен почти позитивно к SP.

Правильно настроенный NPP может творить чудеса: макросы, расширения (один только Emmet, a.k.a ZenCoding чего стоит), с подсветкой синтаксиса, перекодировкой. Я, кстати, добавил «раскраску» синтаксиса для SCSS, HTML5 и CSS3, а также скрипт для компиляции SCSS в CSS прямо из NPP (без плагина jN скрипт не работает). Я уж не говорю о разнообразных «стандартных» плагинах (тех, которые устанавливаются через Plugin Manager), щедрой рукой добавляющих Блокноту·два·плюса разнообразные полезности и «вкусности»

В общем, снова здравствуй, Блокнот! Я вернулся.

понедельник, 17 ноября 2014 г.

Исправление весенней ошибки

Авторство в создании концепции «отвечающего» веб–дизайна (responsive web design, RWD) приписывается американскому дизайнеру из Бостона Итану Маркотту, хотя за шесть лет до опубликования его статьи на эту тему, другой дизайнер–разработчик, Камерон Адамс, выдвинул общую идею динамической адаптации представления веб–сайта на различных устройствах: смартфонах, планшетах, ноутбуках и офисных компьютерах.

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

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

Другими словами, решил сделать «работу над ошибками». В качестве резинки–ластика для стирания этих ошибок и карандаша, способного красивым почерком вписать в историю моего сайта правильные современные «слова», связав их в логически верные «предложения», которые, в конечном итоге, сложатся в интересный, увлекательный «роман» призван вызвать набор CSS/Javascript Bootstrap, недавно приобретённый вместе с пакетом HTML5 Bootstrap.

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

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

Для устройств с несколько бо́льшим разрешением (больше 768, но меньше 992 пикселей) — раскладка с двумя колонками для контента и дополнительной информации, «обрамлёнными» сверху и снизу блоками меню и вспомогательной информации (рисунок слева внизу). А для больших и очень больших разрешений — всего, что больше 992 пикселей в ширину, — ранее описанное трёхколоночное представление (для наглядности я повторил этот рисунок справа внизу).

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

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

  • .col-xs- (eXtra Small) — колонка (столбец) для самого малого разрешения (меньше 768px);
  • .col-sm- (SMmall) — колонка для малого разрешения (от 768 до 992px в ширину);
  • .col-md- (MeDium) — колонка для среднего разрешения (между 992 и 1200px);
  • .col-lg- (LarGe) — колонка для большого разрешения (больше 1200px).

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

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

А теперь, прочувствуйте простоту и удобство вёрстки страницы с помощью сетки и Bootstrap: для самого маленького разрешения, которому соответствует группа классов .col-xs-, блок меню–навигации (жёлто–оранжевого цвета) будет «награждён» классом .col-xs-4 («простирается» на четыре полосы сетки), блок основного контента (зелёного цвета) и вспомогательной информации (лилового цвета) — .col-xs-12 (ширина всех 12 полос), а второй блок дополнительной информации — .col-xs-4.

Макет для планшетов и нетбуков (если такие ещё существуют) строка меню и левый блок дополнительной информации наделяются классом .col-sm-12 (занимают всю ширину экрана), блок основного контента — .col-sm-8 и правый блок вспомогательной информации — .col-sm-6.

По такому же принципу, — решительно и деловито, — назначаются классы для среднего разрешения: .col-md-6 — для блока основного контента и .col-md-3 — для всех остальных. Группу классов .col-lg- решил вообще не трогать: с экранами больших разрешений успешно справится «средняя» группа (.col-md-).

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

Первый порыв применения Bootstrap на практике, можно сказать, «проба пера» вылилась в такую конструкцию (интересно, как она себя поведёт в жизни, то есть, на сайте?):

<div class="container"> 
 <div class="row"> 
  <div class="col-sm-12 col-md-3 hidden-xs">
   <!-- на смартфонах меню спрятано и вызывается принудительно, по нажатию пиктограммы (механизм вызова меню здесь не рассматривается) -->
   <h2>Меню</h2>
   <p>(жёлто-оранжевый блок)</p>
   <div class="hidden-sm">
    <!-- ... а блок дополнительной информации отображается в другом месте и на смартфонах, и на планшетах (см. ниже) -->
    <h2>Доп.информация левой колонки</h2>
    <p>(лиловый блок)</p>
   </div>
  </div>
  <div class="col-xs-12 col-sm-8 col-md-6">
   <h2>Контент</h2>
   <p>(зелёный блок)</p>
  </div>
  <div class="col-xs-4 col-sm-4 col-md-3 hidden-xs">
   <!-- на смартфонах правая колонка спрятана и вызывается принудительно, по нажатию пиктограммы (механизм вызова блока здесь не рассматривается) -->
   <h2>Правая колонка</h2>
   <p>(синий блок)</p>
  </div>
 </div>
 <div class="row"> 
  <div class="col-xs-12 hidden-md hidden-lg">
   <!-- дополнительная информация из левой колонки на смартфонах и планшетах выводится под блоком с основным содержанием -->
   <h2>Доп.информация левой колонки</h2>
   <p>(лиловый блок)</p>
  </div>
 </div>
</div>

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

суббота, 15 ноября 2014 г.

Не изобретая велосипед…

Обновлять, так обновлять! Следуя этому девизу ещё семь месяцев тому назад я решили максимально кардинально подойти к модернизации сайта. Именно по этой причине совершались «шаманские пляски» вокруг базы данных по весне, а сейчас настала пора принципиально–кардинальных изменений всей веб–среды моего сайта.

Поскольку негоже «в наш век прогресса и прогрессивки» продолжать передвигаться на конной тяге, предстоит мне перебираться со старого доброго

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
на новый, но, похоже, тоже добрый
<!DOCTYPE html>
то есть, вливаться в стройные ряды приверженцев наиболее современного стандарта разметки html5.

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

Как всегда, мир оказался не без добрых людей, и эти самые добрые люди собрали воедино несколько независимых техник и подходов, которые позволяют разработчику не задумываться над проблемой совместимости. То есть, я создаю сайт по стандарту html5, а упомянутая разработка добрых людей гарантированно обеспечивает правильное отображение этого сайта в любом (ну, практически любом) браузере — даже старом, выпущенном до принятия html5, даже новом, но с коряво реализованной поддержкой нового стандарта.

Имя этой волшебной «приблуды» — HTML5 Boilerplate (переводится, примерно, как «заготовка для HTML5», но я бы назвал её «HTML5–костыли» — точнее отражает суть пакета). На момент публикации статьи доступна версия 4.3.0 и именно к её разворачиванию и приступаю. До этого я пару дней потратил на изучение предыстории возникновения и совершенствования набора, но для практического использования эта информация ценности не представляет, а наиболее любознательные могут воспользоваться поисковыми системами, чтобы повторить мои изыскания.

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

При входе на упомянутый ресурс, вы получаете возможность псевдовыбора: то ли вы возьмёте классический набор HTML5Boilerplate (серая кнопка), то ли классический пакет с довеском из html–шаблона, сработанного на принципе «отзывчивого» веб–дизайна (красная кнопка), то ли стандартный пакет с твиттеровским набором Bootstrap для создания собственных «отзывчивых» шаблонов (синяя кнопка).

Почему псевдовыбор? Потому, что нажимая на любую из трёх кнопок, соискатель нужного пакета переходит к единому экрану тонких настроек (Fine tuning) компонентов, составляющих пакет:

В первой колонке (HTML/CSS Template), собственно, и выбирается вариант, обозначенный тремя кнопками предварительной конфигурации (предыдущее изображение): классический пакет (только HTML5 Boilerplate), классический пакет с готовым «отзывчивым» шаблоном (Mobile-first Responsive) и классический пакет с набором Bootstrap (Twitter Bootstrap).

Вторая колонка (HTML5 Polyfills) позволяет выбрать между компонентами HTML5Shiv (исправляет ошибки реализации HTML5 в Internet Explorer) и Modernizr (CSS и JS расширенной функциональности, включая возможность HTML5Shiv). Третья позиция колонки может включить в общий пакет скрипт response.js, который позволяет решить проблемы старых мобильных устройств, не поддерживающих медийные запросы в CSS (Media Queries). Впрочем использование этого скрипта имеет некоторые скрытые недостатки, но альтернативой является

В третьей колонке можно выбрать вариант библиотеки jQuery — сжатый (Minified) и/или полный (Development). Традиционно рекомендуется использовать последнюю версию jQuery из сетевого репозитория, и эта рекомендация реализована разработчиками HTML5 Boilerplate, но, тем не менее, в пакет включается скрипт с библиотекой, главным образом, на случай каких–либо проблем с доступом к сетевому репозитарию. Вместе с тем, в другом разделе документации рекомендуется использовать только локальную копию: дескать, прилагаемая версия не вызывает конфликтов со скриптами (неизвестно, как поведёт себя более новая версия) и в ней предусмотрено более длительное кэширование.

Последний раздел — «подвал» формы тонких настроек, H5BP Optional — содержит несколько очевидных, не очень очевидных и, на неподготовленный взгляд, совершенно неочевидные дополнения: часть из них включены несколькими строками в базовый шаблон (как, например, классы для IE или блок для Google Analytics), а другие — в виде дополнительных файлов (например, plugins.js, robots.txt или .htaccess).

Для себя я выбрал такой пакет:

  • из опций «HTML/CSS Template» — набор стилей Bootstrap (тесноваты оказались для меня границы одного шаблона Mobile–first);
  • из вариантов «HTML5 Polyfills» — скрипты Modernizr и Respond;
  • «упакованный» вариант jQuery;
  • и всё из «H5BP Optional» (потом буду разбираться, что там лишнее).

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

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="css/bootstrap.min.css">
        <style>
            body {
                padding-top: 50px;
                padding-bottom: 20px;
            }
        </style>
        <link rel="stylesheet" href="css/main.css">

        <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">Вы используете <strong>устаревший</strong> браузер. Пожалуйста, <a href="http://browsehappy.com/" rel="nofollow noindex">обновите свой браузер</a> чтобы улучшить отображение страниц.</p>
        <![endif]-->
        
        

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.1.min.js"><\/script>')</script>

        <script src="js/vendor/bootstrap.min.js"></script>

        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>

        <!-- Google Analytics: замените UA-XXXXX-X на свой идентификатор сайта. -->
        <script>
            (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
            function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
            e=o.createElement(i);r=o.getElementsByTagName(i)[0];
            e.src='//www.google-analytics.com/analytics.js';
            r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
            ga('create','UA-XXXXX-X');ga('send','pageview');
        </script>
    </body>
</html>

Вот, отсюда теперь и предстоит плясать–танцевать.