Переменные

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

private DispatcherTimer timer = new DispatcherTimer();          // main timer
 
private double tileOffset = 0;              // actually, it is a scroll offset
private double tilesWidth = 0;              // total width of all tiles
private double lastMouseXPos = 0;           // remembers last mouse position. needed to calculate scroll direction and speed
private double mouseXPos = 0;               // no comments on these two
private double mouseYPos = 0;               // 
private double mouseInertia = 0;            // determines scroll speed after the mouse button is released. decreases avery timer tick
private UInt64 inertiaStart = 0;            // mouse drag start time in milliseconds
private UInt64 inertiaEnd = 0;              // mouse drag end time in milliseconds
private Boolean isInertiaStopped = true;    // useful flag needed to stop scroll by zeroing `mouseInertia` on next timer tick

Тайлы

Теперь создадим и разместим нашу плитку. В примере она будет простой, однако элементарность всего происходящего позволяет использовать практические любые контролы. Я же использовал Grid как простой и удобный элемент, который, к тому же, может служить контейнером для других контролов, а это уже открывает хорошие возможности для кастомизации.
Размещать вновь создаваемые Grid'ы мы будем на основной сетке чистого приложения, любезно созданного для нас средой разработки. Для этого надо присвоить ей имя, например, 'tilesGrid'.
Накрапаем простенькую функцию, в которой будем создавать новый Grid, задавать его параметры, и размещать его на основной сетке:

private void AddTile(int i)
{
  // grid is one of the simplest WPF controls, but also it's a convinient one,
  // because it can be customized, manipulated and can be a container for other controls
  Grid g = new Grid();
  g.Width = 128;
  g.Height = 128;
  g.Margin = new Thickness(5 + tilesWidth, 0, 0, 0);
  g.Background = new SolidColorBrush(Color.FromRgb((byte)(i*120), (byte)(i*110), (byte)(i*130)));     // some "random" background color
  g.VerticalAlignment = VerticalAlignment.Top;
  g.HorizontalAlignment = HorizontalAlignment.Left;
  tilesGrid.Children.Add(g);                                  // placing new element into main grid
  g.Effect = new DropShadowEffect{Color = new Color {A=1,R=0,G=0,B=0},ShadowDepth = 2,BlurRadius = 5,Opacity = 1};    // simple effect to make our tiles look sweet
 
  Label l = new Label();                                      // actually, this label is not necessary
  l.Content=i.ToString();                                     // i'm placing it to make visual counting
  g.Children.Add(l);                                          // of tiles a little bit easier
 
  tilesWidth = tilesWidth + g.Width+5;                        // we're updating total tiles's width to arrange them correctly directly after creation
}

Поместим на сетку двадцать пять тайлов:

public MainWindow()
{
  InitializeComponent();
  for (int i = 0; i < 25; i++) AddTile(i + 1);          // we'd like to create 25 tiles
}

Размещение тайлов

Естественно, плитку нужно красиво разместить. Для этого создадим отдельную функцию, которая будет вызываться при каждом срабатывании таймера, и размещать тайлы в две строки слева направо, а также сдвигать их в соответствии со смещением скролла. Приведенная функция проста, и, вероятно, неказиста. Я знаю, что было бы великолепно использовать здесь алгоритм из задачи «о рюкзаке», но на столь изощренное велосипедостроительство у меня, к сожалению, нет времени. Поэтому мы действуем «в лоб»: перебираем все дочерние элементы основной сетки, и размещаем наши гриды один за другим, периодически наращивая счетчик столбцов, от которого зависит верхний отступ тайла. Сложностей здесь нет никаких, потому что мы строго задали размеры тайлов при инициализации, и в вычислениях просто используем эти цифры.

private void LayoutTiles()
{
  // simplest layout algorithm ever! (:
  // tiles are arranged in two rows with margin of 5 pixels
  if (tilesWidth <= 0) return;                                        // if total tiles's width less then the main grid's with, do nothing
  tilesWidth = 5;                                                     // set the initial offset of default margin (5 px)
  int count = 0;                                                      // columns count
  int totalCount = 0;                                                 // total tiles count
  for (int i = 0; i < tilesGrid.Children.Count; i++)                  // loop through main grid's children
  {
    Object obj = tilesGrid.Children[i];
    if (obj.GetType() == typeof(System.Windows.Controls.Grid))      // checking children type. we need only Grids. any other objects remains untouched
    {                                                               // this condition must be modified to your needs
      totalCount++;
      Grid rect = (Grid)obj;
      if (i % 2 == 0)
        rect.Margin = new Thickness(tileOffset + 5 + 133 * count, 5, 0, 0);     // 
      else                                                                        // setting current tile margin according to scroll offset 
      {                                                                           // and column number our tile is placed in
        rect.Margin = new Thickness(tileOffset + 5 + 133 * count, 138, 0, 0);   //
        count++;                                                                // increase column count
      }
    }
  }
  tilesWidth = 133 * count - tilesGrid.ActualWidth + 5;               // set total width to number of columns minus main grid's width
  if (totalCount % 2 != 0) tilesWidth += 133;                         // increase it by one column if we have odd number of tiles
}

Скроллинг перетаскиванием

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

private void TileMouseDown(object sender, MouseButtonEventArgs e)
{
  if (e.LeftButton == MouseButtonState.Pressed)                       // do anything only if left mouse button is pressed
  {
    Grid rect = (Grid)sender;
    mouseXPos = rect.PointToScreen(e.GetPosition(rect)).X;          // save current mouse position
    mouseYPos = rect.PointToScreen(e.GetPosition(rect)).Y;          // relatively to screen
    lastMouseXPos = mouseXPos;                                      // update last mouse position on x-pos (we'll need it later)
    mouseInertia = 0;                                               // reset the scrolling speed
    TimeSpan span = DateTime.UtcNow - new DateTime(1970, 1, 1);     // and save scrolling start time in milliseconds
    inertiaStart = (UInt64)span.TotalMilliseconds;                  // (we really need it to be so precise)
  }
}

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

private void TileMouseMove(object sender, MouseEventArgs e)
{
  if (tilesWidth + Width > Width)                                             // check if tiles don't fit into window
    if (e.LeftButton == MouseButtonState.Pressed)                           // and do somenthing only if left mouse button is pressed
    {
      Grid rect = (Grid)sender;
      if ((mouseXPos < rect.PointToScreen(e.GetPosition(rect)).X - 5) ||  // have mouse moved more than 5 pixels on x-axis?
          (mouseXPos > rect.PointToScreen(e.GetPosition(rect)).X + 5))    // strart scrolling if she did
      {
        double diff = (lastMouseXPos - rect.PointToScreen(e.GetPosition(rect)).X);  // compute the distance she traveled since last iteration
        lastMouseXPos = rect.PointToScreen(e.GetPosition(rect)).X;      // and save current position to use it next time
        tileOffset -= diff;                                             // change tile scroll offset
        if (tileOffset > 0) tileOffset = 0;                             // restrict excess scrolling to the left
        if (tileOffset < -tilesWidth) tileOffset = -tilesWidth;         // and right
        LayoutTiles();
      }
    }
}

Последний «мышиный» обработчик вызывается, когда пользователь отпустил кнопку мыши, и нам надо решить — клик это был или завершение перетаскивания. Для этого используются координаты мыши, сохраненные в последний раз, и, если они отличаются не больше, чем на 5 пикселей, засчитываем клик, если нет — завершаем перетаскивание и вычисляем переданное ускорение.
Как я говорил в начале этой статьи, рассмотрим необходимость существования булевой переменной `isInertiaStopped`. Она может показаться не нужной, потому что (как вы поймете из кода ниже) можно было бы просто обнулять скорость скроллинга. Однако парой лишних строчек мы добавили очень важный функционал — пользователь будет иметь возможность остановить прокрутку без вызова обработчика «клик». Т.е. он сможет остановить скроллинг, понять, что же он видит, и уже потом кликнуть по нужному тайлу, обработчиком на клик по которому может быть запуск приложения, открытие дочерней формы или вообще самоуничтожение программы со смешным описанием исключения.

private void TileMouseUp(object sender, MouseButtonEventArgs e)
{
  if (e.LeftButton == MouseButtonState.Released)                      // do anything only if left mouse button was released
  {
    Grid rect = (Grid)sender;
    if ((mouseXPos > rect.PointToScreen(e.GetPosition(rect)).X - 5) &&  //
        (mouseXPos < rect.PointToScreen(e.GetPosition(rect)).X + 5) &&  // have mouse moved more than 5 pixels in any direction?
        (mouseYPos > rect.PointToScreen(e.GetPosition(rect)).Y - 5) &&  //
        (mouseYPos < rect.PointToScreen(e.GetPosition(rect)).Y + 5))    //
    {
      if (isInertiaStopped)                                       // are tiles still scrolling?
      {
        // tile click handler should be place here
      }
      else
      {
        isInertiaStopped = true;                                // stop scrolling tiles
      }
    }
    else
    {
      isInertiaStopped = false;                                   // pull down scrolling flag, so next time we will know that tiles are scrolling
      TimeSpan span = DateTime.UtcNow - new DateTime(1970, 1, 1); 
      inertiaEnd = (UInt64)span.TotalMilliseconds;                // save scrolling end time in milliseconds
      double distance = mouseXPos - rect.PointToScreen(e.GetPosition(rect)).X;    // compute the distance she traveled since last iteration
      UInt64 time = inertiaEnd - inertiaStart;                    // measure the time this distance was covered by
      if (tilesWidth + Width > Width) mouseInertia = distance * 10 / time * -1;   // and calculate scrolling speed based on these two values 
    }
  }
}

Эти три обработчика должны быть привязаны к каждому созданному нами тайлу, поэтому в функцию AddTile мы добавим еще три строчки:

g.MouseDown += new MouseButtonEventHandler(TileMouseDown);  //
g.MouseUp += new MouseButtonEventHandler(TileMouseUp);      // adding mouse event handlers to newly created grid
g.MouseMove += new MouseEventHandler(TileMouseMove);        //

Таймер

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

private void TimerTick(object sender, EventArgs e)
{
  // simple calculations
  if (mouseInertia != 0)                                      // if scrolling is needed
  {
    tileOffset += mouseInertia;                             // change scroll offset
    if (tileOffset > 0) tileOffset = 0;                     // restring excess scrolling to the left
    if (tileOffset < -tilesWidth) tileOffset = -tilesWidth; // and right
    mouseInertia *= 0.99;                                   // decrease scrolling speed
    LayoutTiles();
  }
}

В конструкторе  объекта задаем интервал срабатывания таймера, привязываем его обработчик, и запускаем:

timer.Interval = TimeSpan.FromMilliseconds(10);             //
timer.Tick += new EventHandler(TimerTick);                  // setting up and starting main timer
timer.Start();                                              //

Заключение

Простейший пример готов. Я надеюсь, что он может кому-то пригодиться, и достаточно понятен для затачивания под свои нужды. Я знаю, что в коде есть неиспользуемые переменные (а именно, переменные для хранения положения мыши по оси Y), но убирать их не стал, просто чтобы по прошествии времени было проще реализовать вертикальный/свободный скроллинг, если таковой понадобится.
Приведу скриншот программы, которая использует приведенный здесь алгоритм для отображения подключаемых модулей, «иконки» которых обладают способностью скроллиться мышью влево и вправо, как если бы это было на сенсорном устройстве:

Ну, и, на последок, ссылка на архив с исходником.

PS: Буду очень благодарен тому, кто поможет с задачей «о рюкзаке» действенным и простым алгоритмом или ссылкой.

UPDATE: Чуть улучшенная версия — при достижении крайней плитки не останавливает ее как бетонная стена, а постепенно снижает скорость, и возвращает на исходную, как на резинке.

Рассматриваться будет работа на Ubuntu Server. Под другие nix-системы тоже должно работать, но, возможно, с доработками. Windows серверы не рассматриваются вовсе.
Все решения сделаны "в лоб", без изысков и фанатичной минимализации/оптимизации. Я использовал jQuery для того, чтобы получить json посредством Ajax, и вывести его на страницу. Примеры простые, и могут быть переделаны под любой другой способ передачи/вывода. Итак...

1. Загрузка CPU

Начнем с самого сложного. Сложного потому, что мне не сразу удалось найти способ получения информации о загрузке процессора, а впоследствии, и не сразу найти способ ее обрабатывать. Первой мыслью была "использовать exec("top -n 1")", однако top не писал в стандартный вывод, а сохранение его (вывод) в файл на диск через '>', приводило к появлению огромного количества 'мусора', что сильно затрудняло последующий парсинг. В итоге, все свелось к чтению нужных файлов в виртуальной файловой системе, подключенной в /proc. Файл, в котором хранится информация о текущем использовании процессора называется /proc/stat. По сути, это не файл, а точка доступа к структурам данных ядра, но нам это знать не обязательно, потому что нам будет достаточно прочитать содержимое, а сделать это можно, как и в случае с простым файлом, через file(). Теперь можно привести кусочек кода, который эту информацию достает. После него я объясню, что было сделано, и зачем.

$file=file("/proc/stat");
$tmp=explode(" ",$file[0]);
$cpu_user_old=$this->session->userdata("cpu_user");
$cpu_nice_old=$this->session->userdata("cpu_nice");
$cpu_sys_old=$this->session->userdata("cpu_sys");
$cpu_idle_old=$this->session->userdata("cpu_idle");
$cpu_io_old=$this->session->userdata("cpu_io");
$cpu_user=$tmp[2];
$cpu_nice=$tmp[3];
$cpu_sys=$tmp[4];
$cpu_idle=$tmp[5];
$cpu_io=$tmp[6];
$diff_used=($cpu_user-$cpu_user_old)+($cpu_nice-$cpu_nice_old)+($cpu_sys-$cpu_sys_old)+($cpu_io-$cpu_io_old);
$diff_total=($cpu_user-$cpu_user_old)+($cpu_nice-$cpu_nice_old)+($cpu_sys-$cpu_sys_old)+($cpu_io-$cpu_io_old)+($cpu_idle-$cpu_idle_old);
$cpu=$diff_used/$diff_total*100;
 
$this->session->set_userdata(array("cpu_user"=>$cpu_user,"cpu_nice"=>$cpu_nice,"cpu_sys"=>$cpu_sys,"cpu_idle"=>$cpu_idle,"cpu_io"=>$cpu_io));

Объяснение начнем с содержимого файла:

> cat /proc/stat
cpu  2255 34 2290 22625563 6290 127 456 0 0
cpu0 1132 34 1441 11311718 3675 127 438 0 0
cpu1 1123 0 849 11313845 2614 0 18 0 0
intr 114930548 113199788 3 0 5 263 0 4 [... еще куча цифр ...]
...

В первой строчке /proc/stat содержится информация о количестве потраченного процессором времени (усредненное для всех ядер/потоков) на выполнение (по порядку): процессов пользователя, высокоприоритетных процессов пользователя, системных процессов, простоя, ожидания ввода/вывода, аппаратных и программных прерываний. В следующих строках, начинающихся на 'cpu', приведены те же данные для каждого ядра/потока в отдельности. В нашем случае вся интересующая информация содержится в первой строке, поэтому дальше разбирать файл не будем.
В приведенном кусочке кода так же есть сохранение этих данных в сессию CodeIgniter. Это сделано для того, чтобы определять разницу (дельту) между текущими и предыдущими значениями показателей. Загрузка процессора представляет собой отношение времени, затраченного на процессы, к общему затраченному времени, включающему простой. Естественно, чем реже будут происходить эти запросы, тем сильнее будет усреднено значение загрузки процессора за это время.

2. Оперативная память

Информацию о количестве свободной оперативной памяти можно найти в файле /proc/meminfo:

> cat /proc/meminfo
MemTotal:        2052604 kB
MemFree:          246012 kB
Buffers:          792332 kB
Cached:           584716 kB
...

Отсюда мы будем брать две первые строчки, и извлекать из них цифры:

$file=file("/proc/meminfo");
$memory["total"]=substr($file[0],strpos($file[0]," "),strrpos($file[0]," ")-strpos($file[0]," "));
$memory["free"]=substr($file[1],strpos($file[1]," "),strrpos($file[1]," ")-strpos($file[1]," "));

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

3. Swap file

Тут еще проще - берем строчку из /proc/swaps:

> cat /proc/swaps
Filename                                Type            Size    Used    Priority
/dev/sda1                               partition       7811064 2732    -1
...

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

$file=file("/proc/swaps");
$tmp=explode("\t",substr($file[1],strpos($file[1],"partition")));
$swap["total"]=$tmp[1];
$swap["free"]=$tmp[1]-$tmp[2];

Здесь пояснения тоже не нужны.

4. Жесткие диски

В моем примере будет приведен код, который извлекает информацию о количестве свободного места на дисках, точки монтирования которых находятся в /mnt. Ухищрения типа чтения и парсинга файлов из /proc здесь использовать не будут - для этой цели достаточно стандартных disk_free_space() и disk_total_space():

$drives=array();
if($dir=opendir("/mnt")){
  while(false !== ($file = readdir($dir))) {
    $arr=array();
    if(($file!=".")&&($file!="..")){
      $arr["path"]="/mnt/".$file;
      $arr["free"]=disk_free_space("/mnt/".$file);
      $arr["total"]=disk_total_space("/mnt/".$file);
      $drives[]=$arr;
    }
  }
}

5. Uptime

В качестве небольшого бонуса получим и продолжительность работы системы с последнего запуска:

$uptime=exec("uptime");
$uptime=explode(",",substr($uptime,strpos($uptime,"up")+3));
$time=explode(":",$uptime[1]);
$uptime=$uptime[0]." ".$time[0]." hours ".$time[1]." minutes";

Совсем банальный подход - вызов exec(), и форматирование результата.

Вывод

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

$result["cpu"]=$cpu;
$result["memory"]=$memory;
$result["swap"]=$swap;
$result["uptime"]=$uptime;
json_encode($result);

На выходе получается следующее:

{"uptime":"34 days   5 hours 45 minutes","cpu":1.7361111111111,"memory":{"total":"2052604","free":"191424"},"swap":{"total":"7811064","free":7808332}}

И, уже в браузере, я работаю с результатом при помощи jQuery:

var json=$.parseJSON(data);
$("#systemInfo").html("CPU: "+json.cpu+"<br />Memory free "+json.memory.free+" / "+json.memory.total);

Это один из простейших примеров. Более красивый вариант можно посмотреть тут.

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

Скачать standalone-вариант страницы статистики можно здесь.

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

Как я уже сказал, основной видимый элемент устройства - его экран. Экран гибкий, с клейкой подложкой для удобного нанесения на стекло. Его разрешение зависит от размеров, которые, в свою очередь, зависят от возможностей производства подобных экранов и от стандартов на размеры оконных рам. На экране может отображаться различная информация - RSS/twitter ленты, биржевые сводки и графики, список сообщений электронной почты, сводки погоды, etc. Отображение анимации затруднено скоростью отклика используемых дисплеев, но вывод несложной анимации, без резкой динамики, вполне возможен, и даже не будет неприятным. Также при использовании "умной самоклейки", отпадает необходимость в использовании жалюзи или занавесок, потому что количество поступаемого света можно регулировать контрастностью дисплея.

Второй элемент - небольшой блок управления, соединенный с дисплеем тонким шлейфом, который не составит труда замаскировать под элемент рамы. Блок управления работает под управлением специальной версии Linux, и отвечает за связь с внешним миром посредством WiFi/Ethernet/Bluetooth и вывод изображения на экран. Изображение может генерироваться непосредственно на управляющем блоке, путем сбора необходимых данных через интернет. Одиночный блок может управляться посредством смартфона или компьютера через специальное ПО - настройке поддаются источники информации и размеры и положения областей, в которых эта информация будет находиться, т.е., в итоге, получаются те же виджеты, которые можно наблюдать в KDE, Windows или Android. Несколько устройств могут быть объединены в одно общее поле вывода, управляемое с единственного ПК, что даст возможность не только выводить несколько "виджетов" на одном окне, но и отображать панорамные изображения на нескольких соседних окнах.

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

Использовать, конечно же, буду jQuery. В данный момент - версии 1.4.4, но все описанное должно быть работоспособным и на других версиях этой библиотеки.
Для сравнения, два input'а:

Преимущества - на лицо. Теперь даже без подписи понятно, что нужно вводить в это поле, и в каком формате. К тому же ввести что-либо, отличающееся от цифр не получится... и "+7" в начале, необходимую нам для дальнейшей обработки, тоже убрать не удастся. Теперь мы с большей степенью уверенности можем предполагать, что в серверный скрипт поступит именно то, что нужно, хотя дополнительных проверок еще никто не отменял.
Как же это сделано? Очень просто - четыре нехитрых обработчика:

$(document).ready(function(){
		$("input[name='phone']").bind("blur",function(){
				if(($(this).val()=="+7")||($(this).val()==""))
					$(this).css("color","#737373").val("+7xxxxxxxxxx");
			})
			.bind("focus",function(){
				if($(this).val()=="+7xxxxxxxxxx"){
					$(this).css("color","#000000").val("+7").focus();
				}
			})
			.bind("mousedown",function(){
				if($(this).val()=="+7xxxxxxxxxx"){
					$(this).css("color","#000000").val("+7").focus();
				}
			})
			.bind("keyup",function(){ 
    				$(this).val($(this).val().replace(/[^+0-9\.]/g,''));
	    			$(this).val($(this).val().substr(0,12));
	    			if($(this).val().length<2) $(this).val("+7");
			});
});

Аналогично можно поступить и с другими полями ввода, например, с полем ввода фамилии:

Код к этому input'у не будет отличаться от предыдущего:

$(document).ready(function(){
		$("input[name='fio']").bind("blur",function(){
				if(($(this).val()=="Фамилия, имя, отчество")||($(this).val()==""))
					$(this).css("color","#737373").val("Фамилия, имя, отчество");
			})
			.bind("focus",function(){
				if($(this).val()=="Фамилия, имя, отчество")
					$(this).css("color","#000000").val("");
			});
});

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

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

Но чОрным сегодняшний день я окрестил не из-за этой непонятной ситуации... а из-за того, что Я, Б*ДЬ, ПОТЁР ИСХОДНИКИ XML-ИНТЕРФЕЙСА ДЛЯ ПРИЛОЖЕНИЯ ПО ЗАКАЗУ ФОТОКНИГ, НАД КОТОРЫМ РАБОТАЛ ПОСЛЕДНИЕ ДВА МЕСЯЦА! И бэкап, как на зло, настолько старый, что мне придется еще два месяца писать все практически с нуля. Вот это - действительно повод напиться... )8

Все! Исправлений больше нет. Дальше перечислю новые фичи...

1. Возможность открывать изображение-источник в новом окне. Может быть полезно, если просматриваемая фотография действительно огромная, и в окно браузера ну никак не влазит. Для этого введены два новых параметра: fullView - булевый, по умолчанию равен true; imgHref - строковый, URL полноразмерного изображения, по умолчанию равен '%id%'. URL полного изображения специально выделен отдельным параметром, чтобы реализовать бОльшую гибкость.

2. Функция обратного вызова. Необязательная, но порой очень полезная вещь. Передается вторым параметром конструктора $.darken();

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

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

Скачать и посмотреть пример использования можно на соответствующей странице.
Плагин в деле, как и прежде, можно проверить здесь: http://www.anteyservis.ru/pages/professionals/

Надеюсь, мои наработки будут полезны еще кому-нибудь.

Напоследок коротенькое видео:

twix@server:~$ wget http://plowshare.googlecode.com/files/plowshare_1~svn1542-1_all.deb

2. Устанавливаем:

twix@server:~$ sudo dpkg -i plowshare_1~svn1542-1_all.deb

2a. Во время установки, скорее всего, установщик ругнётся на отсутствие завимостей:

Выбор ранее не выбранного пакета plowshare.
(Чтение базы данных... на данный момент установлено 31422 файлов и каталогов.)
Распаковывается пакет plowshare (из файла plowshare_1~svn1542-1_all.deb)...
dpkg: зависимости пакетов не позволяют настроить пакет plowshare:
plowshare зависит от curl, однако:
Пакет curl не установлен.
plowshare зависит от tesseract-ocr-eng, однако:
Пакет tesseract-ocr-eng не установлен.
plowshare зависит от spidermonkey-bin | rhino, однако:
Пакет spidermonkey-bin не установлен.
Пакет rhino не установлен.
plowshare зависит от perlmagick, однако:
Пакет perlmagick не установлен.
dpkg: не удалось обработать параметр plowshare (--install):
проблемы зависимостей -- оставляем не настроенным
При обработке следующих пакетов произошли ошибки:
plowshare


Чтобы эту неприятность устранить, попросим его поставить и эти зависимости тоже:

twix@server:~$ sudo apt-get -f install

3. После установки нам остается воспользоваться установленной программой - это так же просто, как запустить wget:

twix@server:~$ plowdown http://rapidshare.com/files/228922649/PQSERVICE_AS5930_5730.part3.rar

Дальше plowshare скачает запрошенный файл без нашего вмешательства:


Waiting 320 seconds... done
File URL: http://rs432l35.rapidshare.com/cgi-bin/rsapi.cgi?sub=download_v1&fileid=228922649&filename=PQSERVICE_AS5930_5730.part3.rar&dlauth=09322B08321E39645695F3B481722D7D0062C95426E0122722BFC88C53E6ED24F786FCA37A3B565501E10011D0E0567A16B6DF8471445AADA4E784F1BFA44FCF1151E1672D66163C38BC43B8C4E7B329C93B6800657F2E7ED27058514490E12074F96DFA8FEDB5C1EF655A557AFE7C0E
Filename: PQSERVICE_AS5930_5730.part3.rar
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 190M 100 190M 0 0 4464k 0 0:00:43 0:00:43 --:--:-- 5442k
PQSERVICE_AS5930_5730.part3.rar
twix@server:~$


Стоит отметить, что plowshare поддерживает множество файлопомоек: Megaupload, Rapidshare, 2Shared, 4Shared, ZShare, Badongo, Divshare.com, Depositfiles, Netload.in, Sendspace, Usershare, x7.to и другие (какие именно, к сожалению, не указано).

Надеюсь, кому-нибудь эта заметка будет полезна. Себе на память я ее точно оставлю... (:

Он буквально "слизал" форму заказа фотографий. Выглядит, она, имхо, бедновато, но можно однозначно определить, на кого равнялся автор. Итак, найдите десять отличий:

Кратко пробегусь по моментам, которые сразу бросаются в глаза:

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

Остальное по мелочи...

Видимо, форма делалась наспех, и продолжает "допиливаться", но, в любом случае, расстраивает её "сырость", а именно:

• убогие стандартные кнопки (вообще, отсутствие нестандартного и эффектного подхода)
• "плавающая" верстка
• не работающий LightBox для полноразмерного просмотра загруженных фотографий
• общая аляповатость и отсутствие дизайна

Как бы там ни было, желаю автору скорее привести его детище в человеческий вид и перейти на тариф "пожирнее" (а то уж больно долго фотки грузятся). А я сегодня попью пива за здравие конкуренции и в очередной раз улыбнусь мысли, которая меня греет: меня уже начали копировать!

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