Карусели горячие, без сомнения об этом. Когда старые гиганты, такие как IMDb, начинают размещать карусели на своей домашней странице, вы знаете, что это серьезный бизнес. Это не значит, что они здесь, чтобы остаться (помните облака тегов), но шумиха реальна, как и спрос, поэтому вам лучше быть готовым, когда они придут с просьбой построить один. Это не самый простой шаблон, поэтому я воспользуюсь этой возможностью, чтобы глубже вникнуть в секреты рекламы экономического контента.
Карусель говоришь?
Я предполагаю, что мы все знаем, что такое карусель, в наши дни вы найдете их почти везде (кроме блогов). Тем не менее, существует большая разница между распознаванием шаблона и его надлежащим описанием. Хороший способ начать делать это — установить, что это не первое, точно определить точные различия между каруселью и связанными с ней схемами.
Очень близким родственником карусели является слайд-шоу. Слайд-шоу часто показывает одинаковые переходы содержимого и имеет почти идентичные элементы навигации. В зависимости от того, насколько продвинуты ваши слайд-шоу, у вас будут ссылки «предыдущий / следующий», набор ссылок для отображения каждой отдельной записи и автоматический поворот. Разница между этими двумя шаблонами заключается в самом контенте. Слайд-шоу — это декоративный элемент или элемент, в котором контент (наиболее вероятно изображения) имеет логическое отношение к своему контекстному контенту. Например, если вы проверяете номер в отеле, вы можете найти слайд-шоу, демонстрирующее различные фотографии дизайна интерьера.
Тогда есть вкладки. Поначалу связь между вкладками и каруселями может быть не столь очевидной, но помимо типичных графических реализаций оба шаблона на самом деле имеют много общего. Оба шаблона предлагают экономичный способ предложения большого количества контента на очень ограниченном пространстве. Оба шаблона имеют схожие навигационные элементы управления, хотя следует отметить, что на вкладках никогда не отображаются ссылки «предыдущий / следующий». Кроме того, вкладки никогда не поворачиваются автоматически. Очень важные различия прямо там. Внутреннее содержание также отличается. Вкладки используются для разделения основного содержимого на странице на различные логические группы и визуализации их по одной.
Так что это говорит нам о каруселях? С одной стороны, все элементы в карусели принадлежат к одному (повторяемому) семантическому типу контента. Их можно просматривать в последовательном или предпочтительном для пользователя порядке и служить в качестве шлюзов для других разделов сайта (или даже для контента на внешних сайтах). Карусели эффективно отображают то, что я обычно называю «фокусными блоками», рекламными блоками для контента, который вы хотите, чтобы ваши посетители заметили. Это описание четко отличает карусель от слайд-шоу и вкладок. С этим (по общему признанию лаконичным) определением мы наконец можем приступить к работе.
Перевод текста в HTML
Теперь мы знаем, что такое карусель, мы можем перевести эту информацию в шаблон HTML. Вы уже знаете, что html — это все о семантике, и, поскольку мы определили карусель как выбор блоков фокуса, имеет смысл увидеть этот результат в нашем html-шаблоне. Для начала давайте определим базовый идентификатор компонента:
<div class="carousel">...</div>
Этот элемент идентифицирует компонент как карусель. Если вы пойдете немного глубже, мы заметим два важных элемента. Сначала идут навигационные элементы управления, затем сам контент. Это разделение должно быть видно в html, что переводится в следующий код:
<div class="carNav">...</div> <div class="carContent">...</div>
Навигация по карусели должна быть построена так же, как и другие элементы навигации на вашем сайте, поэтому я не буду более подробно об этом здесь. Область контента более интересна для изучения. Как я уже говорил, содержимое карусели представляет собой список блоков фокуса. Используете ли вы фактический элемент списка, зависит от вас (как вы, возможно, читали в другом месте, все может быть списком, поэтому все зависит от баланса). Я, например, считаю, что карусель представляет собой четкое суммирование элементов, поэтому конструкция ul / li, вероятно, является здесь справедливым вариантом:
<ul> <li class="focusBlock">...</li> <li class="focusBlock">...</li> ... </ul>
Если вы хотите перейти на html5, вы можете использовать элемент section для каждого .focusBlock, хотя в этом случае я бы вообще отбросил структуру ul / li. Кроме того, элемент article вполне подойдет в качестве базового элемента для нашей модели карусели. И в идеале, внутренний html блоков фокуса должен быть идентичен другим блокам фокуса на вашем сайте.
Еще одна вещь, на которую следует обратить внимание, — это то, что в каруселях есть несколько вариантов блоков фокусировки. Большинство каруселей демонстрируют один элемент за раз, но если вы рассмотрите шаблоны сопутствующих товаров, вы увидите, что некоторые вариации по сути такие же, как и у каруселей. Они соответствуют описанию, которое мы установили выше, только сам контент является более специфической формой блока фокусировки (не просто какой-либо тип контента, а связанный продукт). Этот вариант можно легко определить, добавив второй класс в базовый элемент, если вам нужна более прямая семантика, вам также понадобится дополнительный «связанный» класс для каждого элемента блока фокуса в вашей карусели.
Готовый шаблон HTML
Собирая все это вместе, мы приходим к следующим примерам. Первый пример использует (x) html, список и простые блоки фокуса.
<div class="carousel"> <div class="carNav">...</div> <div class="carContent"> <ul> <li class="focusBlock">...</li> <li class="focusBlock">...</li> ... </ul> </div> </div>
Второй пример использует html5 для карусели связанных элементов:
<article class="carousel related"> <div class="carNav">...</div> <div class="carContent"> <section class="focusBlock related">...</section> <section class="focusBlock related">...</section> ... </div> </article>
Дальнейшие комментарии, дополнения и оговорки приветствуются, некоторые критические отзывы никогда никому не вредят Вот для чего предназначен раздел комментариев.
Что дальше?
Помимо разработки реального кода, я надеюсь, что эта статья также иллюстрирует процесс написания семантического HTML и то, как компоненты и шаблоны проектирования играют довольно важную роль при разработке фрагмента HTML-кода. Это больше, чем просто добавление некоторых тегов для конкретного проекта, чтобы стилизовать и анимировать его.
Существует так много функциональных и графических вариантов карусели, что вряд ли интересно просматривать все из них, но есть еще один аспект карусели, который заслуживает некоторого дополнительного внимания. Как и во всех компонентах javascript, происходит постепенная деградация, поэтому в следующий раз я буду искать разные способы правильно справиться с этим для карусели. Оставайтесь в курсе.