<MyRusakov.ru />

Создание и раскрутка сайта от А до Я

Создание и раскрутка сайта от А до Я

Видеокурс "Создание и Раскрутка сайта от А до Я" - это 246 видеоуроков общей продолжительностью более 50-ти часов по теме создания, размещения в Интернете и раскрутке сайта.

В уроке рассмотрены следующие необходимые любому профессиональному Web-мастеру языки: HTML, CSS, JavaScript, PHP, SQL (с использованием MySQL) и XML.

Помимо этого в Видеокурсе рассматривается самая популярная система управления контентом - Joomla.

Также в Видеокурсе "Создание и Раскрутка сайта от А до Я" показывается весь процесс создания реального сайта - MyRusakov.ru. Затем демонстрируется его размещение в Интернете, а также последующая раскрутка. Всё это записывается, и Вам остаётся лишь просто повторить, чтобы стать владельцем своего собственного сайта!

И, наконец, почти к каждому уроку идут упражнения, которые позволяют закрепить полученные знания из урока уже на практике.

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

Подписавшись по 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):

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