Обновлять, так обновлять! Следуя этому девизу ещё семь месяцев тому назад я решили максимально кардинально подойти к модернизации сайта. Именно по этой причине совершались «шаманские пляски» вокруг базы данных по весне, а сейчас настала пора принципиально–кардинальных изменений всей веб–среды моего сайта.
Поскольку негоже «в наш век прогресса и прогрессивки» продолжать передвигаться на конной тяге, предстоит мне перебираться со старого доброго
<!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>
Вот, отсюда теперь и предстоит плясать–танцевать.
Комментариев нет:
Отправить комментарий