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

Уже наверное не встретить сайт, который не использует сервисы метрик для лучшего понимания интересов аудитории. Поговорим о правильной установке счетчиков для получения статистики максимально эффективно и с минимальным негативом для самого сайта.

Дело было осенним сырым и серым вечером, когда делать было особо нечего. В голову пришла мысль навеянная паникой SEO-шников по поводу новой ветки языка и идеей касающейся уже пожалуй банальной эмуляции тегов HTML 5, которые не понимают старые браузеры. Собственно идея следующая: создать несколько страниц с минимальным текстом для индексации и оформить это в несуществующие ранее теги. Цель: выяснить отношение поисковика к такого рода документам и способность его(их) индексировать такой контент.

Так уж устроено большинство из нас, что относиться c некоторой долей недоверия ко всему новому это абсолютно нормальная тенденция. Особенно это нормально, когда речь идёт о вынужденной переквалификации. Довольно часто возникают споры о том, что важнее. Технологичный сайт? Красивый сайт? А может не сам сайт важен, а уровень удовлетворённости посетителя и процент конверсии, или же идея? Несомненно, с точки зрения посетителя абсолютно пофигу из чего это сделано и как, но с точки зрения разработчика имеет смыл думать и совершенствовать подходы.

Итак, тот самый нерождённый HTML 5. Почему не таблицы или, уже, хотя бы не блоки? Попробую донести мысль максимально толерантно и объективно.

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

Разметка тега details

  <details>
  <p>какие то подробности</p>

С приходом HTML5 становятся реальными такие вещи, как авто валидация полей заполняемых пользователем силами браузера перед отправкой формы. Помимо стандартных type text и password теперь доступен широкой ассортимент. Реализации подобного рода проверки необходимо указать корректные типы input и затем для наглядности всё красиво оформить. Браузер будет подсказывать какие поля нужно заполнить, соответствуют ли введённые данные критериям и в случае ошибки со стороны пользователя выводить уведомление.

Вы помните, я уже неоднократно писал про различные эксперименты со сниппетами выдачи? Тогда использовалась довольно дубовая, но очень гибкая технологию RDFa. Сегодня время HTML5 и мне больше интересны микроданные. Появление это заметки означает, что мой интерес к Microdata дозрел, экспериментальная площадка подготовлена и будет новая рубрика.

Что же нам нужно? Представим обычную форму комментирования, примерно как на этом блоге. Мы имеем 3 поля содержащие имя автора, его email и адрес домашней странички. Помимо этих полей форма содержит опции «я не спамер» и выборочная подписка на комментарии. Всё было бы отлично, но каждый раз оставляя комментарий, гость блога вынужден заполнять поля и отмечать опции. Нашей целью будет упростить этот процесс. После первого оставленного комментария информация должна автоматически заполняться из Local Storage или Cookies при отсутствии его поддержки, а отмеченные ранее опции включаться и убираться с глаз долой.

В прошлый раз мы создали простенький tooltip на canvas средствами JavaScript, jQuery и CSS. Сегодня мы сделаем так, что наша подсказка будет выдавать реальную информацию о ссылке. Для этой задачи я использовал метод jQuery $.getJSON и небольшой PHP скрипт для парсинга данных Open Graph.

Для реализации такой canvas tooltip мы будем использовать отдельный обработчик на PHP.

Решился я посмотреть что же такое нашумевший canvas HTML5, как он реализуется и для чего может быть использован. Стоит отметить, что технология хоть и интересная, но несколько сырая и не предусматривает некоторых удобств доступных в том же flash и простом CSS+HTML.

Естественно, сам по себе canvas интересен мало, поэтому я решил куда-то его интегрировать, например, для создания tooltipe, которая будет автоматически тянуть описание страницы на которую указывает ссылка.

В этой части познакомимся с самой реализацией и посмотрим как эта штуковина работает.