Gazmarket59.ru

Газ Маркет 59
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Счетчик для веб страниц

Как пользоваться Яндекс Метрикой

Привет дорогие читатели seoslim.ru! Вот и пришла пора рассказать про такой инструмент, как Яндекс Метрика более детально, потому что до сих пор не все вебмастера знают, каким потенциалом он обладает.

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

Но согласитесь что писать на абум статьи и даже не знать, какие из них сколько приносят трафика из поисковых систем весьма глупо, поэтому были придуманы различные счетчики посещений (LiveInternet, Openstat) для сбора данных отслеживаемых проектов.

Яндекс тоже не захотел оставаться в стороне и создал свой инструмент под названием «Метрика», способный представлять самый подробный отчет по анализу и статистике площадок намного превосходящий конкурентов кроме Google Analytics, но там новичкам будет сложнее разобраться в интерфейсе.

Что дает проверка посещаемости

Установив на свой сайт счетчик посещений, который сейчас предлагает огромное количество сервисов, можно узнать крайне необходимую информацию. Она заключается в показателях «хитов» и «хостов».

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

Фото: количество посетителей на сайте

Владея этими цифрами, владелец может сделать выводы, насколько интересен его сайт посетителям, и соответственно, предпринять необходимые шаги для увеличения «хитов».

Если веб-мастер заинтересован в продвижении своего сайта, ему необходимо регулярно проверять посещаемость интернет ресурса.

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

Читайте так же:
Сбросить счетчик с принтера lexmark

мир глазами веб-разработчика

Создаем списки с помощью CSS свойства counter

время чтения 4 мин.

Вы знаете, что нумерованный список можно создать с помощью CSS-свойства counter ? Постойте, это же так похоже на использование HTML-тега

    . Но только на первый взгляд: с помощью counter можно, например, автоматически нумеровать заголовки или сделать оглавление для объемного документа.

Как работает свойство counter?

Для того чтобы счетчик работал нужно выполнить три шага:

  1. создать и инициализировать счетчик,
  2. увеличить значение счетчика,
  3. визуализировать значение счетчика.

Создаем и инициализируем счетчик

Этот шаг состоит из двух пунктов. Для начала нужно создать счетчик и дать ему имя.

Создаем счетчик

В этом примере счетчик называется my-counter . Без имени счетчика дальнейшие действия будут невозможны.

Инициализируем счетчик

Следующий пункт — определение стартового значения счетчика, по умолчанию это 0 (в этом случае можно ничего не указывать). Можно указать любое целочисленное стартовое значение. Если укзаать 20, вывод начнется с 21 (в случае, если значение счетчика увеличивается на 1 за шаг, но об этом позже).

counter-resetрезультат
1, 2, 3…
2021, 22, 23…
5960, 61, 62…

В данном примере для инициализации счетчика указано значение 199, по умолчанию шаг равен 1, список будет начинаться с 200.

Где должен находиться counter-reset?

Это очень важно: свойство counter-reset нужно применять к родительскому элементу. Рассмотрим некорректный пример:

Значения счетчика не увеличиваются верным образом:

Еще одно замечание: counter-reset может быть привязан и не к прямому родителю, но элемент, в котором инициализируется счетчик, должен обязательно оборачивать весь нумерованный список. Например, так:

Увеличение значения счетчика

Итак, счетчик создан. Теперь необходимо поработать над увеличением его значения. Для этого используем следующий синтаксис:

Вторым аргументом свойства counter-increment является целое число. Это означает, что значение счетчика может изменяться с шагом, отличным от 1. Для приведенной ниже таблицы значение свойства counter-reset равно 0:

counter-incrementрезультат
11, 2, 3…
55, 10, 15…
-5-5, -10, -15…

И, конечно, чтобы запустить обратный отсчет можно использовать отрицательные числа. Посмотрим, как работает такой вариант:

Визуализируем значение счетчика

Наконец, для вывода счетчика на экран нужно передать функцию counter , как значение свойства content . Это довольно часто используемый способ вывода значения CSS-свойства на странице сайта. Вот необходимый синтаксис:

По умолчанию для списка используются арабские цифры. Но style можно изменить:

styleрезультат
default1, 2, 3…
upper-alphaA, B, C…
lower-romani, ii, iii…

Все варианты стилей списков находятся здесь.

Несколько счетчиков на одной странице

Можно использовать несколько счетчиков на одной странице, просто присвоив им разные имена.

Вложенные счетчики

Как создавать вложенные списки? Нет ничего проще: просто укажите counters вместо counter в качестве аргумента свойства content . У counters есть дополнительный параметр:

Параметр string определяет формат разделителя.

stringрезультат
”.”1.1, 1.2, 1.3…
”>”1>1, 1>2, 1>3…
“:”1:1, 1:2, 1:3…

Посмотрим на пример:

Counter vs

Выбираем ol

CSS-свойство counter не замещает HTML-тег

    . Если перед нами нумерованный список, всегда необходимо выбирать

      , так как это семантически верно и повышает доступность контента для поисковых систем:

    Выбираем counter

    Делаем выбор в сторону counter , если необходимо создать нумерованные заголовки h1. h6 разделенные контентом p :

    Совместимость с браузерами

    CSS-свойство counter поддерживается значительным количеством браузеров, в том числе Internet Explorer 8.

    Более подробную информацию можно получить на caniuse.com.

    Источники информации

    1. MDN: counters
    2. MDN: list-style-type
    3. w3schools: CSS counter-increment
    4. w3schools: CSS counter-reset
    5. CSS Tricks: counter-increment
    6. CSS Tricks: counter-reset
    7. 30 Seconds of CSS
    8. Counters and Calc(): Two Little-Known CSS Features Explained
    9. The Accessibility of ::before and ::after
    10. Accessiblity support for CSS generated content

    Спасибо за внимание.

      • frontend
      • css
    голоса
    Рейтинг статьи
Ссылка на основную публикацию
Adblock
detector