<MyRusakov.ru />

WordPress 6 с Нуля до Гуру

WordPress 6 с Нуля до Гуру

Этот курс научит Вас созданию самых разных сайтов на самой популярной в мире CMS - WordPress. Вы увидите установку и настройку локального сервера, разбор каждой настройки, каждой кнопки и каждого пункта меню в панели WordPress.

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

Помимо уроков к курсу идут упражнения для закрепления материала.

И, наконец, к курсу идёт ценнейший Бонус по тому, как используя ChatGPT и создавая контент для сайта, можно выйти на пассивный доход. Вы наглядно увидите, как зарегистрироваться в ChatGPT (в том числе, и если Вы из России), как правильно выбрать тему для сайта, как правильно генерировать статьи для него(чтобы они индексировались поисковыми системами) и как правильно монетизировать трафик на сайте.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Индикатор позиции чтения. Часть 1

Индикатор позиции чтения. Часть 1

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

Вот пример:

Индикатор позиции чтения

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

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

В том случае, если вы плохо знакомы с данным тегом и вообще с HTML5 и CSS3, то я рекомендую ознакомиться вам с моим видеокурсом Вёрстка сайта с нуля 2.0, который обучит Вас абсолютно с нуля HTML5 и CSS3, а также научит верстать сайты с помощью реальных примеров вёрстки.

Задача

Для создания индикатора, показывающего текущую позицию чтения нам необходимо ответить на два вопроса:

  1. Что мы будем понимать под длиной страницы? Под длиной страницы мы будем понимать длину документа, которую легко узнать через JavaScript.
  2. На какой позиции пользователь читает статью? Определение текущей позиции чтения статьи пользователем может быть не такой уж и простой задачей. Однако мы будем использовать определенную технику, которая упростит нам решение проблемы.

Техника

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

Допуская что, пользователь начинает чтение с начала документа и будет проматывать страницу до тех пор, пока не достигнет конца, мы попытаемся дать ответы на следующие вопросы:

  1. Как много нужно скролить, чтобы достигнуть конца документа? Та часть страницы, которая скрыта от нас как раз и является максимальным расстоянием, на которое нужно перемотать документ для достижения конца. Это расстояние, обозначим атрибутом max.
  2. Какую часть страницы пользователь уже перемотал? Этот показатель можно определить посредством расчета вертикального отступа верхнего края документа от верхнего края окна. Этот показатель обозначим атрибутом value.

Индикатор позиции чтения

Cимуляция прокрутки страницы. Как только пользователь начинает прокручивать вниз, чтобы получить доступ к скрытой части веб-страницы, вертикальное смещение увеличивается.

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

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.