За последний месяц я прикрутил к блогу три новые фишки. Все они связаны с навигацией, причем первые две нацелены на разные типы устройств (прямо как в лучших традициях последних изменений в новейшей Windows :)

Я тут поймал себя на мысли, что настройке и расширению своего блога на WordPress я уделяю намного больше времени, чем Windows :) С одной стороны, ее настройки из коробки вкупе с набором ПО меня уже давно устраивают. С другой же, я делаю блог не только для себя, но и для вас, что повышает планку и добавляет интереса.

[+] Сегодня в программе

MaSha: Mark + Share

У меня много больших статей, поэтому я уделяю особое внимание навигации по ним. Уже давно в начале каждой записи присутствует содержание со ссылками на разделы. Я редко включаю в содержание заголовки четвертого уровня, но их якоря вы все равно можете увидеть с помощью букмарклета NamedAnchors.

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

Если вы нажали любую из двух ссылок выше, то уже увидели в деле фишку, на которую я недавно наткнулся на сайте президента РФ. Наверное, она попадалась мне раньше, но идея прикрутить ее к блогу родилась только в этот раз.

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

Теперь можно сослаться не только на начало раздела статьи, но и на конкретный его фрагмент.

Сформированная ссылка служит якорем, т.е. при переходе по ней страница автоматически прокручивается к заданному фрагменту текста, который для удобства выделяется цветом.

Где это работает

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

Просмотр ссылки работает в настольных и мобильных браузерах при включенном JavaScript.

Наличие фишки зависит от владельца сайта, но даже если она не реализована, еще не все потеряно.

Например, для Chrome есть расширение Yellow Highlighter Pen, хотя бесплатная версия при переходе по ссылке наряду с выделением текста выводит рекламный «тултип».

Если вы знаете другие решения, расскажите о них в комментариях.

Компактное мобильное меню

Оптимизация под мобильные устройства стала одной причин смены оформления блога полгода назад. Записи и раньше вполне можно было читать со смартфона, но адаптивный дизайн темы оформления добавил комфорта этому приятному занятию. Но одна проблема сразу бросалась в глаза – посетителя встречало навигационное меню во весь маленький экран мобильного устройства (на картинке слева).

В свое время я немало поковырялся с заголовком сайта и меню, поэтому решение этой некритичной задачи поставил в “TODO”, также известное как «долгий ящик» :) Кстати, у происхождения этого фразеологизма есть две интересные версии.

Сейчас, наконец-то, дошли руки до складного меню (на картинке справа). С помощью CSS оно активируется при определенной ширине экрана, а за открытие пунктов отвечает jQuery.

Где это работает

Меню работает в мобильных и настольных браузерах при разрешении экрана или ширине окна менее 768px (JavaScript должен быть включен). Другими словами, вы можете просто сузить окно браузера, чтобы увидеть меню в действии.

Новая классификация по версиям ОС

Особо внимательные завсегдатаи блога могли заметить, что вместо Windows 8 и Windows 7 в главном меню теперь единая рубрика Windows. Раньше я использовал рубрики, чтобы разделять статьи по версиям операционных систем. Это порождало ряд мелких проблем, даже если они не были видны или понятны снаружи.

В итоге я решил создать для классификации по версиям ОС свою таксономию, которая отображается в конце статьи рядом с метками. Рубрики и метки тоже являются таксономиями, поэтому новая система выглядит и работает аналогично.

В рубрику Windows входят все материалы о разных версиях ОС Microsoft, но сведения о применимости к той или иной версии указаны только для технических руководств и рассказов о конкретных возможностях систем. Например, размышления о будущем Windows или роли головного мозга не содержат инструкций, а посему дополнительно не классифицируются.

В блоге есть материалы, которые применимы только к одной версии ОС, но в большинстве своем мои записи покрывают сразу несколько поколений Windows.

Классификация обозначает применимость конкретного материала к продукту, и в первую очередь несет информационную нагрузку.

Однако параллельно появляется возможность отобразить несколько новых классов статей:

• Windows 7 и новее содержит либо руководства «все в одном», либо «вечнозеленые» статьи о функциях, которые не изменялись с Windows 7.
• Windows 8 и новее включает все технические статьи, актуальные для новейшей версии Windows, и будет особенно полезна тем, кто только что перешел на нее с Windows 7 или XP.
• Windows 8.1 и новее позволяет сходу увидеть исключительно новые фишки Windows 8.1, о которых есть рассказы в блоге.

Специально для двух читателей с Windows Vista сообщаю, что старые записи исключительно об этой ОС не попали в новую классификацию, но из рубрики Windows слова не выкинешь :)

Ваши замечания и пожелания

Если вы обнаружили проблему в работе новых функций, пожалуйста, сообщите в комментариях, указав устройство, разрешение экрана, браузер и его версию. Однако перед этим обязательно обновите страницу (в «десктопных» — нажмите Ctrl + F5), а также проверьте работу в браузере, запущенном без дополнений.

Если у вас есть пожелания по функциональным возможностям блога, сегодня отличный повод их выразить!