Результаты опроса

Практически всё время в опросе лидирует Symbian. Это можно объяснить массовостью данной операционной системы. На втором месте прочно закрепился Android. Чуть дальше от лидеров расположилась iOS. Собственно с самими голосами я сделать ничего не могу, но я могу узнать какой процент посетителей пользуется интернетом со своих смартфонов?

Доля мобильных устройств среди посетителей блога не велика — всего 2.4%

Процент посетителей с мобильных устройств

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

Распределение устройств по маркам

Если посмотреть на отчет за месяц по операционным системам, то яндекс также отдаёт пальму первенства iOS.

Большой отчет от яндекса по версиям ОС

Но если взглянуть на такой же отчет за тот же период от Google, то можно заметить, что гугл ставит своё детище на первую строчку.

Отчет по операционным системам от Google

Кто бы ни был прав, но одно точно ясно – с устройств под управлением OS Symbian на мой блог заходят крайне редко. Это позволяет сделать вывод, что чаще всего смартфоны на симбиане не используются для сёрфинга в сети, в отличие от яблочных устройств и аппаратов на андройде.

Постановка задачи

Необходимо написать ёлку, которая по мере приближения нового года будет становиться зеленее. Под ёлкой должен быть таймер, который бы отсчитывал время до нового года.

Поиск решения

Я решил не оформлять это всё плагином, т.к ёлка всего лишь временный элемент оформления. Отделять логику от представления это конечно хорошо, но времени на освоение процесса написания плагинов к WordPress’у меня не было.

Самый простой вариант – вывести ёлку средствами PHP, а для анимации и таймера использовать jQuery. Это тоже не самое оптимальное решение, т.к. использовать фреймворк весом в 70 КБ ради экономии пары строчек кода – плохая практика. Зато время написания скриптика заметно сократилось.

Часть первая – Подготовка картинки

По изначальному замыслу ёлка должна была заполняться снизу вверх. Самый простой вариант – сделать две картинки и играться с их размерами.

Для ускорения процесса была найдена картинка из набора бесплатных иконок. Затем средствами графического редактора картинка была обесцвечена. В итоге получили два файла одинаковых размеров: для цветной ёлки и для чёрно-белого варианта.

Часть вторая – Логика на PHP

Ёлка должна нормально выводиться еще до того момента, когда загрузится jQuery, т.к. JS включен не у всех.

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

Сначала я думал средствами PHP менять размер ёлки раз в день, а потом уже на JS потихоньку заполнять исходя из таймера. Но потом решил что процент заполнения картинки будет считаться на основе часов, оставшихся до нового года, т.к.люди у меня всё равно записи долго не читают и не заметят анимированного изменения ёлки.

Размер моей картинки по высоте – 207 px. В верхней части у неё есть черная граница высотой 5 px, которая не изменит свой цвет. Менять будет 202px картинки. В декабре 744 часа, именно это количество мы возьмём за 100%.

if(date(n) == 12){
  $imageSize = round((202/100)*(100 - (744 - date(j)*24)/(744/100)));//высчитываем размер картинки
}else{
  $imageSize = 207;
}


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

Теперь нужно разобраться с таймером. Выводить обычный цифровой таймер скучно, гораздо интереснее видеть адаптированный для русского человека текст. Но для этого нужно уметь склонять слова. Для этого воспользуемся простой функцией, которая выложена во множестве мест в сети.

function declension($n,$string=array('день','дня','дней')){//функция для склонения подписей
  $n = abs($n) % 100;
  $n1 = $n % 10;
  if ($n > 10 && $n < 20) return $string[2];
  if ($n1 > 1 && $n1 < 5) return $string[1];
  if ($n1 == 1) return $string[0];
  return $string[2];
}


Ей достаточно передать число и три склонения для описания этого числа. Вот так это будет выглядеть у нас в коде.

if(date(j) != 1 and date(n) != 1){
  //высчитываем числа
  $dayLeft = 31 - date(j);
  $hoursLeft = 23 - date(G) - 3;
  $minutesLeft = 59 - date(i);
  $secondsLeft = 59 - date(s);
        
  //создаём подписи
  $daySign = declension($dayLeft,$string=array('день','дня','дней'));
  $hoursSign = declension($hoursLeft,$string=array('час','часа','часов'));
  $minutesSign = declension($minutesLeft,$string=array('минута','минуты','минут'));
  $secondsSign = declension($secondsLeft,$string=array('секунда','секунды','секунд'));
}else{
  $congratulation = "С новым 2011 годом!";
}


Тут есть один нюанс. Функция date() возвращает время на сервере. И если дома у меня всё было хорошо, то у хостера время не совпадает с московским. А я хочу чтобы стартовым временем было именно московское. Поэтому из переменной $hoursLeft я вычитаю разницу в три часа.

Часть третья – Выводим HTML и CSS

С HTML всё просто. Для ёлки делаем для вложенных слоя. Для таймера отдельный слой внизу.

<div id="new-year-back-box">
  <div id="new-year-image-td">
    <div id="new-year-image">&nbsp;
    </div>
  </div>
  <div id="new-year-text">
    <p>
      <?if(!isset($congratulation)){?>
        До нового года:</p>
        <p>
          <span id="dayLeft" class="number"><?=$dayLeft?></span> <span id="daySign"><?=$daySign?></span>
          <span id="hoursLeft" class="number"><?=$hoursLeft?></span> <span id="hoursSign"><?=$hoursSign?></span>
        </p>
        <p>
          <span id="minutesLeft" class="number"><?=$minutesLeft?></span> <span id="minutesSign"><?=$minutesSign?></span>
          <span id="secondsLeft" class="number"><?=$secondsLeft?></span> <span id="secondsSign"><?=$secondsSign?></span>
      <?}else{
        echo $congratulation;
      }?>
    </p>
  </div>
</div>


C CSS всё также просто. Высчитанный ранее размер картинки используется в стиле для цветной каритнки #new-year-image в качестве высоты. Тут же ей задаётся отрицательный верхний отступ.

<style>
  #new-year-back-box{
    margin-top:10px;
    width:200px;
    background:url(/*путь к картинке*//chrtree-gray.png) center top no-repeat;
    border:0px;
    font-size:16px;
  }
          
  #new-year-image-td{
    position: relative;
    height:207px;
    text-align:center;
  }
          
  #new-year-image{
    position: absolute;
    height:<?=$imageSize?>px;
    width:160px;
    background:url(/*путь к картинке*//chrtree-color.png) center -<?echo (207 - $imageSize)?>px no-repeat;
    bottom:0px;
    left:20px;
  }
          
  #new-year-text{
    text-align:center;
  }
          
  .number{
    font-size:20px;
  }
</style>


Собственно, с этого момента мы уже можем посмотреть на ёлку, вот только таймер не двигается.

Часть четвёртая – Оживляем таймер с помощью jQuery

Т.к. за день ёлка заполнится только на 7px, то нет смысла анимировать процесс заполнения картинки. Он будет незаметен для пользователя, но таймер нам нужен.

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

<script>
  $(document).ready(function(){
    var date = new Date();
    if(date.getMonth() == 11){
      setInterval(refreshTime, 1000);
    }
  });
          
  var NYDate = new Date("1 Jan 2011 00:00");
          
  function refreshTime(){
    var date = new Date();
    var leftTime = NYDate - date;
            
    var dayLeft = Math.floor(leftTime/86400000);
    var hoursLeft = Math.floor(leftTime/3600000) - 24*dayLeft;
    var minutesLeft = Math.floor(leftTime/60000) - 1440*dayLeft - 60*hoursLeft;
    var secondsLeft = Math.floor(leftTime/1000) - 86400*dayLeft - 3600*hoursLeft - 60*minutesLeft;
            
    var daySign = declension(dayLeft,['день','дня','дней']);
    var hoursSign = declension(hoursLeft,['час','часа','часов']);
    var minutesSign = declension(minutesLeft,['минута','минуты','минут']);
    var secondsSign = declension(secondsLeft,['секунда','секунды','секунд']);
            
    $('#dayLeft').html(dayLeft);
    $('#daySign').html(daySign);
    $('#hoursLeft').html(hoursLeft);
    $('#hoursSign').html(hoursSign);
    $('#minutesLeft').html(minutesLeft);
    $('#minutesSign').html(minutesSign);
    $('#secondsLeft').html(secondsLeft);
    $('#secondsSign').html(secondsSign);
  }
          
  function declension(n,string){//функция для склонения подписей
    var n = Math.abs(n) % 100;
    var n1 = n % 10;
    if (n > 10 && n < 20) return string[2];
    if (n1 > 1 && n1 < 5) return string[1];
    if (n1 == 1) return string[0];
    return string[2];
  }
</script>


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

На этом всё.

Старый шаблон для архива

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

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

Оказалось, что таких методов нет, а это значит что всё нужно было написать самостоятельно. Это оказалось несложной задачей решавшейся в два запроса к БД.

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

Количество посетителей моего сайта (отчет Google Analytycs)

Выбор площадки

В качестве площадки логично было выбрать кого-то из основных игроков рынка: Яндекс.Директа, Google AdSense или Бегуна. Яндекс ставит жесткие требования к сайтам, попадающим в его рекламную сеть – не менее 300 посетителей в сутки. Я такой аудиторией похвастаться до сих пор не могу, поэтому выбор был сужен до двух площадок.

Зарегистрировавшись на обоих проектах, я решил отдать предпочтение Google. Т.к. по объявлениям из Бегуна за две недели в июле так никто и не кликнул.

Выбор типа объявления

В качестве формата объявления я выбрал горизонтальный блок 468×60 графика/текст. Первой причиной такого выбора был неудачный опыт с вертикальным блоком бегуна в боковом меню. Второй причиной стала возможность размещения графических баннеров в этом блоке, не знаю почему, но мне эта опция понравилась.

Размещение рекламного места

С начала августа по конец сентября рекламное место выводилось сразу под заголовком записи. Потом я решил, что не очень хорошо мозолить глаза посетителям и переместил объявление сразу после текста статьи. Логика простая – если объявление совпадает с тематикой статьи, то народ захочет по нему тырнуть только после прочтения текста.

Результаты по итогам 4 месяцев

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

Количество показов рекламного блока и доход за день

Из графика можно понять, что по объявлениям на моём сайте кликают примерно раз в 3 дня. При этом в последнее время кликать совсем перестали.

Доход за отчетный период по месяцам

В итоге имеем доход в два буржуйских доллара в месяц. Много это или мало? Я считаю, что мало.

Итоги

Главный вывод, который можно сделать из этого эксперимента – монетизировать без телодвижений блоги без тематики невозможно. Но и придерживаться одной тематики я не хочу, т.к. это скучно и неинтересно. Блог ведь не для денег создавался.

Второй вывод – при небольшом количестве посетителей контекстная реклама ничего не даёт, а только отвлекает от контента. В скором времени я её уберу с сайта.

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

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

Сейчас скриптик умеет немного и содержит кучу ошибок, но у меня есть целое лето чтобы его улучшить. К выходным я попробую решить проблемы вёрстки под IE6 и IE7. Пока что мне было не до них. В нормальных браузерах все работает.

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

Протестировать скриптик можно здесь. Жду предложений, замечаний и пожеланий.

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

Чтобы получить аватарку вам не нужно регистрироваться везде, где вы отписываетесь. Вы и так вводите достаточно данных для идентификации. Стоит один раз настроить себе Глобально Распозноваемый Аватар (Gravatar) и к каждому вашему комментарию будет автоматически подставляться картинка, которую вы подгрузили. Ссылка для регистрации (там всё очень просто)

Так выглядят аватарки в комментариях

Большинство блогов на WordPress по-умолчанию используют в качестве аватарок Gravatar или, если его нет, просто подставляют стандартную картинку WordPress (или нестандартную из галереи). Если вы всё время вводили один и тот же e-mail, то все ваши комментарии на всех сайтах WordPress автоматически обретут новый аватар.

Вливаемся

И не просто считаться, а в некоторых случаях даже ориентироваться. На нашем рабочем сайте доля пользователей IE6 – 26%

Распределение пользователей по обозревателям на нашем рабочем сайте

По данным других сервисов статистики и того больше – до 40%. Этот огромный процент никогда не узнает о том, каким красивым может быть интернет (по крайней мере в рабочее время). И именно из-за них не хочется использовать на сайте CSS2.1, не говоря уже о грядущем CSS3.

Но не всегда пользователи вольны выбирать браузер. На многих организациях смена браузера смертный грех, запрещённый политикой безопасности. Эти пользователи еще не скоро познают прелести современных обозревателей, и своим присутствием долго будут продлять жизнь IE6.

На моём сайте статистика лучше:

Распределение пользователей по обозревателям на сайте murzix.ru

Доля пользователей IE6 всего 7%. Но и эти 7% должны иметь возможность просмотреть мой сайт. А значит, его нужно как-то протестировать под этим обозревателем.

В операционных системах Windows Vista и Windows 7 IE6 установить не удастся. Но есть замечательнейшая программка, которая значительно упрощает жизнь – IETester

Она позволяет рассмотреть свой сайт во всех версиях Internet Explorer с 5.5 до 8. При этом работает очень шустро, и имеет отдельную кнопочку для обновления сайта без кеша (что очень удобно)

Программа IETester

Пользуемся!

P.S. У меня, например, в IE6 подпись сайта убегает вправо. В выходные поправлю.

Как читать?

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

Что читать?

Именно поэтому хочу пропиарить очень хорошую и понятную книжку. Называется она «СSS каскадные таблицы стилей — Подробное руководство» автор Эрик А. Мейер.

На обложке имеется маркировка: уровень подготовки читателей — средний, но это не так. Это руководство написано очень хорошим и доступным языком. Любой поверхностно знакомый с HTML человек сможет освоить CSS с помощью этой книжки.

Не смотря на свою доступность это очень подробное руководство. Оно является необходимым и достаточным для понимания принципов позиционирования, перемещения, работы со шрифтом, блоками, строками и замещаемыми элементами.

На страницах автор предупреждает о возможных проблемах с некоторыми версиями браузеров и об истории возникновения этих проблем. Полезность таких комментариев трудно переоценить.

Эрик А. Мейер - СSS каскадные таблицы стилей – Подробное руководство

Где купить?

Книжка стоит не очень дорого, если знать места. В буквоеде техническая литература стоит очень дорого Вот пример: эта книжка в буквоеде, и она же в books.ru Выбор очевиден.

Или скачать?

Недавно на хабре выложили электронную версию этой книги. Рекомендую качать только в том случае, если вы бедный студент. Ссылка для скачивания — 7.7 mb

P. S. вот прочитал, теперь хочется переписать дизайн своего блога, найти бы на это время.