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



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

jQuery Plugin — Scroll Sliders

Как всегда мои наработки имеют кучу настроек, так что начну пожалуй с них. Вот, немалый список:

slider	Default: true	Вкл/Выкл функционал ползунка
sliderOuter	Default: true	Вкл/Выкл функционал блока вокруг ползунка (при нажатии на блок в котором расположен ползунок, ползунок «телепортируется» к нам)
speedMove	Default: 200	Время прохождения 1го элемента при использовании ползунка с его максимальным отклонением
speedMoveScroller	Default: 300	Временно не используется
speedMoveControl	Default: 250	Время прохождения 1го элемента при использовании кнопок вперед/назад
speedMoveWheel	Default: 150	Время прохождения 1го элемента при прокрутке колесом мыши
speedRevert	Default: 220	Время возврата ползунка в среднее положение
speedAnimation	Default: 13	Интервал для выполнения анимаций
revert	Default: true	Вкл/Выкл возвращение ползунка в центральное положение
sliderInverse	Default: false	Вкл/Выкл инверсию для ползунка
sliderOuterDiv	Default: ‘.scroll-outer’	Блок-рамка для ползунка
sliderToddlerDiv	Default: ‘.scroll-toddler’	Блок-ползунок… хм забавное описание
control	Default: true	Вкл/Выкл функционал для кнопок управления
controlNext	Default: ‘.scroll-control .next’	Блок-кнопка управления «вперед»
controlPrev	Default: ‘.scroll-control .prev’	Блок-кнопка управления «назад»
controlRevert	Default: false	Вкл/Выкл инверсию для кнопок управления
scroller	Default: true	Вкл/Выкл функционал скролла
scrollerOuter	Default: true	Вкл/Выкл функционал вокруг скролла (при нажатии на блок в котором расположен скролл, скролла «телепортируется» к нам)
mouseWheel	Default: true	Вкл/Выкл функционал колесика мыши
mouseWheelRevert	Default: false	Вкл/Выкл инверсию для колесика мыши
mouseWheelsDiv	Default: ‘.scroll-positions, .block-for-scroll’	Блоки в которых будет активен функционал скролла
scrollerOuterDiv	Default: ‘.scroll-positions’	Блок скролла
scrollerToddlerDiv	Default: ‘.scroll-positioner’	Блок-указатель скролла
slideDiv	Default: ‘.block-for-scroll’	Блок который будет имитировать наши перемещения им мы и будем орудовать
slideOuterDiv	Default: ‘.block-outer	Рамка внутри которой всё будет происходит
slideWidthDiv	Default: ‘.block-for-scroll-inter’	Сам блок внутри которого само содержимое
slideLiClass	Default: ‘li.li’	элемент внутрених списков

Использовать плагин довольно таки просто, он имеет только один метод scrollsliders:

$(‘.my-scrolled-div’).scrollsliders();

или с параметрами ( можно и больше ^_^ ):

$(‘.my-scrolled-div’).scrollsliders({

speedMove: 200,

speedMoveScroller: 300,

speedMoveControl: 250,

speedMoveWheel: 150,

speedMoveRevert: 220,

speedRevert: 300

});

Скелет для этого тоже довольно таки прост:

<div class=«my-scrolled-div»>

<div class=«scroll-positions»>

<div class=«scroll-positioner»>

<div class=«scroll-positioner-inter»>

</div>

</div>

</div>

<div class=«block-outer»>

<div class=«block-for-scroll»>

<div class=«block-for-scroll-inter»>

<ul class=«style-ul»>

<li class=«li li-n-1″>li#1 inter text</li>

…

<li class=«li li-n-24″>li#24 inter text</li>

</ul>

</div>

</div>

</div>

<div class=«scroll-div»>

<div class=«scroll-outer»>

<div class=«scroll-toddler»>

</div>

</div>

<div class=«scroll-control»>

<div class=«prev»>

</div>

<div class=«next»>

</div>

</div>

</div>

<div class=«block-outer»>

<div class=«block-for-scroll»>

<div class=«block-for-scroll-inter»>

<ul class=«style-ul»>

<li class=«li li-n-1″>li#1 inter text</li>

…

<li class=«li li-n-24″>li#24 inter text</li>

</ul>

</div>

</div>

</div>

<div class=«scroll-positions»>

<div class=«scroll-positioner»>

<div class=«scroll-positioner-inter»>

</div>

</div>

</div>

</div>

Также и CSS:

*

{

margin:0px;

padding:0px;

}

 

debug{

position:fixed;

display:block;

color:#fff;

background:#000;

padding:15px;

top:15px;

left:15px;

}

 

.block-outer

{

position:relative;

height:200px;

width:800px;

margin:0 auto;

border:2px dashed blue;

overflow:hidden;

}

.scroll-positions{

position:relative;

width:800px;

margin:0 auto;

margin-top:10px;

margin-bottom:10px;

height:15px;

border:1px solid #aaa;

background:#eee;

}

.scroll-positions .scroll-positioner{

height:15px;

width:50px;

background:#ccc;

position:absolute;

top:0px;

left:0px;

cursor:pointer;

}

.block-outer .block-for-scroll

{

position:absolute;

left:0px;

top:0px;

height:100%;

width:30000px;

}

.block-outer .block-for-scroll .block-for-scroll-inter

{

position:absolute;

}

 

.block-for-scroll .style-ul

{

list-style:none;

height:100%;

}

 

.block-for-scroll .style-ul .li{

position:relative;

float:left;

margin:5px;

height:186px;

border:2px dotted red;

width:186px;

}

 

.scroll-div

{

position:relative;

margin:20px;

}

.scroll-control{

position:relative;

width:600px;

height:0px;

margin:0 auto;

}

.scroll-control .next{

position:absolute;

right:60px;

top:-30px;

height:40px;

width:40px;

background:blue;

cursor:pointer;

}

.scroll-control .prev{

position:absolute;

left:60px;

top:-30px;

height:40px;

width:40px;

background:blue;

cursor:pointer;

}

.scroll-div .scroll-outer

{

position:relative;

width:300px;

height:20px;

margin:0 auto;

background:gray;

}

.scroll-div .scroll-outer .scroll-toddler

{

position:absolute;

height:20px;

width:20px;

left:140px;

top:0px;

background:blue;

cursor:pointer;

}

 

После применения скелета и таблицы стилей должны получить что-то наподобие:

Заключение

Вот такие вот пироги с котятами, их кушаешь — они мяукают.

Скелет тут, демо версия тут, скачать тут. Архивом можно тут. Деньги слать сюда, утка

С Ув. buna1991.

© Habrahabr.ru

А теперь о самом главном — pushBridge.IO PHP Library

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

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

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

За работу с конкретным сервисов отвечает класс адаптера, который, при необходимости, подключает родную библиотеку. Пока родные классы используются только для Pusher-а и PubNub-а, ввиду того, что сервисы предоставляют свои специфические функции, которые пока не перенесены. Зато после инициализации вы всегда можете продолжить работать напрямую, просто вызвав метод getConnection().

Я так же попытался как-то унифицировать данные для авторизации. Одни сервисы используют app_id и секретный ключ, другие именуют их publish и subscribe/public ключами и т.п. Потому я попытался свести их к минимальному множеству и сохранить одно наименование для всех сервисов:

• appId — обычно это ид приложения или API-key, уникальный идентификатор аккаунта или приложения
• authKey — секретный ключ, дающий право на публикацию данных
• secretKey — пароль или другой секретный ключ для доступа к аккаунту
• readKey — публичный ключ для подключения в качестве клиента и чтения данных
• emailKey — логин пользователя в виде e-mail (пока это исключительно для x-Stream.ly)

Для работы с библиотекой достаточно трех строк:

1. Инициализация и подключение.

$push = new pushBridge_IO( [ Adapter ], [serializer] );

Первым параметром идет экземпляр адаптера для нужного вам сервиса, например:

new pushBridge_Adapter_Pusher(Array('appId' => 'Your app Id', 'authKey' => 'Your key', 'secretKey' => 'Your secret key', 'debug' => true));



Обычно, достаточно только данных для авторизации, набор которых специфичен для сервиса. Но библиотека, в отличие от родных классов, позволяет гибко управлять методами подключения, используя сетевой стек от Zend_Http. Для запросов можно использовать cURL, напрямую сокеты или адаптер для работы через прокси. По умолчанию используется cURL, но если вам надо, передайте в качестве параметра httpAdapter название нужно адаптера, а в httpAdapterConfig — любые его настройки согласно документации по ZF (например, вот здесь). Каюсь, в этом моменте есть еще баг в текущей реализации библиотеки, пока опции, заданные пользователем для адаптера, не используются, это будет исправлено в следующей версии (на днях).

Так как разные сервисы требуют (или наоборот) разные методы, можно задать в параметре method каким образом адаптер будет подключаться к серверу. Обычно это GET, но иногда сервисы понимают только POST. Адаптер это учитывает, но вы можете переопределить этот параметр.

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

Второй параметр — сериализатор, который будет обрабатывать сообщение. Все сервисы принимают или JSON, или (некоторые, например, Partcl) просто строку, без преобразования. Изначально там json, используя класс Zend_Serializer, однако вы можете переопределить на любой другой. Достаточно передать в качестве второго параметра или строку с названием сериализатора (сейчас поддерживаем: json, php и pickle) или сразу экземпляр класса Zend_Serializer с необходимыми вам опциями.

Примеры:

Partcl:

$push = new pushBridge_IO( new pushBridge_Adapter_Partcl(Array('secretKey' => 'Your secret key')) );

Pusher:

$push = new pushBridge_IO( new pushBridge_Adapter_Pusher(Array('appId' => 'Your app Id', 'authKey' => 'Your key', 'secretKey' => 'Your secret key', 'debug' => true)) );

Pubnub:

$push = new pushBridge_IO( new pushBridge_Adapter_Pubnub(Array('readKey' => 'Your subscribe key', 'authKey' => 'Your publish key', 'secretKey' => ' Your secret key')) );

BeaconPush:

$push = new pushBridge_IO( new pushBridge_Adapter_Beaconpush(Array('authKey' => 'Your API Key', 'secretKey' => 'Your secret key')) );

А во пример с кастомным сериализатором:

$push = new pushBridge_IO( new pushBridge_Adapter_Partcl(Array('secretKey' => ' Your secret key')), ‘php’ );

или

$push = new pushBridge_IO( new pushBridge_Adapter_Partcl(Array('secretKey' => 'Your secret key')), Zend_Serializer::factory('Wddx', Array(‘comment’ => ‘Powered by ZF+pushBridge.IO’) );

2. Просто отправляем сообщение.

На самом деле все не так и просто. Сервисы очень по разному работают с сообщениями. Самое простое — это модель канал->сообщение (или тег -> сообщение), другие же вносят новый уровень — канал -> событие -> сообщение. При этом только partcl очень толерантно относиться к содержимому сообщения, для него это просто строка, а ее понимание перекладываться полностью на клиента. Другие требуют специального оборачивания сообщений в json-структуры. Ни один из сервисов не поддерживает массовую отправку сообщений, когда в одном запросе можно было бы публиковать данные в разные каналы или несколько разных сообщений и событий в один канал. Этот момент мы уже учли и в следующей версии нашего сервиса Partcl.com такая возможность будет, параллельно в библиотеке появиться и эмуляция этого функционала для всех остальных (справедливости ради стоит сказать, что такой функционал реализован в классе для BeaconPush, но не портирован в мою библиотеку).

Общий метод отправки имеет такой вид:

$push->send( 'сообщение', 'channel', 'config' );

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

Если в сервисе используются каналы, то второй параметр это строка (или массив) каналов, куда следует отправить сообщение. если каналов нет, это ид тега или другой ид.

При необходимости задать код события следует использовать конфиг — третий параметр всегда массив. Событие задается в параметре event. Дополнительно можно отключить сериализацию, передав параметр serialize = false. Если сервис принимает, можно указать и дополнительные параметры сообщения, например флаг сохранения данных для X-Stream.ly или включить/отключить дебаг-режим для сообщения в Pusher-е.

Пример отправки простого сообщения:

Partcl:

$push->send('Hello world from pushBridge.IO', 'Your tag id', Array('serialize' => false));

Pusher:

$push->send('Hello world from pushBridge.IO', 'test_channel', Array('serialize' => false, 'event' => 'push_test', ‘debug’ => true));

Pubnub:

$push->send('Hello world from pushBridge.IO', 'my_channel');

x-Stream.ly:

$push->send('Hello world from pushBridge.IO', 'mychannel', Array('event' => 'my_event', ‘persisted’ => true));

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



Исходный код библиотеки и краткие примеры:github.com/aleksraiden/pushBridge.IO/tree/ServiceWrapper

В планах на ближайший релиз: исправление ошибок, унификация метода send, поддержка публикации сразу нескольких переменный, реализация метода чтения данных, а также поднятие сайта проекта на домене pushcloudapi.com. Буду благодарен за замечания и дополнения.

© Habrahabr.ru

Суть

А хочется то предельно простого.

Один клик — запустить приложение, второй клик — выделить область на экране.

Всё — после этого видим скриншот уже в браузере (в PNG) и имеем ссылку на него в буфере обмена.

Примерный алгоритм работы видится мне таким:

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

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

Для устранения установим форме свойство DoubleBuffered.

DoubleBuffered = true;

К сожалению помогло только частично. На просторах интернета был найден совет

отправить функции CreateWindowEx сообщение WS_CLIPCHILDREN в параметре dwExStyle.

Сделать это можно переопределив CreateParams.

protected override CreateParams CreateParams
{
   get
   {
      CreateParams cp = base.CreateParams;
      cp.ExStyle |= 0x02000000;
      return cp;
   }
}

Загружаются скриншоты на imgur, присутсвует простой апи.

Для использования нужен api key, регистрируем приложение — получаем тут же ключ.

Отправляем картинку:

class Uploader
{
   private static string imgur_key = null;

   public static string IMGUR_KEY
   {
      set { imgur_key = value; }
   }
   public static string UploadToImgur(Bitmap bitmap, ImageFormat imgFormat)
   {
      MemoryStream memStream = new MemoryStream();
      bitmap.Save(memStream, imgFormat);
      using (WebClient wc = new WebClient())
      {
         NameValueCollection values = new NameValueCollection
         {
            { "key", imgur_key },
            { "image", Convert.ToBase64String(memStream.ToArray()) }
         };
         byte[] response = wc.UploadValues("http://api.imgur.com/2/upload.xml", values);
         XDocument xDocument = XDocument.Load(new MemoryStream(response));
         return (string)xDocument.Root.Element("links").Element("original");
      }
   }
}

И собственно код самой программы:

public partial class ScreenForm : Form
   {
      Rectangle rect;
      Bitmap bmpScreenshot;
      //формат скриншотов
      ImageFormat imgFormat = ImageFormat.Png;

      public ScreenForm()
      {
         InitializeComponent()
         this.Paint += new System.Windows.Forms.PaintEventHandler(this.ScreenForms_Paint);
         this.KeyDown += new System.Windows.Forms.KeyEventHandler(this.ScreenForm_KeyDown);
         this.MouseDown += new System.Windows.Forms.MouseEventHandler(this.ScreenForm_MouseDown);
         this.MouseMove += new System.Windows.Forms.MouseEventHandler(this.ScreenForm_MouseMove);
         this.MouseUp += new System.Windows.Forms.MouseEventHandler(this.ScreenForm_MouseUp);
         this.FormBorderStyle = FormBorderStyle.None;
         this.ShowInTaskbar = false;
         this.TopMost = true;
         this.DoubleBuffered = true;
         this.Height = Screen.PrimaryScreen.Bounds.Height;
         this.Width = Screen.PrimaryScreen.Bounds.Width;
         //Указываем полученный ключ
         Uploader.IMGUR_KEY = "83dd0aacde6c6fc74d16638d5724bf96";
         MakeScreenShot();
         this.BackgroundImage = (Image)bmpScreenshot;
         this.Cursor = Cursors.Cross;
      }
      protected override CreateParams CreateParams
      {
         get
         {
            CreateParams cp = base.CreateParams;
            cp.ExStyle |= 0x02000000;
            return cp;
         }
      }
      private void MakeScreenShot()
      {
         Graphics gfxScreenshot;
         bmpScreenshot = new Bitmap(Screen.PrimaryScreen.Bounds.Width, Screen.PrimaryScreen.Bounds.Height, PixelFormat.Format32bppArgb);
         gfxScreenshot = Graphics.FromImage(bmpScreenshot);
         gfxScreenshot.CopyFromScreen(Screen.PrimaryScreen.Bounds.X, Screen.PrimaryScreen.Bounds.Y, 0, 0, Screen.PrimaryScreen.Bounds.Size, CopyPixelOperation.SourceCopy);
         gfxScreenshot.Dispose();
      }
      public Bitmap CropImage(Bitmap source, Rectangle section)
      {
         Bitmap bmp = new Bitmap(section.Width, section.Height);
         Graphics g = Graphics.FromImage(bmp);
         g.DrawImage(source, 0, 0, section, GraphicsUnit.Pixel);
         return bmp;
      }
      private void ScreenForms_Paint(object sender, PaintEventArgs e)
      {
         //цвет заливаемой области
         using (SolidBrush b = new SolidBrush(Color.FromArgb(75, 100, 100, 100)))
         {
            e.Graphics.FillRectangle(b, rect);
         }
      }
      private void ScreenForm_KeyDown(object sender, KeyEventArgs e)
      {
         if (e.KeyCode == Keys.Escape)
            base.Close();
      }
      private void ScreenForm_MouseDown(object sender, MouseEventArgs e)
      {
         if (e.Button == MouseButtons.Left)
         {
            rect = new Rectangle(e.X, e.Y, 0, 0);
         }
         else if (e.Button == MouseButtons.Right)
         {
            base.Close();
         }
      }
      private void ScreenForm_MouseMove(object sender, MouseEventArgs e)
      {
         if (e.Button == MouseButtons.Left)
         {
            rect = new Rectangle(rect.Left, rect.Top, e.X - rect.Left, e.Y - rect.Top);
         }
         this.Invalidate();
      }
      private void ScreenForm_MouseUp(object sender, MouseEventArgs e)
      {
         this.Hide();
         //вырезаем выделенную область
         Bitmap croppedBmp = CropImage(bmpScreenshot, rect);
         //мне понадобилось указывать в углу  время скришнота, что и делаем
         StringFormat strFormat = new StringFormat();
         strFormat.Alignment = StringAlignment.Far;
         strFormat.LineAlignment = StringAlignment.Far;
         Graphics g = Graphics.FromImage(croppedBmp);
         g.DrawString(DateTime.Now.ToString(), new Font("Tahoma", 8), Brushes.Purple, new RectangleF(0, 0, croppedBmp.Width, croppedBmp.Height), strFormat);
         //загрузка на сервер, копирование ссылки в буфер и открытие url картинки в браузере
         string link = Uploader.UploadToImgur(croppedBmp, imgFormat);
         Clipboard.SetText(link);
         Process.Start(link);
         Application.Exit();
      }
}

Что же получилось?

В результате имеем то, что хотели.

Простая быстрая программа, не делающая ничего лишнего.



Никаких мусорных временных файлов не создаётся.

Минимальная базовая функциональность, как готовое законченное решение

рассматривать пока рано.

Проект для VS2010.

ScreenShooter.exe отдельно для .NET 4.0

© Habrahabr.ru

Введение

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



Данное решение работает в последних браузерах на движке Webkit (Safari и Chrome), Firefox и Opera. В остальных браузерах (читай, IE) есть шанс получить квадратный стикер жёлтого цвета без тени и анимации.

Шаг 1

Давайте начнём с простейшего варианта, который будет работать во всех браузерах. Для того, чтобы сделать стикер, мы будем использовать HTML5 и CSS3, что логично. А начнём мы с обычной HTML разметки, в которой мы обозначим тексты и заголовки наших заметок, которые по сути являются списками.

	  
Title #1

Content #1

          
	 

	  
Title #1

Content #2

	  
     

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

Например, я записал «купить BMW X6» в воскресенье (тут хочется передать привет Boomburum, а по ссылке задал адрес, где найти эту машинку. Хе-хе!

CSS же, чтобы превратить этот списочек в жёлтые стикеры достаточно прост:

* {
     margin: 0;
     padding : 0;
}

body {
           font-family: arial, sans-serif;
           font-size: 100%;
           margin: 3em;
           background: #666;
           color: #FFF;
}

h2, p {
           font-size: 100%;
           font-weight: normal;
}

ul, li {
         list-style: none;
}

ul {
      overflow: hidden;
      padding: 3em;
}

ul li a {
           text-decoration: none;
           color: #000;
           background: #FFC;
           display: block;
           height: 10em;
           width: 10em;
           padding: 1em;
}

ul li {
        margin: 1em;
        float: left;
}

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

Кстати, вот результат:



Данный вариант будет работать в любом браузере. Даже (!!!) в IE6. На этом мы и закончим его поддержку, т.к. нам нужны краски, а не одноцветный прямоугольник. Так ведь?

Шаг 2

Пора преукрасить наши стикеры. Давайте добавим к ним тени и зададим текстам заметок шрифт, похожий на рукописный. Для этого мы будем использовать Google Fonts API. А использовать мы будем шрифт под именем Reenie Beanie. Самый простой способ использовать данный API — работать с Google Font previewer:



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

ul li h2 {
             font-size: 140%;
             font-weight: bold;
             padding-bottom: 10px;
}

ul li p {
           font-family: "Reenie Beanie", arial, sans-serif;
           font-size: 180%;
}

А теперь давайте зададим тень нашим стикерам. Да так, чтобы во всех (кроме IE) браузрах отображалось:

ul li a {
           text-decoration: none;
           color: #000;
           background: #FFC;
           display: block;
           height: 10em;
           width: 10em;
           padding: 1em;
           -moz-box-shadow: 5px 5px 7px rgba(33, 33, 33, 1); /* для Firefox Грозного */
           -webkit-box-shadow: 5px 5px 7px rgba(33, 33, 33, 7); /* да для люда обычного, праведного */
           -box-shadow: 5px 5px 7px rgba(33, 33, 33, 7); /* и про Оперушку не забудем */
}

Смещение, цвет, ширина, высота — всё, как доктор прописал обычно. Вместе с новым шрифтом и нашими финтифлюшками тенями на стикеры теперь стало смотреть ещё приятнее. Выглядит они теперь вот так:

Шаг 3

Теперь я предлагаю вам заняться вещью ещё более увлекательной и интересной. Изменим углу поворота наших стикеров. Как? Используя свойство CSS3: transform: rotate. Вот так:

ul li a {
           -webkit-transform: rotate(-6deg);
           -o-transform: rotate(-6deg);
           -moz-transform: rotate(-6deg);
}

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

    ul li:nth-child(even) a{
      -o-transform:rotate(4deg);
      -webkit-transform:rotate(4deg);
      -moz-transform:rotate(4deg);
      position:relative;
      top:5px;
    }
    ul li:nth-child(3n) a{
      -o-transform:rotate(-3deg);
      -webkit-transform:rotate(-3deg);
      -moz-transform:rotate(-3deg);
      position:relative;
      top:-5px;
    }
    ul li:nth-child(5n) a{
      -o-transform:rotate(5deg);
      -webkit-transform:rotate(5deg);
      -moz-transform:rotate(5deg);
      position:relative;
      top:-10px;
    }

Теперь же каждая вторая ссылка будет наклонена на 4 градуса вправо, отступы по пятью Каждая третья будет отклонена на 3 градуса влево. И так далее… Пока не закончится фантазия.

Шаг 4

Согласитесь, надо внести возможность увеличивать нашу заметку при наведении на неё курсором. Тут мы опять воспользуемся CSS3, что не удивительно. Сказано — сделано:

    ul li a:hover,ul li a:focus{
      -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);
      -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);
      box-shadow:10px 10px 7px rgba(0,0,0,.7);
      -webkit-transform: scale(1.25);
      -moz-transform: scale(1.25);
      -o-transform: scale(1.25);
      position:relative;
      z-index:5;
    }

Мы добавили такой высокий z-index для того, чтобы при наведении наш стикер не ограничивал себя в захвате земель и перекрывал ближние стикеры. Собственно, при наведении мы увидим следующую картину:

Шаг 5

Всё-таки надо доделать, чтобы было красиво. Понимаете, чего нам не хваиает? Правильно, анимации. Нужно сделать переходы плавными, а не каменными. Такое ощущение, что ты в каменном веке или же тебе не хватает ЦП. Что же, поехали:

    ul li a{
      text-decoration:none;
      color:#000;
      background:#ffc;
      display:block;
      height:10em;
      width:10em;
      padding:1em;
      -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
      -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
      box-shadow: 5px 5px 7px rgba(33,33,33,.7);
      -moz-transition: -moz-transform .15s linear;
      -o-transition: -o-transform .15s linear;
      -webkit-transition:-webkit-transform .15s linear;
    }

Вот она наша анимация. К сожалению, скриншот не может её передать также, как телефон не может передать запах свежеиспечённой птицы пиццы. Какая жаль!

Но ещё бы хотелось разукрасить наши стикеры, а то как-то уж всё монотонно. Каждый второй стикер будет зелёным, каждый третий — синим. А что, неплохо.

ul li:nth-child(even) a{
  -o-transform: rotate(4deg);
  -webkit-transform: rotate(4deg);
  -moz-transform: rotate(4deg);
  position: relative;
  top: 5px;
  background: #cfc;
}
ul li:nth-child(3n) a{
  -o-transform: rotate(-3deg);
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  position: relative;
  top: -5px;
  background: #ccf;
}

Опять же, анимацию мы на скриншоте увидеть не сможем, но нашу трёхцветную зёбру смесь — без проблем. А вообще, пример вы можете посмотреть здесь.

Заключение

Ну вот и всё на сегодня. Сегодня мы научились создавать красивые анимированные стикеры с помощью CSS3. Ведь красивые, правда?

Пример данного урока можно стянуть здесь.

До скорых встреч!

© Habrahabr.ru

При разработке одного проекта мне пришлось решать проблему с сортировкой данных в таблице. Не хотелось для этого использовать PHP, так как эффект теряется при перезагрузке страницы. Вот и наткнулся я на официальный сайт jQuery-плагина «TableSorter.js» — www.tablesorter.com. Немного покопавшись в англоязычной документации я с радостью обнаружил в новостях сайта ссылку на русскоязычный сайт: www.tablesorter.ru.

В принципе там всё предельно ясно было описано и я быстро понял как всё работает…

Но было в документации одно важное упущение: недостаточно описан принцип работы постраничной навигации, да и нужные файлы не выложены. А мне как-раз нужна была эта функция, так как в моих таблицах было минимум по 150 строк. Пришлось самому решить эту проблему.

Необходимые материалы

• Качаем/подключаем к нашей странице следующие скрипты:
• Сам jQuery: code.google.com/intl/ru-RU/apis/libraries/devguide.html#jquery
• Плагин TableSorter: tablesorter.ru/jquery.tablesorter.min.js
• Плагин к TableSorter для постраничной навигации: tablesorter.ru/addons/pager/jquery.tablesorter.pager.js
• Синеватая тема (есть и зеленая): tablesorter.ru/themes/blue/blue.zip
• Архив с картинками для постраничной навигации: bazmaster.ru/downloads/table.zip

Постраничная навигация

Сейчас я покажу вам как настроить постраничную навигацию с помощью этого плагина — на самом деле решение довольно простое, а вот на поиск этого решения у меня ушло немало времени.

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

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

Подключаем в теге HEAD нашей страницы все наши скрипты и стили. У меня они выглядели так:

Здесь же, в теге HEAD, пишем javascript-код, который и заставит нашу таблицу работать правильно:

Далее распаковываем архив с картинками в папку /images/table

Наша таблица будет выглядеть следующим образом:

имя
фамилия
возраст
итого
скидка
дата




петр
сидоров
28
$9.99
20%
jul 6, 2006 8:14 am


иван
хайкин
33
$19.99
25%
dec 10, 2002 5:14 am


николай
котов
18
$15.89
44%
jan 12, 2003 11:14 am


борис
арнов
45
$153.19
44%
jan 18, 2001 9:12 am


борис
егоров
22
$13.19
11%
jan 18, 2007 9:12 am

И теперь подключаем те самые наши элементы навигации, которые в документации не указаны (без них будут ошибки на странице):

		
		 

		
		 

10
20
30
40

Всё! Теперь наша таблица работает исправно!

© Habrahabr.ru

© Habrahabr.ru

Теория

Для разработки нам потребуются некоторые знания о Table View. Давайте с них и начнем. Подробное описание работы с Table View приведено в [1], здесь я ограничусь кратким изложением основных идей.

Типы Table View

Существует два вида Table View:

• cell-based — каждая ячейка таблицы представлена подклассом NSCell. В большинстве случаев этого достаточно, но создает трудности при разработке таблиц с комплексными ячейками, т.к. требует создания подкласса NSCell. В версиях Mac OS X 10.6 и более ранних существовал только этот тип таблиц.
• view-based — каждая ячейка представляет собой отдельный view. Это позволяет строить комплексные таблицы даже с поддержкой анимации без особых трудностей. Данный тип таблицы появился только в Mac OS X 10.7.

В этой статье мы рассмотрим работу с cell-based table view, так как нам достаточно его функций, решение получится более простым и будет работать не только с новыми версиями OS X.

Передача данных в Table View

Данные в Table View можно передавать двумя способами:

• С помощью реализация протоколов (интерфейсов) NSTableViewDelegate, NSTableViewDataSource, а затем связывать Table View с классом, реализующим эти протоколы посредством Interface Builder. Необходимо привязать Outlets dataSource и delegate. А в этом классе в самом простом случае необходимо реализовать два метода:
  
  • numberOfRowsInTableView: — возвращает общее количество строк в таблице
  • tableView:objectValueForTableColumn:row: — возвращает элемент для строки, переданной в аргументе row. Номер столбца в этом случае определяется различными способами, используя второй аргумент objectValueForTableColumn.

  
  

• С использованием контроллера и биндингов (Bindings). Эта техника основана на паттерне Model-View-Controller (MVC) [2] и технологии Cocoa Bindings. Про MVC, наверное, смысла рассказывать нет — про него все слышали, а кто не слышал, может ознакомиться по приведенной ссылке в Wiki. На Cocoa Bindings остановимся подробнее.

Cocoa Bindings

Cocoa Bindings появился в версии Mac OS X, начиная с версии 10.3. Основная его цель — сократить объем кода контроллера для связи объектов модели (Model) и представления (View).

Cocoa Bindings основан на двух механизмах:

• Key-Value Coding (KVC) — механизм для доступа к полям объекта по именам этих полей.
• Key-Value Observing (KVO) — механизм, позволяющий одним объектам следить за изменениями в других объектах.

Более подробно о Cocoa Bindings можно почитать в [3].

На этом с теорией закончили, можно переходить к практике.

Практика

Открываем Xcode и создаем новый проект «Cocoa Application». Назовем его «Process Monitor». Я использую последнюю на момент публикации версию Xcode (4.2.1), поэтому некоторые шаги могут отличаться.

Создание GUI

Открываем файл MainMenu.xib, в нем выбираем Window. Установим для него размеры 480 на 500. Это делается в Size Inspector (значок линейки в правом сайдбаре). Там же установим минимальные размеры — чекбокс и нужные размеры.

Добавляем в окно элемент Table View из Object Library (значок куба в правом нижнем сайдбаре) (поиск по слову «table»). По умолчанию создается таблица cell-based. В этом можно убедиться, если открыть Attributes Inspector (в правом сайдбаре, слева от линейки). Изменяем размеры Table View так, чтобы она занимала все окно. Затем открываем Size inspector и на картинке Autosizing выбираем все элементы — это необходимо, чтобы Table View растягивалась вместе с окном.

Теперь нам необходимо добавить столбцы в таблицу. Будем отображать три столбца — PID процесса, иконку и название процесса. По умолчанию в таблицу добавлено два столбца. Нужно изменить это число на 3. Для этого выбираем таблицу (Table View) кликом в окне. Тут нужно сделать небольшое отступление. Дело в том, что объекты окна вложены друг в друга и выделить нужный совсем не просто. Есть два варианта: это либо выбор нужного элемента в иерархии объектов в окне Objects (думаю, он появился в Xcode 4, раньше я его не видел), либо Command+Control+Shift Click на окне с выбором нужного объекта. После выбора таблицы переходим в Attributes Inspector и устанавливаем значение Columns в 3.

Теперь присвоим имена столбцам. Это делается двойным кликом по заголовку столбца. Имя первого столбца — PID, второй оставим пустым, третий — Process Name.

Изменяем размер столбцов таблицы. Для этого выделяем столбец и в Size Inspector устанавливаем его размеры. Для первого (PID): 60, для второго (Icon): 40, для третьего (Process Name) — все оставшееся место.

Заменим тип второго столбца таблицы с текстового на изображение. Для этого в Object Library найдем Image Cell (поиск по «image») и перетащим ее на второй столбец.

После всех этих действий можно нажать кнопку Run и увидеть такое окно:

Добавление контроллера и биндингов

Теперь добавим controller, который будет взаимодействовать с таблицей. Самый подходящий тип котроллера для таблицы это NSArrayController. Найдем его в Object Library (поиск по «array») и перетащим в список Objects.

Установим биндинги для таблицы. Для этого выделим Table View и перейдем в Bindings Inspector (предпоследняя вкладка в правом сайдбаре). Там в разделе Table Content выберем Content и установим Bind to: Array Controller с Controller Key: arrangedObjects.

Теперь воспользуемся техникой KVC и укажем какие данные должен отображать каждый столбец. Для этого мы по очереди выделяем каждый столбец (Table Column) и в Bindings Inspector устанавливаем Value в Bind to: Array Controller с Controller Key: arrangedObjects. А для каждого столбца значения Model Key Path соответственно: processIdentifier, icon, localizedName. Почему установлены такие значения, будет описано ниже.

Так мы связали таблицу с контроллером. Осталось связать контроллер с данными.

Первым делом определим эти самые данные. Откроем файл AppDelegate.h и определим свойство contents типа NSArray:

@property (retain) NSArray* contents;

В файле AppDelegate.m напишем:

@synthesize contents;

Теперь вернемся к MainMenu.xib и скажем контроллеру какие данные использовать. Идем в Bindings Inspector и в разделе Controller Content устанавливаем Content Array в Bind to: App Delegate, а Model Key Path: contents.

На этом установка биндингов окончена, нам осталось только заполнить массив contents в AppDelegate нужными данными.

Получение списка запущенных процессов

Существует несколько способов получения списка всех запущенных процессов. Об этом я как-нибудь напишу в отдельной статье. А сейчас рассмотрим самый простой и очевидный способ — с использованием Cocoa. Он получает не полный список процессов, но пусть нас это пока не волнует.

Определим в AppDelegate метод updateProcessList:

- (void)updateProcessList
{
    NSWorkspace* workspace = [NSWorkspace sharedWorkspace];
    self.contents = [NSArray arrayWithArray:[workspace runningApplications]];
}

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

Немного прокомментирую код. В первой строчке мы получаем объект класса NSWorkspace. Объект этого класса существует в программе в единственном экземпляре, своеобразный синглтон, и получается методом sharedWorkspace.

У этого объекта есть метод runningApplications, возвращающий список запущенных приложений в массиве. Все просто. И этот массив мы используем в качестве данных для контроллера.

Каждый элемент этого массива представляет собой объект класса NSRunningApplication. У этого класса есть несколько свойств, среди которых есть processIdentifier, icon, localizedName. Помните, мы устанавливали их для столбцов таблицы? Так вот, благодаря KVC, во время отображения таблицы будут использоваться эти значения из NSRunningApplication.

Теперь добавим вызов созданного метода во время запуска приложения. Для этого нужно добавить строчку:

[self updateProcessList];

в метод applicationDidFinishLaunching.

Завершение приложения

В Mac OS X принято что приложение не обязательно должно завершаться после того как закрыто последнее окно. В нашем примере в этом большого смысла нет, поэтому добавим автоматическое завершение. Делается это очень просто — добавлением одного метода в AppDelegate.m:

- (BOOL)applicationShouldTerminateAfterLastWindowClosed:(NSApplication *)sender
{
    return YES;
}

Заключение

Теперь наше приложение готово. Если все сделано правильно, то после запуска можно увидеть что-то подобное:



В качестве упражнения, предлагаю читателю реализовать периодическое обновление списка процессов. Для этого можно использовать класс NSTimer и метод scheduledTimerWithTimeInterval этого класса [5].

Итак, в этой статье мы рассмотрели процесс создания простого приложения с использованием Table View. Большая часть действий проводилась в Interface Builder и не требовала программирования вообще. Все что можно было упростить, было упрощено — не были рассмотрены контроллеры окон (NSWindowController), контроллеры представлений (NSViewController), управление памятью и многое другое.

В следующей статье я планирую рассмотреть иерархический список (NSOutlineView) для отображения дерева процессов. И, если кода там наберется достаточно, сделаю репозиторий на github’е.

Всем спасибо за внимание!

Ссылки

1. Table View Programming Guide (en)
2. Model–view–controller pattern (en)
3. Работа Cocoa Bindings (ru)
4. NSWorkspace Class Reference (en)
5. NSTask Class Reference (en)

© Habrahabr.ru

Корея, Сеул, Корейский военный музей



Китай, Пекин, Запретный город



Япония, Токио, Императорская резиденция



США, Окленд, стадион «Колизей»



Команда Яндекс.Карт

© Habrahabr.ru

В атаку на мобильные рынки!

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

Началось всё с компании Hasbro, выпускающей кучу игр и игрушек в Америке. На настольном рынке она засветилась благодаря Монополии и ещё многим хитам. Эта компания одна из первых начала выходить на мобильный рынок и портировать игры. Первой ласточкой стала как раз Монополия (благо на тот момент её много кто делал в компьютерном формате), второй весьма необычной штукой — Дженга в настольной версии. Юмор в том, что игра требует ловкости и умения вытаскивать реальные деревянные бруски из реальной деревянной башни. Тач позволил это, и позволил более чем круто.

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

Монополию, причём с сетевым режимом, чтобы можно было поиграть в самолёте, например.

• Скрабл — наверное, самая хитовая штука из всех. Там можно положить айпад в центр стола, а с помощью айфонов таскать буквы.
• Уно — вторая после Монополии по продаваемости в мире игрушка, её порт был просто предсказуем.
• Каркассон и Колонизаторы — простые стратегии, базовые настольные версии которых вошли в топ стратегий на российском рынке.
• Психоделичный Диксит (правда, он не взлетел, потому что встретиться с игроками можно только по договорённости).
• Ticket to Ride — очень удачное переложение настолки на планшет.
• Плюс, конечно же, шахматы, нарды, реверси, Калаху, го, 4 в ряд и много других классических игр. Я видел даже порты Микадо (игры одесских карманников типа бирюлек), в которые вообще непонятно как играть без реальных физических палочек.

Почти все эти игры входят в наш и американский топ-100 и отлично продаются. При этом, как я понимаю, они продаются там, где у людей уже есть физические версии таких штук (в частности, в США и Европе, где культура настолок сейчас чуть ли не важнее культуры чтения книг). Вообще, учитывая, что по Монополии собирались снимать фильм, а по Морскому бою уже снимают, становится понятно, насколько тема у них популярна.

А теперь обзор IT-подарков

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

Улей. Игрушка весьма известная в кругах англоговорящих математиков: очень простая и красивая стратегия, которую многократно переносили в компьютерные версии. В этом году мы получили лицензию на её издание в России и начали продавать. Ощущение тяжеленных звонких фишек с насекомыми в руках очень радует.



Задача — окружить королеву противника. Вместо поля — бесконечная плоскость, разбитая на шестиугольники

В прошлый обзор не попал Риск. Это глобальная стратегия, весьма любимая айтишниками в 90-х. Например, Марк Цукерберг начал свою карьеру разработчика не с сервиса сравнения девушек, как думают многие, а с переложения «Риска» в сетевой вариант. Если будете брать — лучше обратить внимание на ту версию, где вместо конкретных войск фишки сделаны в стиле инфографики: она в разы удобнее.

В начале года вышла долгожданная Пандемия — игра про спасение мира. Она хороша тем, что вам не нужно конкурировать: игроки играют против игры, а не друг друга. Задача — метаться по планете и залечивать различные эпидемии. Игроки имеют разные функции: например, исследователь получает бонус при поиске вакцины, диспетчер умеет делать чартер куда угодно, а врач может вылечить сразу кучу больных одним махом. Грамотные договорки, хорошая оценка рисков и умение координироваться плюс толика удачи — и вы выигрываете.



Пандемия

Те, кто помнит старый добрый сайт Ролемансер про настольные ролевые игры, помнит и «Эру Водолея» — отечественную систему, по которой играли в реале и на форумах. В этом году была выпущена вторая версия в виде новой книги. По ощущениям и отзывам — мало кто взял её играть, но много кто — по ностальгии. Книга оказалась очень хорошей, но взрыва активности на форумах, в отличие от первой, не вызвала.

Ещё в этом году вышло дополнение к Шакалу (игре с родословной в МГУ), вторая Эволюция, продолжение к кошмару проект-менеджера «За бортом!», куча новых Мафий и много других штук. Плюс я постоянно мониторю трафик с Хабра на предмет покупок и вижу, что особой популярностью в IT-среде стал пользоваться настольный хоккей, настольный футбол и Диксит (когда он был). Вообще, на Мосигре есть специальное место, где фигню не посоветуют: вот каталог подарков «Выбор Хабра».



Го — игра, в которой человеки пока лучше железных компьютеров.

Краудсорсинг-игра

Красивый пример влияния сети на рынок — игрушка Имаджинариум. История началась так: есть достаточно популярный Диксит, который издают в Европе. Принцип игры очень простой: нужно брать карточку с психоделичным рисунком, загадывать ассоцицацию на неё и класть на стол. Каждый из игроков смотрит на свои карточки-рисунки, находит подходящий под ассоциацию и тоже кладёт на стол. Потом карты перемешиваются, а игроки пытаются понять, что именно из этого загадал ведущий. Штука очень творческая, весёлая и отлично подходит для тёплых дружеских встреч.

В России есть элитни сообщество людей, которые обожают в это играть. В какой-то момент эти люди понимают, что нужно делать свою игру, и начинают разрабатывать проект. Для рисования картинок привлекается сетевой краудсорсинг: в результате множество художников делают работы, которые входят в финальную версию. Игра закрывается крышкой, снабжается кучей пасхалок — и запускается в печать, причём очень быстро, буквально за пару месяцев от нуля до свежего тиража. Так появился Имаджинариум. Если интересно, более ранний краудсорсинговый проект этой команды выглядит вот так.



Вот оно

Что чаще всего стоит в офисах?

Почти всегда есть Дженга (она засветилась у Лебедева плюс в куче разных офисов), много где есть футбол или хоккей на подставке, Яндекс, кажется, перетаскал все стратегии из нашего магазина около своего офиса, регулярно видно Свинтуса и Шакала. После специального издания для Epson популярным стал Бум, причём чаще брендированный под конкретную компанию. Постоянно и почти везде есть Мафия разных изданий, часто – с масками (да, был интересный хабратопик про эти маски). Иногда попадается «За бортом!», реже – Элиас и Активити. Вообще, за этот год игр в IT-офисах стало в разы больше, это заметно и очень радует.



Дженга

Хей, а где мой маленький подарок?

С теми, кто скажет пароль «Хабрахабр» в магазинах Мосигры или напишет это слово в примечаниях к заказу, сразу случится небольшая приятная скидка.

Акция действует с 15 по 25 декабря в Москве, Санкт-Петербурге, Киеве, Уфе, Оренбурге, Владивостоке, Ставрополе, Тюмени, Улан-Удэ, Норильске, Липецке, Казани, Нижнем Новгороде, Чебоксарах, Перми, Ярославле, Екатеринбурге, Астрахани, Омске, Твери, Томске, Воронеже, Тольятти, Харькове, Саратове и даже в Южно-Сахалинске, где сейчас очень-очень холодно. Есть момент: в Москве уже набирает обороты зерг-раш на магазины, поэтому акция относится только к интернет-магазину.

И да, тот спойлер сверху — он уже готов.

© Habrahabr.ru

// Print all of the news items on hackernews
var jsdom  = require('jsdom');
var fs     = require('fs');
var jquery = fs.readFileSync("./jquery-1.6.2.min.js").toString();

jsdom.env({
   html: 'http://news.ycombinator.com/',
   src: [
      jquery
   ],
   done: function(errors, window) {
      var $ = window.$;
      console.log('HN Links');
      $('td.title:not(:last) a').each(function() {
         console.log(' -', $(this).text());
      });
   }
});

А на jsdom, в свою очередь, основан пакет node-jQuery, отличающийся дополнительными обёртками из синтаксического сахара.

Другого метода, другого подхода к этой задаче нет, да пока что и быть не может.

© Habrahabr.ru