Как вставить видео в турбосайт
Как создать электронный учебник
Электронное пособие будет создано в формате html. Но при этом вам не понадобится изучать язык HTML. Итак, приступим.
Содержание
Установка программы Turbo Site 1.7.1
Первое что нужно сделать, это скачать программу Turbo Site. И установить её на компьютер. Программа находится в курсе по ссылке (просто скачайте демо-версию курса, внутри будет программа). Запускаем программу Turbo Site. И видим окно приветствия.
Создадим новый проект (кнопка Создать проект ). Сохраните проект электронного учебника в пустую папку. Я назвал папку «Информатика». После сохранения проекта появится рабочая область программы. Можно приступать к созданию страниц электронного учебника.
Создание нового проекта:
Оформление электронного учебника
Изменим внешний вид электронного учебника. Для этого перейдите на вкладку Шаблон и выберете из списка понравившийся вам вариант темы. Поменяв шаблон, основное содержимого учебника будет обрамлено новым дизайном.
Например, такой (Condition):
Встроенные шаблоны TurboSite не адаптированы под мобильные устройства. Но вы можете создавать шаблоны по своей задумке, об этом я рассказываю в видеокурсе по созданию электронного учебника.
Генерировать сайт – применяет все изменения. Нужно нажимать всегда, когда хотите закончить работу, и посмотреть текущий результат.
Открыть папку с сайтом – позволяет открыть папку со всеми файлами вашего учебника.
Просмотр сайта – открывает ваш учебник. Показывает текущий результат учебника в браузере.
Познакомимся с интерфейсом программы TurboSite
Подготовка материалов учебника
TurboSite всего лишь инструмент для превращения ваших материалов учебника в формат html страниц. Поэтому основная часть разработки учебника уходит на подготовку материалов (текстов, изображений, видео и т.п.).
Можно наполнять страницы во встроенном редакторе программы. Но он изрядно устарел, а некоторые функции и вовсе работают некорректно. Я предлагаю весь контент подготовить заранее:
Все страницы лучше создать в программе Microsoft Word отдельными файлами. Причём крайне рекомендуется использовать только следующие инструменты: полужирный шрифт, курсив, подчеркивание, нумерованный и маркированный список. Не следует изменять начертание шрифта, размер шрифта, выделение цветом и т.п. Это будет только нагружать страницу. Подобные стили лучше задавать только в шаблоне!
Изображения будут добавляться только через программу. Просто пронумеруйте их по примеру: 1-3.jpg. Данная расшифровка подскажет, что картинка принадлежит к первой странице и 3 по счету.
Видеоролики стоит перекодировать в формат mp4. Это избавит от множества проблем совместимости браузерами.
Презентации оставьте в формате Power Point. Данный формат не поддерживается браузерами, но мы найдем способ как их разместить. Не стоит использовать анимацию и переходы, так как при смене формата они все равно пропадут.
Подготовка материалов к работе:
Основные настройки электронного учебника
На вкладке Параметры сайта можно установить основные настройки электронного учебника.
Параметры электронного учебника:
Добавление страницы учебника
Перейдите на вкладку Страницы. В левой части окна будут отображаться все страницы учебника, а в правой их содержимое.
По умолчанию у вас уже создана главная страница(index). Можете начинать вводить данные с нее, но я обычно оставляю её для оглавления.
На вкладке HTML-код можно существенно увеличить функциональность учебника. Например, вставить видео, аудио или другой мультимедийный контент.
Если отметить чекбокс «В списке страниц» то в боковом меню появится ссылка на текущую страницу.
В правую часть можно копировать любой форматированный текст, с картинками, таблицами и т.д.
Добавление страницы:
Работа с контентом учебника
Добавление изображений в электронный учебник:
Создание страницы оглавления
После того как добавили все необходимые страницы электронного учебника, давайте создадим страницу оглавления.
Перейдите на первую страницу (index). В правой части напишите оглавление своего учебника.
И расставляем ссылки на страницы, согласно оглавлению: выделяем пункт оглавления – жмем кнопку Ссылка – на страницу проекта – указываем ту страницу, на которую нужно ссылаться.
Итог: готовый электронный учебник
Теперь электронный учебник находится в папке public_html. Чтобы его открыть, достаточно запустить внутри этой папки файл index.html.
Если Вы переносите учебник на флэшку или в любое другое место, рекомендуется перемещать вместе с папкой всего проекта, чтобы в дальнейшем можно было вносить любые изменения.
Это был минимальный перечень действий, который необходимо выполнить, чтобы разработать электронный учебник.
Пример электронного учебника (простой вариант):
Пример электронного учебника (по видеокурсу):
В электронный учебник можно внедрить следующие мультимедиа материалы:
Также для электронного учебника можно создать собственный адаптивный шаблон, который будет подстраиваться под устройства с маленькими экранами.
Стандартные средства программы этого не позволяют, но в расширенном видеокурсе «Электронный учебник за 1 день» есть способы их реализации.
Brullworfel
Новая версия программы TurboSite 1.5 претерпела огромные изменения! Теперь с помощью TurboSite можно создать не «простой статичный HTML-сайт», а полноценный интернет-ресурс с поддержкой комментариев и формой обратной связи!
TurboSite теперь полностью работает с кодировкой UTF-8 и генерирует сайты в этой кодировке, что позволяет вам работать с символами любого языка!
В страницы теперь можно вставлять ВИДЕО!
Были исправлены все найденные ошибки, в том числе и досадная ошибка, которая приводила к исчезновению изображений со страниц в случае, если путь к проекту на компьютере содержал символы пробела.
Изменения коснулись удобства работы с программой: добавлять и удалять страницы и блоки в списках теперь можно с помощью клавиш клавиатуры Insert и Delete соответственно, а генерировать, открывать папку с сайтом и просматривать сайт можно с помощью горячих клавиш F10, F11 и F12. При нажатии кнопки «Просмотр сайта», если вы находитесь на вкладке «Страницы», просмотр сайта начинается именно с той страницы, которую вы редактировали.
Практически в каждом шаблоне были сделаны мелкие поправки, а также были добавлены стили для комментариев и формы обратной связи.
Проверить обновления TurboSite, а также загрузить некоторые бесплатные программы, которое могут пригодиться вам при создании и просмотре сайтов, теперь можно из меню «Справка».
Также TurboSite претерпел небольшие косметические изменения.
Полный список изменений:
ОСНОВНЫЕ ИЗМЕНЕНИЯ
— Все файлы программы, проектов, шаблонов и генерируемых сайтов теперь в кодировке UTF8, а это значит, что TurboSite теперь имеет полную поддержку символов любых языков! Старые проекты конвертируются в новую кодировку автоматически;
— Доступны новые бесплатные онлайн-сервисы: комментарии и форма обратной связи. Для использования онлайн-сервисов необходимо пройти бесплатную регистрацию проекта на вкладке программы «Основные параметры»;
— Доступна вставка видео в страницы;
— Ссылка на страницу теперь может размещаться и в главном меню, и в списке страниц одновременно, или же скрываться из обоих меню;
— Доступна проверка обновлений программы в интернете (автоматическая при запуске, а также по вызову из меню «Справка»);
— Использование темы оформления и улучшенного обрамления окон программы теперь можно отключить в меню «Параметры — Тема оформления…»;
— Вкладка «Поля» теперь называется «Основные параметры», а кроме дополнительных полей в ней теперь находятся настройки проекта и форма регистрации для онлайн-сервисов;
— Добавлены диалоги подтверждения операции при удалении страниц, блоков, файлов и изображений проекта;
— Добавлен диалог предупреждения при попытке добавить на страницу файл изображения размером более 500 Кб;
— В меню «Справка» добавлены ссылки на бесплатные программы, полезные для веб-разработчика;
— Добавлена возможность удаления и добавления страниц и блоков клавишами Del и Ins соответственно;
— Добавлены сочетания клавиш для генерации сайта, просмотра папки и готового сайта (F10, F11 и F12 соответственно);
ИСПРАВЛЕНИЯ
— Исправлена ошибка, возникавшая при наличие пробелов в пути к папке с проектом, в результате которой при смене папки проекта изображения не отображались. Уже испорченные изображения необходимо удалить со страниц и вставить заново.
— Исправлена ошибка, вызывашая «спутывание» контента при зажатии клавиш клавиатуры «вверх» или «вниз» в списке страниц;
— Исправлена ошибка, возникавшая при открытии проекта, если в текущей сессии уже выполнялось создание нового проекта, а также в случае повторной попытки создания проекта, если в первый раз была указана не пустая папка для сохранения нового проекта;
— В редакторе кода теперь отображается только код тела документа (между тегами и );
— Исправлен путь хранения файла настроек программы;
— В списке шаблонов больше не отображаются посторонние файлы и папки, находящиеся в директирии «themes» и не являющиеся шаблонами;
— Кнопки действий над элементами списков («Удалить», «Переместить вверх», «Переместить вниз») теперь не активны, если операция, которую они выполняют, не может быть выполнена (ранее при их нажатии в таком случае пользователь получал сообщение о невозможности выполнить операцию);
— Исправлен заголовок диалога выбора шрифта;
— В случае, если не удалось удалить файл, пользователь теперь получает корректное сообщение об ошибке;
ПРОЧЕЕ
— Проекты, созданные или однажды открытые в TurboSite 1.5 больше не будут работать в более старых версиях программы;
— Изменен дизайн главной страницы программы;
— Термин «тема оформления» заменен на термин «шаблон»;
— Индикатор загрузки теперь скрыт и отображается только во время генерации;
— В правом нижнем углу окна теперь отображается уголок для изменения размера;
— В редакторе кода установлен шрифт Courier New (9) для удобства работы с кодом;
— Для разработчиков шалонов доступны новые встроенные поля: %WindowTitle% — заголовок окна, %SiteTitle% — заголовок сайта, %Description% — описание сайта, %Keywords% — ключевые слова, %PageLink% — ссылка на текущую страницу;
— Дополнительные поля «Заголовок окна» и «Заголовок сайта» исключены из стандартных шаблонов, т.к. заменены на встроенные;
— Все стандартные шаблоны и дополнительные шаблоны на сайте конвертированы в соответствии с новыми встроенными полями и кодировкой UTF-8. Инструкцию по конвертации собственных шаблонов и обновленную статью о создании шаблонов смотрите на сайте http://brullworfel.ru;
— Использование в программе шаблонов, в которых отсутствует прямая ссылка на страницу программы (http://brullworfel.ru/turbosite), запрещено;
— Библиотека компонентов AlphaControls обновлена до версии 7.32, включающую множество исправлений проблем с отрисовкой компонентов;
— Стандартный размер окна программы теперь 800 на 600 пикселей;
— В информационных сообщених и сообщениях об ошибках теперь отображаются значки, соответсвующие типу сообщения, а также воспроизводится соответствующий системный звук;
— При выключенной теме оформления с активными эффектами Windows Aero, нижняя часть главного окна программы теперь становится стеклянной;
— Диалоговые окна «Список файлов проекта» и «Список изображений проекта» переименованы в «Файлы проекта» и «Изображения проекта», а их кнопки теперь имеют значки;
— При первом запуске новой версии программы на компьютере, ее версия отправляется на сервер программы с целью сбора статистических данных. Никаких личных данных программа не передает, в базу разработчика заносятся только дата первого запуска и номер версии программы.
— В заголовке главного окна теперь отображается версия программы;
— Если открыта вкладка «Страницы», то при нажатии на кнопку «Просмотр сайта» теперь открывается не главная страница сайта, а именно та, которая открыта в редакторе;
— Программа установки теперь также использует Unicode;
— В комплект установки включены 2 новые темы: Azul и Belle (в 6 разных цветовых вариантах);
26 мыслей о “TurboSite 1.5: Добро пожаловать на новый уровень!”
Делюсь своими мыслями.
Новая версия опровдала мои надежды, но одна ложка дёгтя немного испортила впечатление. На счёт отправки статистики без права выбора, по моему мнению надо было дать пользователю выбор отправлять или нет статистику. Ведь не каждый захочет что-бы с его компьютера какая-то информация отправлялась неизвестно кому и куда(даже если это просто статистика). Это тем самым возможно может спровоцировать некоторых людей на взлом программы.
Ещё раз спасибо за хорошую программу.
Делюсь своими мыслями.
Новая версия опровдала мои надежды, но одна ложка дёгтя немного испортила впечатление. На счёт отправки статистики без права выбора, по моему мнению надо было дать пользователю выбор отправлять или нет статистику. Ведь не каждый захочет что-бы с его компьютера какая-то информация отправлялась неизвестно кому и куда(даже если это просто статистика). Это тем самым возможно может спровоцировать некоторых людей на взлом программы.
Ещё раз спасибо за хорошую программу.
Я кстати опасался подобной реакции некоторых пользователей, но на мой взгляд она происходит от непонимания сути этой самой, как Вы сказали, «отправки статистики».
Например, некоторые браузеры отправляют разработчикам информацию о том, какие вы посещаете сайты и какие ошибки возникают при их открытии. Некоторые медиа-плееры отправляют разработчикам статистику прослушивания определенных трэков для составления рейтингов. Что же касается TurboSite, то никакой подобной «статистики» он не собирает и не отправляет. Отправляет он только лишь свою собственную версию при первом запуске, и ничего кроме версии. Даже при регистрации ваших проектов через программу, для меня остается тайной даже его название. Пароли от проектов также не хранятся в базе данных — хранятся лишь части их «отпечатков», обработанные специальным алгоритмом, так что и паролей ваших я тоже не знаю =). За конфиденциальность можете не беспокоиться =).
Теперь я пользуюсь текстовыми браузерами, а музыку и видео смотрю железными плеерами=)
Отладка Турбо-страниц: пошаговая инструкция по настройке и верстке
Автор Вячеслав Питель · 14:13 11.07.2018 
2
«Сегодня хочется рассказать про то, что же такое турбо сегодня, про то, что у нас есть и рассказывать я буду про то, какие инструменты для отладки турбо-страниц у нас появились на сервисе Яндекс.Вебмастер.
И много буду рассказывать про то, какие способы и технологии, блоки для отображения контента непосредственно в ваших турбо-страницах у нас есть.
Я расскажу про то, как отображать сложные данные: гистограммы, таблицы, про способы отображения медиа-контента. Немножко расскажу про структурирование вашего контента, чтобы все-таки это не смотрелось какой-то страшной простыней.
Пара слов будет сказано о навигации по сайту и по страничке. Задену тему обратной связи, чтобы пользователи могли написать, позвонить, у нас для этого есть много крутых готовых блоков.
Ну и разумеется не обойду стороной рекламу и аналитику, потому что это тоже очень важная часть процесса создания турбо-страниц.
Инструмент «Отладка»: как работать с песочницей
И начать все это хочется с инструментов отладки. То, что мы запустили в Яндекс.Вебмастере инструмент, который мы называем «песочница».
Это новый инструмент, который позволяет вам быстро написать какой-то xml, который описывает вашу турбо-страницу, нажать кнопочку «отладка» и получить справа картинку, которая покажет, как именно такое представление турбо-страниц будет выглядеть на поиске.
Важно, что, во-первых, этот инструмент использует все хостовые настройки, которые у вас уже есть в интерфейсе Яндекс.Вебмастера. Если у вас уже есть турбо, вы можете перейти в раздел отладки и видеть, как турбо-странички будут отображаться именно для вашего сайта.
А что еще более интересно, если у вас еще ничего нет, то вы все равно можете прийти в отладку и сразу же начать пользоваться.
Здесь мы сразу же видим какой-то небольшой сниппет кода. Это непосредственно кусок rss, который нужно передавать для отображения турбо-страниц. Справа видно, как этот кусок кода превращается в конечную страничку, вот в таком мобильничке, как его будет видеть пользователь.
Здесь мы проведем весь сегодняшний вечер, все сегодняшнее видео я буду показывать, что же можно делать с этой страницей.
Хочется сразу обратить ваше внимание, что здесь по умолчанию подставлен первый item, то есть это не весь rss. Инструмент позволяет отображать только одну страничку, но на самом деле никто вам не мешает засунуть в форму ваш rss целиком. Показываться будет только первая страничка, но ничего страшного.
Сейчас я покажу, что-то более интересное. Давайте для начала удалим второй item, чтобы он не мешался, он и так не рисуется.
И хочется буквально немножко пройтись по тому, что же здесь происходит в этом коде, обратить внимание на какие-то распространенные проблемы.
— Распространенные проблемы при отладке
В принципе, если вы используете плагин для вашей cms и турбо-страницы вы готовите не сами, а вам помогает ваше специальное решение, вам об этом, наверно, заботиться не нужно.
Но если вы решили дерзнуть и написать какую-то свою реализацию в шаблоне для организации турбо-страниц, то вот об этом нужно помнить. Turbo=true, иначе ничего не работает. Это нам сообщает о том, что вы хотите видеть эту страницу турбированной.
И второй важный момент, который сразу же всплывает: непосредственно контент турбо-страницы нужно передавать в элементе turbo:content. Про это написано в документации, а еще там написано, что контент сам по себе должен быть завёрнут еще в тег .
Если вы это не сделаете, вы можете получить довольно неприятные последствия. Страничка нарисуется, но перестанет рисоваться в какой-то определенный момент времени, и вы не будете знать, что происходит.
Таблицы, графики и гистограммы в турбо-страницах
Теперь давайте перейдем к тому, что же интересное можно добавить в нашу страницу, чтобы она была поживее и представляла более-менее интересный контент.
Те из вас, кто знает, что такое html, а я подозреваю, что вас подавляющее большинство, видят, что это ровно та самая таблица, которая в обычном html тоже представляет таблицу.
Правда в обычном html такая таблица выглядела бы без каких-то стилей, была бы отталкивающей. В турбо ровно такой же код для таблицы формирует аккуратную, современную, стильную табличку, которая легко читается.
Это основная прелесть турбо для тех, кто хочет передавать туда свой контент. В турбо в большинстве блоков вы передаете только именно контент, то, что вы хотите сказать, какие-то значения.
Тем, как это будет выглядеть, и как это будет там работать занимается Яндекс. По оформлению таблиц, в принципе, ничего нового.
Для того, чтобы нарисовать гистограмму, достаточно завести такой блок гистограммы и внутри указать элементы для каждой гистограммы. И для нее вы вписываете ровно то, что вам нужно.
Если мы нажмём отладить, то получится 3 столбика с погодой, те значения, которые я писал и иконки, которые я туда загрузил.
Мне для этого не пришлось придумывать, как бы мне эти столбики выровнять по высоте. Чтобы это работало, я заполнил те значения, которые отображаются, и вот они перед нами. Абсолютно ничего лишнего.
Но если вы все таки хотите изменить стили css у турбо-страниц, у нас есть и такая возможность.
Как вставить изображение в турбо-страницу
Для того, чтобы отображать вот такие последовательности картинок на мобильных устройствах, давно изобретен элемент, который называется «галерея».
Вы заводите вокруг картинок div с атрибутом data-block и нажимаем отладить. Совершенно бесплатно мы вместо вертикальной простыни из картинок получаем те же самые картинки, но с горизонтальным скроллом, то есть, как принято это делать на мобильных устройствах.
Варианты добавления видео для турбо
Видео у нас вставляется тоже довольно простым образом. Сейчас я скопирую заготовленный код. Таким образом, вы можете вставить видео со своего сайта.
Вы должны указать источник-адрес, по которому это видео размещено, тип этого видео и так же по-хорошему нужно разместить картинку, которая будет отображаться в превью.
Для этого я нажимаю «поделиться» и нажимаю кнопочку «встроить», получаю готовый код для вставки на сайт. Наверное, такие возможности youtube ни для кого не сюрприз.
А сюрпризом, как мне хочется верить, для вас будет то, что мы в турбо поддерживаем этот способ вставки. То есть, вы просто копируете то, что вам предлагают вставить, нажимаете отладить, и она просто работает, видео проигрывается со всеми нужными элементами.
На самом деле, за этим простым телодвижением, которое я совершил, кроется гораздо более интересная штука.
Иные встраиваемые элементы в турбо-страницы
Мы не просто поддерживаем вот такие разные способы вставки видео, турбо-страницы поддерживают встраиваемые элементы, например, поддерживаются твитты.
Давайте пойдем в твиттер и выберем какой-нибудь твит, например, про Алису. В навигаторе twitter тоже можно понажимать какие-то кнопочки и найти «разместить твит».
Twitter предлагает мне код для вставки, я благодарно его беру, вставляю в код турбо-странички, и происходит магия.
Она просто встраивается со всеми элементами управления, с лайками, даже то же самое видео, которое находится внутри этого твита, тоже работает.
А если вы у себя на сайте уже используете вот такие встраиваемые элементы, то вы можете использовать их ровно тем же образом в контенте для турбо-страниц. Они будут работать также в стиле турбо-страниц, аккуратно оптимизируясь под мобильные устройства.
Кнопки «поделиться» в соцсетях
Для этого у нас тоже в турбо-страницах есть поддержка специального блока и, как не сложно догадаться, он тоже минималистичен, в смысле того, сколько кода вам для этого нужно написать.
То есть, чтобы разместить у себя кнопки «поделиться» в твиттере или фэйсбуке вам нужно написать:
Можете перечислять любые социальные сети из тех, которые мы поддерживаем. Список всех соцсетей, которые мы поддерживаем, находится в документации по турбо-страницам.
И вот таким не замысловатым образом мы добавляем своей страничке целый блок с разными кнопками, которые прекрасно работают.
Блоки на основе карточек
В результате у нас получилась довольно большая турбо-страница, если промотать, на ней можно увидеть много контента, которые смешан в кучу совершенно безобразным образом.
Я не дизайнер, но хочется с этим что-то сделать. Для того чтобы с этим можно было что-то сделать у нас тоже есть специальный блок, который называется «карточки». Карточки представляют из себя просто коллекцию карточек.
То есть, для того чтобы сказать, что сейчас будут карточки, мы заводим блок, который называется data-block=»cards». Внутри этого блока каждый элемент контента, группа каких-то тегов, которые вы хотите оформить в одну карточку, нужно завернуть в блок cards.
Давайте я отделю снизу текстовый контент с картинкой от всего остального, что я наделал уже при вас. Закрываем предыдущую карточку, открываем следующую, закрываем ее и закрываем весь блок cards.
Если домотаем до старого контента, начиная с картинки и текста, увидим еще одно разделение. Так можно поделить всю вашу страничку на отдельные островки какого-то объединенного по смыслу контента.
Это уже позволит пользователю, если грамотно использовать этот блок, не потеряться на вашей странице.
Два варианта добавления меню на турбо-страницы
В настройках моей турбо-страницы есть раздел «меню турбо-страниц», где есть пункты меню. Этот способ подходит, если вы хотите иметь одинаковое меню на абсолютно всех страницах вашего сайта, тогда вы можете добавить его здесь.
Что хорошего в этом способе? Он позволяет вам управлять централизовано этим самым меню.
Это удобно, если это то, что вам нужно, но, возможно, это не то, что вам нужно. Тогда я покажу другой способ. Я убрал меню из настроек и вот бутерброд пропал.
Может быть вы хотите навигацию внутри страницы. В общем неважно, если вам не подходит способ настройки через интерфейс, вы можете воспользоваться способом настройки через код.
Таким образом, у нас есть, как минимум, два способа управления отображением меню, выберите тот, который вам подойдет больше.
Встраиваем поиск по сайту
Надеюсь, вы уже все знаете, если не знаете, сейчас я вам расскажу, что турбо-страницы, разумеется, поддерживают формы. Обычные html-формочки, где написано action метод get, все как в обычном html.
Но чтобы пользователю было еще более понятно, что это именно поиск, мы поддерживаем вот такую возможность поменять у types текст на search.
И тогда форма поиска обзаведется лупой, которая недвусмысленно намекает на то, что это действительно поиск по вашему сайту.
Это то, что касается структурирования вашего контента и облегчения возможности навигации по вашему сайту.
Формы обратной связи и кнопки
То есть вы хотите, чтобы пользователь вам позвонил, разместил какой-то заказ и так далее. В общем вам нужна обратная связь.
Кнопка это и есть кнопка, она может работать, как просто ссылка, либо может работать, как ссылка на телефон. В форме вы указываете куда вы хотите привести пользователя, либо на телефон, либо адрес странички куда вы хотите, чтобы пользователь перешел, например, на страничку оформления заказа.
Оформление этой кнопки управляется тоже простыми атрибутами: цвет самой кнопки, цвет текста на этой кнопке и непосредственно текст кнопки.
Но этого может хватать не всем, если вы как-то привыкли в более активной манере «приносить пользу» своим посетителям, то для вас у нас есть еще более крутой блочок, который не даст пользователю просмотреть эту кнопочку.
Там очень много атрибутов, про некоторые я сейчас немножко расскажу. Внутри блока вы указываете отдельные элементы, способы связи с вами, номер телефона чат или telegram, если вы поддерживаете адрес вашего телеграмм-канала, или чат вконтакте, если у вас есть группа вконтакте.
Опять же, полный список того, что мы здесь поддерживаем есть в нашей документации.
Если все это отладить, то можно увидеть, что у нас теперь появились замечательные три кнопочки, которые преследуют вашего пользователя куда бы он ни шел на вашей турбо-странице, не дают ему забыть, что ему вам нужно позвонить.
Если вы не хотите сильно смущать пользователя таким своим присутствием, вы можете поменять расположение кнопки, можно написать data-stick=»right» и кнопочка уйдет направо.
А можно написать data-stick=»false» и тогда такой же блок кнопок без потери функциональности просто прилипнет к тому месту в коде, где вы его разместили, что тоже хорошо, если вы не хотите беспокоить пользователя лишний раз.
Организация комментариев на турбо-странице
И, продолжая тему обратной связи, помимо людей, которые хотят, чтобы с их сайта пользователи связывались с ними, есть люди, которым еще и не стыдно показать, что же пользователи о них пишут.
У вас на сайте могут быть комментарии и для вас может быть важно, что эти комментарии не должны потеряться на турбо-версии страниц.
Мы вообще стремимся к тому, чтобы весь ваш контент, который вы показываете на основной версии страниц, чтобы его можно было отобразить в турбо.
У меня есть уже готовая заготовленная ветка комментариев, соответственно, если вы задумали делать свою турбо-шаблонизацию чего-нибудь, то вы можете воспользоваться таким кодом.
Так или иначе, блок с комментариями выглядит следующим образом. Адрес оригинальной странички, где размещаются ваши комментарии, потому что пользователь может захотеть оставить комментарий на вашу статью, соответственно, здесь вы размещаете url-адрес, где ваши комментарии на вашей странице.
Дальше вы размещаете сами комментарии.
Кусок кода, который я оставил, адресовался вот в такое дерево комментариев. Если бы я был дизайнером, я бы здесь, конечно, добавил разбивку.
Внимательные зрители сейчас заметили, что у нас поддержаны ответы на комментарии. То есть первый комментарий размещен на первом уровне, дальше у него есть еще один вложенный блок comments, где вы можете размещать ответ на первый комментарий.
В общем вы можете сделать какую угодно иерархию, если у вас сложная иерархия комментариев на сайте, можно все это здесь делать. Даже мы поддерживаем аватарки.
Таким образом, если у вас есть комментарии и вы думали, что из-за них вы не пойдете в турбо, вы ошибаетесь, вы можете принести комментарии в турбо-версии ваших страниц.
Бесконечная лента и статьи по теме
И завершить историю про контентную часть того, что мы предоставляем в турбо-страницах, хочется рассказом о паре интересных вещей.
То есть, вы, вероятно, заинтересованы в том, чтобы пользователи с вашего сайта не уходили вообще никогда.
Для того, чтобы как-то его заинтересовать, если он прочитал вашу статью, прочитал все комментарии, у вас кончился контент, нужно ему подсказать: смотрите, вот есть еще статьи, которые могут вам быть интересны.
Для того, чтобы вставить ссылку на следующую статью, вы должны разместить специальный элемент.
Для пользователя это будет выглядеть следующим образом: он промотал статьи вниз и уже хотел уйти, а вы ему показали следующую статью и ему может быть это интересно.
Теперь в турбо страницах поддержан бесконечный скролл. Это то, как принято сейчас во многих порталах представлять контент пользователю в мобильных и не только.
Это позволяет пользователя завлекать и он, вероятно, вообще не уйдет с вашего сайта, пока у него телефон не сядет или пока у вас контент не кончится.
Наша аналитика показывает, что использование бесконечной ленты на вашем сайте увеличивает глубину просмотра в полтора раза. И для того, чтобы вот такой блок про следующую статью превратить в бесконечную ленту, достаточно всего лишь дописать type=infinite.
Разные варианты размещения рекламных блоков
Турбо-страница поддерживает блоки РСЯ и Adfox. Для того, чтобы завести блок, вам нужно пройти в РСЯ и там понажимать кнопочки, которые они вам предложат.
У меня уже есть готовый блок специально для турбо-страниц и вот я его добавил. Я могу добавить еще один блок, например, такой же от РСЯ, но назову его по-другому.
Все это время пока я показывал вам, как использовать разные блоки, реклама вставлялась в автоматическом режиме.
Это если вам не хочется думать, как именно разместить блоки, у вас просто есть рекламные блоки Яндекса и вам нужно, чтобы они оказались в турбо-страницах просто укажите id блоков и больше ничего не делайте.
У нас есть специальные алгоритмы, которые занимаются тем, что вычисляют, как оптимально разместить блоки так, чтобы они не были подряд, чтобы максимально не оттолкнуть пользователя, но при этом, чтобы разместить как можно больше блоков, если вы этого захотите.
Более подробное описание того, как это размещение работает, находится в документации. Мы стараемся принести счастье пользователю и при этом не ущемить вас в монетизации.
Если вы не доверяете автоматике, либо вы по какой-то причине хотите явно управлять тем, где на вашей странице будет размещаться реклама, такая возможность у нас тоже есть.
Это идентификатор, который вы можете передать в настройках, а дальше по коду вашей страницы вставлять рекламный блок куда хотите, говоря, что я хочу здесь вставить рекламный блок с таким-то идентификатором.
Таким образом, сами идентификаторы блоков вы можете менять независимо от их способов размещения.
Для того, чтобы разместить рекламный блок, нужно найти место. Я сослался на конкретный рекламный идентификатор рекламного блока, который указал ранее в настройках. Нажимаем «отладить» и вот рекламный блок приехал туда, куда, собственно, я его вставил.
Я не уверен, что в данном случае это лучшее место для размещения, но суть в том, что вы можете управлять тем, где он показывается.
Более того, вы можете использовать несколько рекламных блоков, вы можете в разные места страницы вставить разные рекламные блоки, ссылаясь на них через идентификатор. И, собственно, управлять полностью тем, как реклама у вас отображается. По поводу рекламы это все.
Статистика и подключение счетчиков аналитики
Если у вас уже есть турбо-страницы, у вас есть счетчик Метрики, во-первых, надеюсь вы не забыли подключить его для вашего фида. Это также можно делать через настройки, либо через сам фид.
Это означает, что мы подключили Яндекс.Метрику с таким-то идентификатором блоков.
Что интересного? У нас теперь поддерживается возможность передавать параметры визитов. То есть Метрика поддерживает возможность передать ваши параметры, которые вы как-то сами придумали в формате ключ=значение, для того чтобы как-то идентифицировать пользователя для любых ваших нужд.
И такая же возможность есть теперь в турбо-страницах. Для этого достаточно указать атрибут params и в него передать непосредственно те параметры, которые вы хотите отдать в систему аналитики в формате имя и значения.
Следующая интересная возможность, которая больше нужна будет пользователям других систем аналитики, отличных от Яндекс.Метрики.
Яндекс метрика знает про то, что ваша страницы бывают турбированными и, соответственно, в Метрике есть инструменты для анализа: для сравнения турбо/не турбо визитов.
А для других систем аналитики вам может быть интересно как-то различать визиты, то есть вам может быть интересно отделить пользователей, которые пришли на турбированную версию вашей страницы от пользователей, которые пришли на мобильную или на обычную десктопную версию вашей страницы.
Элементы turbo:source и turbo:topic делают следующее: в turbo:sourcee вы можете указать адрес страницы, который уйдет в систему аналитики в качестве адреса страницы, на который пришел пользователь.
Последняя фича, но не по значению, про которую я хотел бы рассказать в рамках блока про аналитику заключается в следующем.
Я почти уверен, что все из вас найдут свою систему аналитики в списке и тогда вам просто следует следовать тому, что написано в документации и вставить соответствующий код.
Но, если так случилось, что у вас используется какая-то странная система аналитики, про которую мы не знаем, может быть вы написали свою систему аналитики, если ваша система аналитики поддерживает встраивание через установку в виде изображения (пикселя), то вы можете использовать ее в турбо-страницах, для этого мы поддержали новый тип встраивания систем аналитики.
И в атрибуте url вы передаете адрес того самого пикселя, из которой ваша система поддерживает встраивание, а внутри url как-то замешиваете, как нужно вашей системе, параметры визита.
Полный список поддерживаемых параметров визита тоже находится в документации. Мы постарались покрыть все, что вам только может понадобиться. Соответственно, в вашу систему улетит обращение по адресу, в котором все эти элементы в фигурных скобочках будут заменены на характеристики визита.
Итоги
А также рассмотрели большое количество блоков, которые поддерживаются турбо-страницами, которые позволяют вам красиво отображать ваш контент будь он медийный или какой-то табличный и контент практически любой сложности.
Если вы что-то можете показать пользователю в своей мобильной версии, то, скорее всего, вы сможете показать это и с помощью турбо-страниц, получая при этом профит в скорости и других возможностях турбо.
Ну и я коротко рассказал про то, как турбо-страница работает с рекламой. Можно заметить, что способов разместить рекламу у себя на турбо-страницах несколько и все способы должны как-то удовлетворить любые ваши потребности по размещению рекламы.
Также немножечко рассказал про аналитику, про то, как мы интегрируемся с системами аналитики и я подозреваю, что уже не осталось систем, которые нельзя было бы проинтегрировать в турбо-страницы.
Планы Яндекса по доработке турбо-страниц до конца лета
Добавятся новые форматы контента:
Улучшат навигацию по Турбо-страницам:
По вопросам турбо-страниц обращаться в службу поддержки Турбо-страниц Яндекса.