75 подписчиков

Адаптация шаблона под MyEngine. Часть 4.

18 марта 202018 мар 2020

6 мин

Здравствуйте, дорогие читатели канала Сам Себе Веб-Мастер.

Хочу покаяться перед вами. Накосячил я в прошлой статье. Нет, там все правильно написано и действия совершены правильные, но, несколько ошибок допустил в коде. После публикации статьи, я, такой весь довольный собой, решил зайти в валидатор W3S и посмотреть есть ли какие ошибки. И увидел вот это.

Все ошибки в один экран не вошли, 10 ошибок и 3 предупреждения. Думаю, ерунда какая-то, не мог я столько ошибок наделать, наверное, из исходника нахватал. Закачал исходник, смотрю и удивляюсь.

Оказывается, все 10 ошибок моих, а 3 предупреждения от исходника. Ну что же, нужно разбираться. Разобрался. Десять ни десять, а три ошибки сделал. Не поставил один закрывающий тег section и два закрывающих тега div. Исправил и получил вот такой результат.

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

Первое говорит нам, что в начальном теги html отсутствует элемент lang, определяющий язык, используемый в html-документе. У нас <html>, а должно быть <html lang="ru">. Всё правильно, я же по-русски пишу, правда, иногда с ошибками, но здесь это не важно.

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

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />.

Этот мета тег определяет размер окна просмотра в браузере. Например, если в этом мета теге прописано width=900, то при размере экрана меньше 900 пикселей страница уйдет за пределы окна. Если прописано width=device-width, то ширина страницы определяется в относительных величинах и всегда занимает 100% окна. То есть, при изменении размеров окна, страница сама подстраивается под его размер. Элемент user-scalable определяет возможность масштабирования страницы пользователем, т.е. запрещает или разрешает изменять масштаб страницы вручную. У нас прописано user-scalable=no, т.е. прописан запрет. Чтобы разрешить масштабирование нужно прописать user-scalable=yes, но мы не будем это делать, а просто уберем этот элемент.

<meta name="viewport" content="width=device-width, initial-scale=1" />.

И последнее предупреждение нам говорит, что внутри секции <section class="container box feature2"> отсутствуют заголовки h2-h6. Странное предупреждение, потому что там есть один такой заголовок. Но, иногда такое бывает, если этот заголовок, по мнению валидатора, стоит в неправильном месте. С этим предупреждением будем разбираться чуть позже.

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

<h1><a href="index.html" id="logo">ZeroFour</a></h1>

Заголовок выводится в тег <h1></h1>, он является заголовком первого уровня. В соответствии со стандартами W3C HTML5 и W3C CSS Valid, такой заголовок на странице должен быть один. Есть множество споров по этому вопросу. И все они носят философский характер, мол, что не запрещено, то разрешено. Да, вы можете, разместить на странице сколько угодно заголовков h1 и валидатор не выдаст ошибки, но так вежливо предупредит, что на странице есть несколько заголовков первого уровня. Мол, сами решайте, что с этим делать, я предупредил.

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

Я всегда делаю так

<div class=”logo”><a href="index.html" id="logo" title=”ZeroFour”>ZeroFour</a></div>.

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

А стало так

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

На любой странице любого сайта важна быстрая загрузка контента, который отображается на первом экране. Обычно это шапка, меню, какой-то баннер или слайдер, какие-то элементы оформления сайта. Так вот, за вывод этого контента, а точнее за его вид, больше отвечают стили css, чем например js-скрипты, которые так же участвуют в выводе этого контента. Поэтому, рекомендуется, сначала загружать таблицы стилей css, а затем эти скрипты.

Я, обычно во всех своих шаблонах, делаю так. Таблицу стилей css, которая отвечает за оформление самого шаблона, делю на две таблицы. Первая таблица, отвечает за вывод и оформление именно верхней части страницы шаблона, а вторая – отвечает за все, что осталось. Первая таблица стилей css выводится непосредственно в шаблон между тегами <style></style>. Вторую таблицу подключаю через <link rel="stylesheet" href="main.css" />.

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

Кроме этого, после вставки тега меню, не работает подсветка активного пункта меню. Еще, неплохо было бы сделать реакцию пункта меню при наведении курсора. Этого эффекта нет в исходнике. Но, начнем с подсветки. Здесь, нужно менять стили css. Смотрим, как это сделано в исходнике. Код активного пункта меню и правила css для него:

Код активного пункта меню в нашем шаблоне:

Правило # nav > ul > li > a:hover позволяет сделать подчеркивание ссылки пункта меню при наведении.

Стили меню подправили. Я не показываю это на конкретных примерах и файлах, т.к. это достаточно трудоемкий процесс. Могу описать только в нескольких словах. Был создан файл style.css, в этот файл была перенесена часть файла main.css, которая отвечает за вывод шапки. Затем, уже в файле style.css были сделаны все эти изменения. Так же, была найдена причина, почему не выводился фон шапки, были указан не правильный путь до файла с изображением фона. Кстати, этот файл был заменен на новый. В результате получилась вот такая шапка.

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

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

На этом прощаюсь. До новых встреч на канале Сам Себе Веб-Мастер.

P.S. я проверил этот вариант на валидаторе W3C, всё ОК.