На самом деле M/Monit в отличии от Monit утилита платная, но на официальном сайте доступна бесплатная версия с ограниченным функционалом.
Давайте теперь подробно рассмотрим ее установку и настройку. Для этого создадим временную папку, скачаем архив с нужной нам версией, распакуем и скопируем в рабочую директорию (актуальную версию можно найти здесь: http://mmonit.com/dist/):

# mkdir ~/distr/mmonit
# cd ~/distr/mmonit
# wget http://mmonit.com/dist/mmonit-2.1.1-linux-x86.tar.gz
# tar -xvf mmonit-2.1.1-linux-x86.tar.gz
# cd mmonit-2.0.3
# ls
bin  CHANGES  conf  db  doc  docroot  lib  logs  README  upgrade
# mkdir /usr/local/mmonit
# cp -R * /usr/local/mmonit
# chmod -R 0700 /usr/local/mmonit

Теперь нам необходимо создать базу данных и импортировать туда необходимые приложению данные. В папке /usr/local/mmonit/db/ лежат дампы для четырех типов баз данных. Мы рассмотрим случай с MySQL.
Итак, создадим таблицу и выполним команды из дампа:

# mysql -u yore_username -p
mysql> CREATE DATABASE `mmonit`;
mysql> use mmonit
mysql> source /usr/local/mmonit/db/mmonit-schema.mysql
mysql> quit

После того как мы подготовили к использованию базу данных перейдем к редактированию конфигурационного файла M/Monit /usr/local/mmonit/conf/server.xml .

<Service>
    <!-- IP адрес интерфейса, на котором мы сможем получить доступ к админке -->
    <Connector address="IP.FROM.ALLOW.ACCESS" port="8080" processors="10" />
    <Engine name="mmonit" defaultHost="localhost" fileCache="10MB">
        <!-- настраиваем подключение к базе -->
        <Realm url="mysql://DB_USER:DB_PASSWORD@DB_HOST/DB_NAME"
             minConnections="5"
             maxConnections="25"
             reapConnections="300" />

Сохраняем конфиг и запускаем /usr/local/mmonit/bin/mmonit, заходим по адресу http://IP.FROM.ALLOW.ACCESS:8080 . По умолчанию логин/пароль – admin/swordfish (настоятельно рекомендуется изменить пароль сразу после первого входа в систему;) ).

Теперь нам обязательно нужно настроить сервис Monit хотя бы на одном сервере, чтобы было с чего собирать статистику. Для этого открываем файл конфигурации Monit: /usr/local/etc/monitrc.d/main.conf вашим любимым редактором и дописываем в начало следующие две строчки:

set httpd port 2812 and use address XXX.XXX.XXX.XXX # где XXX.XXX.XXX.XXX – адрес интерфейса, через который MMonit будет осуществлять доступ к monit.
allow monit:your_strong_password

Сохраняем конфиг, перезапускаем monit. Входим под админом в web-интерфейс M/Monit, открываем страницу Admin->Hosts->”Add a new host”. Заполняем информацию о сервере, состояние которого будем мониторить:
Host Name – название сервера (выбираем имя для нашего удобства),
IP-address, Monit Port – XXX.XXX.XXX.XXX и 2812 указанные в /usr/local/etc/monitrc.d/main.con,
Monit user name, Monit password из того же конфига.
Сохраняем изменения.

Чтобы увидеть информацию о состоянии сервера, нужно всего-лишь кликнуть по его имени в списке серверов на странице Admin->Hosts.

В следующей статье я более детально опишу, как сконфигурировать отчеты о состоянии серверов и как создать файлы для запуска/остановки/перезапуска/проверки статуса сервисов Monit и M/Monit.

Теперь должно быть все просто, мы задаем родительскому блоку фиксированную ширину, position: relative (для того, чтобы мы могли абсолютно позиционировать блок с текстом относительно текущего), overflow: hidden (для того, чтобы “бегущий” текст скрывался за границами родительского блока). Далее пишем скрипт, который отодвигает текст вправо на ширину родительского блока (теперь он не видим) и потом перемещает его влево с заданной скоростью, пока текст не скроется полностью. И повторяем это действие снова и снова =).
Для того, чтобы рассчитать момент, когда текст полностью скроется за левой границей, нам нужно узнать настоящую ширину блока с текстом. Если наш текстовый блок будет содержаться в marquee_container с заданной шириной, скрипт нам покажет ширину не больше нами заданной. Поэтому нам нужен еще один блок (marquee_subcontainer). Зададим ему ширину width:9999999px, и поместим в него текстовый блок. Теперь проблема с определением ширины решена.

Составим HTML код бегущей строки:

<div class="marquee-container" id="marquee_container">
    <div class="marquee-subcontainer" id="marquee_subcontainer">
        <div class="marquee-text" id="marquee_text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
    </div>
</div>

Теперь составим таблицу CSS стилей в соответствии с нашими рассуждениями:

.marquee-container {
    position: relative; /* см. UPD 1 */
    border-right:1px dotted #d8cfc2;
    height:30px;
    width:200px;
    overflow: hidden;
    border:2px solid #f00;
    margin:0px auto;
}

.marquee-subcontainer {
    position: relative;
    width:9999999px;
    height:30px;
    margin:0px;
}

.marquee-text {
    position: absolute;
    margin: 0px;
    top:0px;
    left:0px;
    height:30px;
    font: bold 16px Arial Georgia;
    color:#000;
}

Когда все предварительные приготовления сделали, можно приступить к написанию JS кода.

// текущий сдвиг текста относительно левой границы блока бегущей строки
var craw_line_offset;

// функция инициализации бегущей строки
function enableCrawLine () {
    craw_line_offset = 0;

    // ширина текстового блока
    var craw_line_width = document.getElementById('marquee_text').offsetWidth;

    moveCrawLine (craw_line_width);
}

// функция пошагового сдвига
function moveCrawLine (w) {
    var lefttime;
    var container_width = document.getElementById('marquee_container').offsetWidth;
    // шаг (в пикселях), с которым будем перемещать текст
    var step = 1;
    // задержка между перемещениями на step пикселей
    var tdelay = 50;

    // ширина текстового блока
    w = parseInt(w);

    // если блок не "заехал" за левую границу
    if (craw_line_offset<(w+container_width)) {
        // сдвигаем блок на шаг влево
        craw_line_offset = craw_line_offset + step;
    } else {
        // иначе начинаем все с начала
        craw_line_offset = 0;
    }

    // изменяем позицию текстового блока
    document.getElementById('marquee_text').style.left = parseInt(container_width-craw_line_offset)+'px';

    // рекурсивно вызываем функцию сдвига с заданной задержкой
    setTimeout('moveCrawLine ('+w+');', tdelay);
}

// вызов инициализирующей функции
enableCrawLine ();

Теперь можем ознакомиться с рабочим примером.

UPD 1: В IE6 не корректно срабатывал overlow: hidden для родительского блока. Дочерний див с position:absolute отображался полностью, не зависимо от границ родительского блока. Оказалось нужно просто добавить свойство position: relative и блоку с overflow:hidden.

1. UUID - определяет устройство, которое должно быть примонтировано (идентификатор диска).
2. Каталог, в который монтируется файловая система.
3. Тип файловой системы (например: vfat - FAT32).
4. Опции, показывающие как эта файловая система будет обрабатываться. Например:
   • “default” – означает, что они монтируются автоматически, доступны для чтения и записи с асинхронным I/O (вводом/выводом);
   • -r – монтировать с доступом только на чтение;
   • -d[r] – удаленный ресурс.
5. Флаги, относящиеся к файловой системе. Первая цифра, 0 или 1, показывает, должна ли система копироваться при помощи команды dump (это нужно для системных резервных копий). Вторая цифра может быть 0, 1 или 2, она показывает порядок, в котором файловая система должна быть проверена при загрузке.
   • 0 – не должна проверяться вовсе;
   • 1 – должна проверяться первой и использоваться как корневая (/);
   • 2 – ставится для всех остальных систем.

Поля отделяются друг от друга пробелами. Строки, начинающиеся с символа #, являются комментариями. Пустые строки игнорируются.
Пример строки:

# /dev/sda1 UUID=9877-489A    /media/sda1     vfat     defaults, utf8, umask=007, gid=46     0 0

Некоторые системы (Ubuntu например) в /etc/fstab вместо названий устройств (/dev/hda1, /dev/hda2, etc) используется UUID.
Чтобы узнать UUID нашего нового hdd выполняем команду:

ls -l /dev/disk/by-uuid/

Super Cache после установки и активации попросит нас сделать .htaccess доступным для записи или записать в него следующие правила:

# BEGIN WPSuperCache
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
AddDefaultCharset UTF-8
RewriteCond %{REQUEST_METHOD} !=POST
RewriteCond %{QUERY_STRING} !.*=.*
RewriteCond %{HTTP:Cookie} !^.*(comment_author_|wordpress|wp-postpass_).*$
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{DOCUMENT_ROOT}/wp-content/cache/supercache/%{HTTP_HOST}/$1/index.html.gz -f
RewriteRule ^(.*) /wp-content/cache/supercache/%{HTTP_HOST}/$1/index.html.gz [L]
RewriteCond %{REQUEST_METHOD} !=POST
RewriteCond %{QUERY_STRING} !.*=.*
RewriteCond %{HTTP:Cookie} !^.*(comment_author_|wordpress|wp-postpass_).*$
RewriteCond %{DOCUMENT_ROOT}/wp-content/cache/supercache/%{HTTP_HOST}/$1/index.html -f
RewriteRule ^(.*) /wp-content/cache/supercache/%{HTTP_HOST}/$1/index.html [L]
</IfModule>
# END WPSuperCache

Но проблема в том, что все эти правила, как и сам .htaccess, абсолютно бесполезны для nginx`a, так как все rewrite rules прописываются в nginx.conf.

Итак  открываем файл конфигурации nginx.conf, находим

location /путь/к/блогу/ {
...
}

“/путь/к/блогу/” – вот вместо этого, скорее всего, будет стоять просто “/”

и между фигурными скобочками вписываем ряд директив:

gzip_static on;
if (-f $request_filename) {
 break;
}  

set $supercache_file '';
set $supercache_uri $request_uri;  

if ($request_method = POST) {
 set $supercache_uri '';
}  

if ($query_string) {
 set $supercache_uri '';
}  

if ($http_cookie ~* "comment_author_|wordpress|wp-postpass_" ) {
 set $supercache_uri '';
}  

if ($supercache_uri ~ ^(.+)$) {
 set $supercache_file /blog/wp-content/cache/supercache/$http_host/$1index.html;
}  

if (-f $document_root$supercache_file) {
 rewrite ^(.*)$ $supercache_file break;
}  

if (!-e $request_filename) {
 rewrite . /blog/index.php last;
}

Сохраняем и перезапускаем сервер.

P.S. Если мы хотим пользоваться gzip компрессией, то необходимо будет перекомпилировать nginx с параметром “–-with-http_gzip_static_module“.

Для любимого нами огненного лиса (Firefox) средствами JavaScript HTML код необходимо вставлять следующим образом:

     // Блок куда необходимо вставить html контент
    var our_div = document.getElementById('our_div_name');

     // Непосредственно наш контент
    var our_text = 'our html code ...';

     // Получим userAgent браузера
    var ua = navigator.userAgent.toLowerCase();

    if (ua.indexOf("gecko") != -1) {
        // Если браузер Mozilla, или Firefox, или Netscape
        var range = div_preview.ownerDocument.createRange();
        range.selectNodeContents(our_div);

        // Очистим внутренности нашего блока
        range.deleteContents();
        var fragment = range.createContextualFragment(our_text); //<-- dies here

        // Теперь наполним необходимым контентом
        our_div.appendChild(fragment);
    }  else  {
        // Для остальных браузеров
        our_div.innerHTML = our_text;
    }

Стилизация выпадающих списков основывается на замене стандартного элемента html <select>  на маркированный список<ul>, оформленный с помощью CSS необходимым нам образом.

JavaScript перехватывает все события onClick на странице и проверяет не “нажал” ли пользователь на ту или иную область выпадающего списка. Если произошло необходимое событие, и необходимо раскрыть, свернуть или выбрать необходимый элемент, скрипт применяет к элементам маркированного списка соответствующие стили и изменяет выбранное значение исходного выпадающего списка <select> (который был скрыт при загрузке страницы).

Ниже привожу результат стилизации (взят с реального проекта):

Чтобы не загромождать страницу кодом размещаю ссылку на архив с рабочим примером.

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

bool date_default_timezone_set ( string $timezone_identifier);

Список временных зон (параметров для вышеописанной функции) доступен на официальном сайте PHP. Итак, для того чтобы установить нужную нам временную зону, необходимо вызвать функцию date_default_timezone_set в начале исполняемого скрипта.

Для того чтобы определить текущую временную зону в PHP есть стандартный инструмент:

string date_default_timezone_get  ( void  );

О сравнении двух дат я уже упоминал ранее. Далее рассмотрим вычитание и сложение даты и времени или как определить какая дата и время были N дней X часов назад!?

Года полтора назад встречал “интересное” решение. Некий разработчик загнал в массив соответствия “номер месяца”=>”количество дней”, затем парсил текущую дату и “вручную” отнимал или прибавлял количество дней, часов, минут, секунд.  Описывать подробно этот алгоритм не буду, так как не привык изобретать велосипед. Предлагаю “формулу” гораздо проще:

# $sec - разница в секундах с текущим временем;
# $min - разница в минутах с текущим временем;
# $hour - разница в часах с текущим временем;
# $days - разница в днях с текущим временем;
$need_date = date ("Y-m-d H:i:s", time()+( $sec + 60*($min + 60*($hour + 24*$day))));

Где “Y-m-d H:i:s” всего лишь шаблон времени, которое мы получим в текстовом формате.

Для тех, кто хочет узнать не будущее, а прошлое время – необходимо заменить вот этот плюс … time()+( $sec … на минус.

На этой оптимистической ноте заканчиваю описание. Остальные возможности PHP предлагаю рассмотреть самостоятельно на официальном сайте php.net в качестве домашнего задания.

Для начала необходимо выделить в блок сам текст:

<div class="frame"><div id="animation_div"><div id="animate_div">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Donec vestibulum metus et nulla. Etiam at elit.
Nullam id mi eget lorem hendrerit viverra.
Fusce mi pede, tempor vitae, tristique tempus, molestie id, sem.
Cras mauris dolor, accumsan vitae, gravida a, blandit nec, massa.
<br />
Morbi metus libero, pellentesque sed, tristique et, ultrices quis, nunc.
Nunc interdum vulputate sem. Donec laoreet sagittis sapien.
In interdum. Nunc tempus purus faucibus lorem.
Proin fermentum tristique nisi. Proin sed nibh ut purus sollicitudin facilisis.
Fusce imperdiet tincidunt metus. Etiam tempor ante a eros.
Curabitur blandit erat a nisl. Sed elit.
</div></div></div>

Затем оформим соответствующим образом с помощью каскадных таблиц стилей (CSS):

div.frame {
padding: 0px;
margin: 0px;
width: 250px;     /* ширина блока */
border: 1px solid #fcc; /* рамка вокруг блока */
}

#animation_div {
position: relative;
padding: 0px;
margin: 0px;
height: 150px;    /* высота блока */
overflow: hidden;
}

#animate_div {
position: relative;
overflow: hidden;
margin:0px;
padding:3px;
/* стиль для текста внутри блока */
color: #000;
text-align: justify;
font: 10px Arial;
}

После блока в HTML коде необходимо вставить следующий JavaScript:

var oText = document.getElementById("animate_div");
var oContainer = document.getElementById("animation_div");

var nHeight = oText.offsetHeight;
var nPos = oContainer.offsetHeight;

var bScrolling = true;

function OnScrollerMouseOver() {
bScrolling = false;
}

function OnScrollerMouseOut()  {
bScrolling = true;
}

function OnTimer() {
if(!bScrolling)
return;

oText.style.top = nPos.toString() + "px";
if(--nPos < -nHeight)
nPos = oContainer.offsetHeight;
}

OnTimer();

oContainer.onmouseover = OnScrollerMouseOver;
oContainer.onmouseout  = OnScrollerMouseOut;

window.setInterval(OnTimer, 50); /* задержка перед каждым сдвигом */

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

Затем пишем в таблице стилей следующий код, отвечающий за оформление чекбоксов:

.f_checkbox {
background-repeat:no-repeat;
background-position:0px center;
height:16px;display:block;
cursor:pointer;
cursor:hand;
width:20px;
height:20px;
}

.checked,.selected{
color:#ddd;
}

.f_checkbox{
padding:0px;
background-color:#ccc;
}

.unchecked{
background-image:url('img/checkbox_off.gif');
}

.checked{
background-image:url('img/checkbox_on.gif');
}

В коде страницы делаем следующую запись:

<!-- один из оформляемых чекбоксов -->
<label class="f_checkbox"><input type="checkbox" /></label>;
<!-- подключаем скачанные java-скрипты -->
<script type='text/javascript' src='mootools.js'></script>
<script type='text/javascript' src='demo-moo.js'></script>;

checkbox_on.gif и checkbox_off.gif изображения выбранного и не выбранного checkbox`а.

Теперь остается только экспериментировать =)

Для начала создадим тело меню средствами HTML:

<div id="v_menu">
<ul>
	<li><a href="#">Menu item 1</a></li>
	<li><a href="#">Menu item 2/a></li>
	<li><a href="#">Menu item 3/a></li>
	<li><a href="#">Menu item 4/a></li>
</ul>
</div>

Следующим шагом определим размер всего блока меню, границы, внутренние и внешние отступы, тип шрифта, цвет фона и цвет текста.

#v_menu  {
    width: 200px;
    border: 1px solid #000;
    padding: 0 0 0 0;
    margin: 10px 0 0 0;
    font:14px Arial;
    background-color: #90bade;
    color: #333;
}

Теперь определим стили самых списков меню, которые являются элементами списка.

Для всего списка зададим нулевые отступы, уберем границу и маркеры списка.

#v_menu ul {
    list-style: none;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border: none;
}

Для каждого из пунктов меню (элементов списка) зададим размер, тип и цвет нижней границы и нулевой отступ.

#v_menu li {
    border-bottom: 1px solid #90bade;
    margin: 0 0 0 0; }

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

#v_menu li a {
    display: block;
    padding: 5px 5px 5px 5px;
    border: 0px;
    background-color: #2175bc;
    color: #fff;
    text-decoration: none;
    width: 100%;
}

Следующий стиль существует исключительно потому, что свойство display: block не срабатывает для браузера IE под Windows.

html>body #v_menu li a {
    width: auto;
}

Следующий стиль описывает поведение пунктов меню при наведении на них курсора мышки. В данном случае изменяется цвет фона.

#v_menu li a:hover {
    border:0px;
    background-color: #2586d7;
    color: #fff;
}