Добрый день, я Виталий Харисов. Я расскажу вам про вёрстку независимыми блоками.

Что такое блок

Прежде чем перейти к непосредственно независимым блокам, давайте определим, что такое блок вообще.

Что случается, когда аналитик сталкивается с абстрактными художественными понятиями? А если от них зависит эффективность и успешность его работы? Он попытается их формализовать, выявить критерии, связи и так далее. Обычно получается забавно и очевидно. Но иногда из этого вырастает полезная теория.

Я столкнулся с понятием красоты сайта. Делюсь наработками.
Картинки для привлечения внимания нет.

 Факт 1

Красота сайта равна его удобству, реальной или потенциальной пользе для посетителя.

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

Факт 2

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

Факт 3

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

Это базовые факты, на основе которых построены выводы ниже.

Минимализм


Чем выше плотность полезной информации, тем красивее сайт. Важно только содержание. “Дизайн ради дизайна” вредит. Оформительство, стилизации или имитации, которые не помогают раскрытию идеи, ухудшают дизайн. Кнопка может быть плоской, иконка — схематичной, а ссылка — неподчеркнутой. Потому что из простого образа мы считаем его назначение. А блики, тени и выпуклости понижают плотность полезной информации.

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

В противовес можно привести примеры отличных промо сайтов, построенных на спецэффектах —

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

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

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

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

Подборка минималистичных сайтов — siteinspire.com.

Адаптивность

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

Анимация


При ограничениях минимализма на помощь дизайнерам пришла анимация. Она помогает расставить акценты, объяснить назначение элементов интерфейса, дополнить содержание. Распространенный прием — использование анимации при наведении или клике на объект. Цель — повысить отзывчивость сайта. Анимация создает дополнительную информацию в тот момент, когда она нужна.

Мы использовали эффект параллакса на сайте rizhik.biz. Он создает искусственный беспорядок, который подчеркивает количество и разнообразие продукции. Другая наша работа — dmbasis.ru, где анимация рассказывает об услугах компании. В этих примерах анимация является содержанием.

Отличные примеры использования анимации как содержания —

И целая коллекция подобных сайтов — hoverstat.es.
 
http://habrahabr.ru/company/htdt/blog/235589/

  
  </span>Image Rotate
  <span style="margin: 0px; padding: 0px; color: #000080;"></head></span>
  
  <span style="margin: 0px; padding: 0px; color: #000080;"><body></span>
  <span style="margin: 0px; padding: 0px; color: #800080;"><img src=<span style="margin: 0px; padding: 0px; color: #0000ff;">""</span> name=<span style="margin: 0px; padding: 0px; color: #0000ff;">"Rotating"</span> id=<span style="margin: 0px; padding: 0px; color: #0000ff;">"Rotating1"</span> width=100 height=100></span>
  <span style="margin: 0px; padding: 0px; color: #800080;"><img src=<span style="margin: 0px; padding: 0px; color: #0000ff;">""</span> name=<span style="margin: 0px; padding: 0px; color: #0000ff;">"Rotating"</span> id=<span style="margin: 0px; padding: 0px; color: #0000ff;">"Rotating2"</span> width=100 height=100></span>
  
  
  <span style="margin: 0px; padding: 0px; color: #800000;"><script language=<span style="margin: 0px; padding: 0px; color: #0000ff;">"JavaScript"</span>></span>
  var ImageArr1 = new Array("Picture(3).jpg","Picture(1).jpg","Picture(2).jpg");
  var ImageHolder1 = document.getElementById('Rotating1');
  
  var ImageArr2 = new Array("Picture(5).jpg","Picture(6).jpg","Picture(7).jpg");
  var ImageHolder2 = document.getElementById('Rotating2');
  
  function RotateImages(whichHolder,Start)
  {
  	var a = eval("ImageArr"+whichHolder);
  	var b = eval("ImageHolder"+whichHolder);
  	if(Start>=a.length)
  		Start=0;
  	b.src = a[Start];
  	window.setTimeout("RotateImages("+whichHolder+","+(Start+1)+")",1500);
  }
  
  RotateImages(1,0);
  RotateImages(2,0);
  
  <span style="margin: 0px; padding: 0px; color: #800000;"></script></span>
  
  <span style="margin: 0px; padding: 0px; color: #000080;"></body></span>
  <span style="margin: 0px; padding: 0px; color: #000080;"></html><br><br><noindex><a target="_blank" rel="nofollow" href="http://www.go4expert.com/showthread.php?t=357" style="margin: 0px; padding: 0px; color: #22229c; font-family: arial, tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; line-height: 20.5333347320557px; text-align: justify; white-space: normal;">Auto Suggest with Javascript</a></noindex><br style="margin: 0px; padding: 0px; color: #000000; font-family: arial, tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; line-height: 20.5333347320557px; text-align: justify; white-space: normal;"><noindex><a target="_blank" rel="nofollow" href="http://www.go4expert.com/showthread.php?t=16094" style="margin: 0px; padding: 0px; color: #22229c; font-family: arial, tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; line-height: 20.5333347320557px; text-align: justify; white-space: normal;">Hide/Show and Toggle DIV usng JavaScript</a></noindex><br style="margin: 0px; padding: 0px; color: #000000; font-family: arial, tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; line-height: 20.5333347320557px; text-align: justify; white-space: normal;"><noindex><a target="_blank" rel="nofollow" href="http://www.go4expert.com/showthread.php?t=3923" style="margin: 0px; padding: 0px; color: #22229c; font-family: arial, tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; line-height: 20.5333347320557px; text-align: justify; white-space: normal;">Arrays in Java script</a></noindex><br style="margin: 0px; padding: 0px; color: #000000; font-family: arial, tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; line-height: 20.5333347320557px; text-align: justify; white-space: normal;"><noindex><a target="_blank" rel="nofollow" href="http://www.go4expert.com/showthread.php?t=1947" style="margin: 0px; padding: 0px; color: #22229c; font-family: arial, tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; line-height: 20.5333347320557px; text-align: justify; white-space: normal;">Sorting A Un-Ordered List (UL) Using JavaScript</a></noindex><br style="margin: 0px; padding: 0px; color: #000000; font-family: arial, tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; line-height: 20.5333347320557px; text-align: justify; white-space: normal;"><noindex><a target="_blank" rel="nofollow" href="http://www.go4expert.com/showthread.php?t=374" style="margin: 0px; padding: 0px; color: #22229c; font-family: arial, tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; line-height: 20.5333347320557px; text-align: justify; white-space: normal;">Timer In JavaScript</a></noindex></span></pre><div class="jcomments-links"> <a class="comments-link" href="/idxfldr/2013-06-18-22-25-47/402-simple-image-rotation-in-javascript.html" title="Прокомментировать">Прокомментировать</a> </div>

	
	

</div>

</div>
					<div class="clearfix"></div>
				</div><!-- end item -->
							</div><!-- end spann -->
						
		</div><!-- end row -->
							<div class="items-row cols-1 row-3 row-fluid">
					<div class="span12">
				<div class="item column-1">
					
		
			<div class="blogview-item-wrapper">


<div class="item-header">

	
	
		<div class="page-header">

				<h4 class="">
						Кроссбраузерные 2D-трансформации с анимациями					</h4>
				
		
						
	</div>
		<div class="clearfix"></div>
</div>


<div class="blogview-item-image">
			
	</div>

<div class="blogview-item-body">


			

	<p>Не болейте. Решил сделать обзор интересного плагина и заодно дать рекомендации к использованию. </p>
<hr id="system-readmore" style="line-height: 15.8079996109009px;"><p style="line-height: 15.8079996109009px;"><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;">Для самых нетерпеливых — получится у нас </span><noindex><a target="_blank" rel="nofollow" href="http://www.sumteh.ru/examples/pages/exemple02.html" style="margin: 0px; padding: 0px; border: 0px; font-size: 13px; vertical-align: baseline; outline: 0px; color: #990099; font-family: Verdana, sans-serif; line-height: 20.7999992370605px;">так</a></noindex><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;">.  </span><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;">Плагин называется </span><noindex><a target="_blank" rel="nofollow" href="https://github.com/heygrady/transform/wiki/" style="margin: 0px; padding: 0px; border: 0px; font-size: 13px; vertical-align: baseline; outline: 0px; color: #990099; font-family: Verdana, sans-serif; line-height: 20.7999992370605px;">jQuery 2D Transformation Plugin</a></noindex><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;">. Он позволяет использовать анимацию свойств </span><noindex><a target="_blank" rel="nofollow" href="http://www.w3.org/TR/css3-2d-transforms/" style="margin: 0px; padding: 0px; border: 0px; font-size: 13px; vertical-align: baseline; outline: 0px; color: #990099; font-family: Verdana, sans-serif; line-height: 20.7999992370605px;">CSS 2D Transforms</a></noindex><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;">. </span></p>
<p><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;">Обзор с описанием свойств — в конце топика.</span><a name="habracut" style="margin: 0px; padding: 0px; border: 0px; font-size: 13px; vertical-align: baseline; outline: 0px; color: #6da3bd; font-family: Verdana, sans-serif; line-height: 20.7999992370605px;"></a><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;">Теперь вернемся к самому плагину. После его подключения мы можем писать такие вещи:</span></p>
<pre style="margin: 0px; padding: 0px; border: 0px; font-size: 13px; vertical-align: baseline; outline: 0px; word-break: break-all; overflow-y: hidden; overflow-x: auto; line-height: 20.7999992370605px;"><code class="javascript" style="margin: 0px; padding: 1px 4px; border: 1px solid #e1e1e8; font-size: 12px; vertical-align: baseline; outline: 0px; display: block; white-space: pre-wrap; font-family: Menlo, Monaco, 'Courier New', monospace; color: #222222; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; background: #f7f7f9;">
$(<span class="string" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: #339900;">'.example'</span>).click(<span class="keyword" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: #4d7386;">function</span>() {
    $(<span class="keyword" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: #4d7386;">this</span>).animate({rotate: <span class="string" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: #339900;">'+=45deg'</span>}, <span class="string" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: #339900;">'slow'</span>);
});

</code></pre>
<p><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;">Таким образом, по клику на элементе он повернется на 45°. Можно задать ряд свойств, например:</span></p>
<pre style="margin: 0px; padding: 0px; border: 0px; font-size: 13px; vertical-align: baseline; outline: 0px; word-break: break-all; overflow-y: hidden; overflow-x: auto; line-height: 20.7999992370605px;"><code class="javascript" style="margin: 0px; padding: 1px 4px; border: 1px solid #e1e1e8; font-size: 12px; vertical-align: baseline; outline: 0px; display: block; white-space: pre-wrap; font-family: Menlo, Monaco, 'Courier New', monospace; color: #222222; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; background: #f7f7f9;">
$(<span class="string" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: #339900;">'.example'</span>).click(<span class="keyword" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: #4d7386;">function</span>() {
    $(<span class="keyword" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: #4d7386;">this</span>).animate({
       rotate: <span class="string" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: #339900;">'+=45deg'</span>, <span class="comment" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: gray;">//Повернули</span>
       scale: [<span class="number" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: #2f98ff;">1.5</span>, <span class="number" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: #2f98ff;">1.5</span>] <span class="comment" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: gray;">// и при этом увеличили в 1.5 раза</span>
    }, <span class="string" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: #339900;">'slow'</span>);
});

</code></pre>
<p><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"></p>
<h4 style="margin: 0px; padding: 0px; border: 0px; font-size: 16px; vertical-align: baseline; outline: 0px; font-weight: normal; color: #000000; font-family: Verdana, sans-serif; line-height: 20.7999992370605px;">Цепочки анимаций</h4>
<p><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;">Цепочки анимированных трансформаций открывают нам большие возможности сделать клевые вещи без флеша. Но здесь имеется два подводных камня, которые мы преодолеем, и третий небольшой камешек, которого только гроб исправит.</span><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;">Во-первых, по-умолчанию в джеквери доступно два вида easing'а: линейный и нарастающий. В большинстве случаев для создания красивой цепочки анимации нам понадобятся именно линейные анимации, но, если это не указать, джеквери будет использовать нарастающую. Для этого немного видоизменяем наш код, добавляя параметр «linear»:</span><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"></p>
<pre style="margin: 0px; padding: 0px; border: 0px; font-size: 13px; vertical-align: baseline; outline: 0px; word-break: break-all; overflow-y: hidden; overflow-x: auto; line-height: 20.7999992370605px;"><code class="javascript" style="margin: 0px; padding: 1px 4px; border: 1px solid #e1e1e8; font-size: 12px; vertical-align: baseline; outline: 0px; display: block; white-space: pre-wrap; font-family: Menlo, Monaco, 'Courier New', monospace; color: #222222; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; background: #f7f7f9;">
$(<span class="string" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: #339900;">'.example'</span>).click(<span class="keyword" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: #4d7386;">function</span>() {
    $(<span class="keyword" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: #4d7386;">this</span>).animate({
       rotate: <span class="string" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: #339900;">'+=45deg'</span>, <span class="comment" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: gray;">//Повернули</span>
       scale: [<span class="number" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: #2f98ff;">1.5</span>, <span class="number" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: #2f98ff;">1.5</span>] <span class="comment" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: gray;">// // X (ширина) и Y(высота).</span>
    }, <span class="string" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: #339900;">'slow'</span>, <span class="string" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: #339900;">'linear'</span>);
});

</code></pre>
<p><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;">Наверняка многие знают, как сделать цепочку анимации, но на всякий случай расскажу. Для создания цепочки анимаций просто вызываем новую функцию после описания свойств текущей анимации:</span></p>
<pre style="margin: 0px; padding: 0px; border: 0px; font-size: 13px; vertical-align: baseline; outline: 0px; word-break: break-all; overflow-y: hidden; overflow-x: auto; line-height: 20.7999992370605px;"><code class="javascript" style="margin: 0px; padding: 1px 4px; border: 1px solid #e1e1e8; font-size: 12px; vertical-align: baseline; outline: 0px; display: block; white-space: pre-wrap; font-family: Menlo, Monaco, 'Courier New', monospace; color: #222222; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; background: #f7f7f9;">
$(<span class="string" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: #339900;">'.example'</span>).click(<span class="keyword" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: #4d7386;">function</span>() {
    <span class="keyword" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: #4d7386;">var</span> exemple = $(<span class="keyword" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: #4d7386;">this</span>); <span class="comment" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: gray;">// Не люблю лишние вызововы $;</span>
    exemple.animate({
       rotate: <span class="string" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: #339900;">'+=45deg'</span>,
       scale: [<span class="number" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: #2f98ff;">1.5</span>, <span class="number" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: #2f98ff;">1.5</span>]
    }, <span class="string" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: #339900;">'slow'</span>, <span class="string" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: #339900;">'linear'</span>, <span class="keyword" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: #4d7386;">function</span>(){
                exemple.animate({
                     rotate: <span class="string" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: #339900;">'+=45deg'</span>, <span class="comment" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: gray;">//Напоминаю, что запись вида += в новых версиях джеквери означает, что к текущему значению прибавляем новое.</span>
                     scale: [<span class="number" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: #2f98ff;">1.5</span>, <span class="number" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: #2f98ff;">1.5</span>] 
                });
       });
});

</code></pre>
<p><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;">Второй подводный камень заключается в том, что браузеры (кроме оперы) страшно тормозят с прорисовкой нашего трансформируемого объекта, если мы используем translate, translateX или translateY в цепочках анимаций. Первый шаг все отрисовывают нормально, а вот второй и последующие совершенно непредсказуемо, вплоть до пропуска звеньев анимации.</span><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><noindex><a target="_blank" rel="nofollow" href="http://www.sumteh.ru/examples/pages/exemple01.html" style="margin: 0px; padding: 0px; border: 0px; font-size: 13px; vertical-align: baseline; outline: 0px; color: #990099; font-family: Verdana, sans-serif; line-height: 20.7999992370605px;">Вот, что получается</a></noindex><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"> (смотреть в хроме или фф).</span><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;">Побороть эту напасть можно — нужно использовать top, left, bottom или right вместо translate'ов:</span></p>
<pre style="margin: 0px; padding: 0px; border: 0px; font-size: 13px; vertical-align: baseline; outline: 0px; word-break: break-all; overflow-y: hidden; overflow-x: auto; line-height: 20.7999992370605px;"><code class="javascript" style="margin: 0px; padding: 1px 4px; border: 1px solid #e1e1e8; font-size: 12px; vertical-align: baseline; outline: 0px; display: block; white-space: pre-wrap; font-family: Menlo, Monaco, 'Courier New', monospace; color: #222222; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; background: #f7f7f9;">
$(<span class="string" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: #339900;">'.example'</span>).click(<span class="keyword" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: #4d7386;">function</span>() {
    $(<span class="keyword" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: #4d7386;">this</span>).animate({
       rotate: <span class="string" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: #339900;">'+=45deg'</span>, <span class="comment" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: gray;">//Повернули</span>
       scale: [<span class="number" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: #2f98ff;">1.5</span>, <span class="number" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: #2f98ff;">1.5</span>] <span class="comment" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: gray;">// // X (ширина) и Y(высота).</span>
       left: <span class="string" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: #339900;">'+= 20px'</span>,
       top: <span class="string" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: #339900;">'+=30px'</span>
    }, <span class="string" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: #339900;">'slow'</span>, <span class="string" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; outline: 0px; color: #339900;">'linear'</span>);
});

</code></pre>
<p><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><noindex><a target="_blank" rel="nofollow" href="http://www.sumteh.ru/examples/pages/exemple02.html" style="margin: 0px; padding: 0px; border: 0px; font-size: 13px; vertical-align: baseline; outline: 0px; color: #990099; font-family: Verdana, sans-serif; line-height: 20.7999992370605px;">Финальный результат</a></noindex><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"> и </span><noindex><a target="_blank" rel="nofollow" href="http://jsfiddle.net/SDz4n/2/" style="margin: 0px; padding: 0px; border: 0px; font-size: 13px; vertical-align: baseline; outline: 0px; color: #990099; font-family: Verdana, sans-serif; line-height: 20.7999992370605px;">еще пример, с летающим блоком с текстом</a></noindex><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;">.</span><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;">Третий подводный камешек заключается в том, что ИЕ 6-8 при трансформациях png-картинок с прозрачностью рисует черный контур на границах прозрачности:</span><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><img src="http://habrastorage.org/storage1/36e488da/632ddf48/131f6f71/edd129eb.png" style="margin: 0px; padding: 0px; font-size: 13px; vertical-align: middle; outline: 0px; max-width: 100%; color: #000000; font-family: Verdana, sans-serif; line-height: 20.7999992370605px;"><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;">Поговаривают, что такая же фигня со шрифтами, а еще поговаривают, что zoom:1 лечит шрифты.</span><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;">Однако, меня это все не сильно расстраивает, в ИЕ9 все в порядке да и черный контур в старых ИЕ смотрится даже несколько стильно ;)</span><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;">Тем не менее, если кто знает, можно ли это исправить, пишите!</span><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"></p>
<h4 style="margin: 0px; padding: 0px; border: 0px; font-size: 16px; vertical-align: baseline; outline: 0px; font-weight: normal; color: #000000; font-family: Verdana, sans-serif; line-height: 20.7999992370605px;">Cool stuff, bro!</h4>
<p><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;">На закуску, список свойств CSS3 transforms, а также бонусных, которые есть в плагине:</span><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><strong style="margin: 0px; padding: 0px; border: 0px; font-size: 13px; vertical-align: baseline; outline: 0px; color: #000000; font-family: Verdana, sans-serif; line-height: 20.7999992370605px;">matrix</strong><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;">: [1, 0, 0, 1, 0, 0] — Осуществяет 2D преобразование в виде матрицы преобразования из шести значений. Курить это достаточно трудно</span><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><strong style="margin: 0px; padding: 0px; border: 0px; font-size: 13px; vertical-align: baseline; outline: 0px; color: #000000; font-family: Verdana, sans-serif; line-height: 20.7999992370605px;">reflect</strong><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;">: true — бонусное свойство, поворачивает элемент на 180°</span><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><strong style="margin: 0px; padding: 0px; border: 0px; font-size: 13px; vertical-align: baseline; outline: 0px; color: #000000; font-family: Verdana, sans-serif; line-height: 20.7999992370605px;">reflectX</strong><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;">: true — бонусное, отражает с ног на голову</span><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><strong style="margin: 0px; padding: 0px; border: 0px; font-size: 13px; vertical-align: baseline; outline: 0px; color: #000000; font-family: Verdana, sans-serif; line-height: 20.7999992370605px;">reflectXY</strong><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;">: true — бонусное. То же, что и reflectX + rotate(-90deg)</span><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><strong style="margin: 0px; padding: 0px; border: 0px; font-size: 13px; vertical-align: baseline; outline: 0px; color: #000000; font-family: Verdana, sans-serif; line-height: 20.7999992370605px;">reflectY</strong><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;">: true — бонусное, просто отражает вниз</span><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><strong style="margin: 0px; padding: 0px; border: 0px; font-size: 13px; vertical-align: baseline; outline: 0px; color: #000000; font-family: Verdana, sans-serif; line-height: 20.7999992370605px;">rotate: '45deg'</strong><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"> — поворот, он и в Африке поворот:</span><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><img src="http://habrastorage.org/storage1/2c8ddd15/72d1c4a7/0821cd17/27d5e7a4.png" style="margin: 0px; padding: 0px; font-size: 13px; vertical-align: middle; outline: 0px; max-width: 100%; color: #000000; font-family: Verdana, sans-serif; line-height: 20.7999992370605px;"><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><strong style="margin: 0px; padding: 0px; border: 0px; font-size: 13px; vertical-align: baseline; outline: 0px; color: #000000; font-family: Verdana, sans-serif; line-height: 20.7999992370605px;">skewX</strong><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;">: '10deg, </span><strong style="margin: 0px; padding: 0px; border: 0px; font-size: 13px; vertical-align: baseline; outline: 0px; color: #000000; font-family: Verdana, sans-serif; line-height: 20.7999992370605px;">skewY</strong><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;">: '10deg', </span><strong style="margin: 0px; padding: 0px; border: 0px; font-size: 13px; vertical-align: baseline; outline: 0px; color: #000000; font-family: Verdana, sans-serif; line-height: 20.7999992370605px;">skew</strong><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;">: ['10deg', '10deg'] — искажение в градусах. Как это выглядит, показано ниже</span><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><img src="http://habrastorage.org/storage1/d123ec53/6d09a16f/8f52e522/e9099ee5.png" style="margin: 0px; padding: 0px; font-size: 13px; vertical-align: middle; outline: 0px; max-width: 100%; color: #000000; font-family: Verdana, sans-serif; line-height: 20.7999992370605px;"><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><strong style="margin: 0px; padding: 0px; border: 0px; font-size: 13px; vertical-align: baseline; outline: 0px; color: #000000; font-family: Verdana, sans-serif; line-height: 20.7999992370605px;">scale</strong><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;">: [1.5, 1.5], </span><strong style="margin: 0px; padding: 0px; border: 0px; font-size: 13px; vertical-align: baseline; outline: 0px; color: #000000; font-family: Verdana, sans-serif; line-height: 20.7999992370605px;">scaleX</strong><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;">: 1.5, </span><strong style="margin: 0px; padding: 0px; border: 0px; font-size: 13px; vertical-align: baseline; outline: 0px; color: #000000; font-family: Verdana, sans-serif; line-height: 20.7999992370605px;">scaleY</strong><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;">: 1.5 — масштабирование:</span><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><img src="http://habrastorage.org/storage1/ffaab589/3af2fbb9/0c86f583/253b223a.png" style="margin: 0px; padding: 0px; font-size: 13px; vertical-align: middle; outline: 0px; max-width: 100%; color: #000000; font-family: Verdana, sans-serif; line-height: 20.7999992370605px;"><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><strong style="margin: 0px; padding: 0px; border: 0px; font-size: 13px; vertical-align: baseline; outline: 0px; color: #000000; font-family: Verdana, sans-serif; line-height: 20.7999992370605px;">translate</strong><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;">: ['20px', '20px'], </span><strong style="margin: 0px; padding: 0px; border: 0px; font-size: 13px; vertical-align: baseline; outline: 0px; color: #000000; font-family: Verdana, sans-serif; line-height: 20.7999992370605px;">translateX</strong><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;">: 20px', </span><strong style="margin: 0px; padding: 0px; border: 0px; font-size: 13px; vertical-align: baseline; outline: 0px; color: #000000; font-family: Verdana, sans-serif; line-height: 20.7999992370605px;">translateY</strong><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;">: '20px' — движение. Использовать не рекомендую, лучше </span><strong style="margin: 0px; padding: 0px; border: 0px; font-size: 13px; vertical-align: baseline; outline: 0px; color: #000000; font-family: Verdana, sans-serif; line-height: 20.7999992370605px;">left</strong><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;">, </span><strong style="margin: 0px; padding: 0px; border: 0px; font-size: 13px; vertical-align: baseline; outline: 0px; color: #000000; font-family: Verdana, sans-serif; line-height: 20.7999992370605px;">right</strong><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;">, </span><strong style="margin: 0px; padding: 0px; border: 0px; font-size: 13px; vertical-align: baseline; outline: 0px; color: #000000; font-family: Verdana, sans-serif; line-height: 20.7999992370605px;">top</strong><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;">, </span><strong style="margin: 0px; padding: 0px; border: 0px; font-size: 13px; vertical-align: baseline; outline: 0px; color: #000000; font-family: Verdana, sans-serif; line-height: 20.7999992370605px;">bottom</strong><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;">. В обоих сслучаях получится так:</span><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><img src="http://habrastorage.org/storage1/c7c2df80/2a0ee11a/368d57cc/e69586b6.png" style="margin: 0px; padding: 0px; font-size: 13px; vertical-align: middle; outline: 0px; max-width: 100%; color: #000000; font-family: Verdana, sans-serif; line-height: 20.7999992370605px;"><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><strong style="margin: 0px; padding: 0px; border: 0px; font-size: 13px; vertical-align: baseline; outline: 0px; color: #000000; font-family: Verdana, sans-serif; line-height: 20.7999992370605px;">origin</strong><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;">: ['20%', '20%'] — Используется при определении точки отсчета для применения трансформации к элементу. Например, при повороте rotate по умолчанию точкой отсчета будет центр элемента. А при значениях origin: 0 0 точкой отсчета будет верхний левый угол:</span><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><img src="http://habrastorage.org/storage1/24295a2b/417700f5/5901237d/b3f251f5.png" style="margin: 0px; padding: 0px; font-size: 13px; vertical-align: middle; outline: 0px; max-width: 100%; color: #000000; font-family: Verdana, sans-serif; line-height: 20.7999992370605px;"><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;">Почему-то в комментариях в файле плагина написано:</span><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;">— transformOrigin is not accessible. </span><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;">Но работать должно. Возможно, просто не сразу реализовали и забыли удалить коммент.</span><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><br style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;">Посмотреть часть этих свойств в действии, а также получить кроссбраузерный код (в т.ч. для ИЕ 6-8) можно </span><noindex><a target="_blank" rel="nofollow" href="http://www.useragentman.com/IETransformsTranslator/index.html" style="margin: 0px; padding: 0px; border: 0px; font-size: 13px; vertical-align: baseline; outline: 0px; color: #990099; font-family: Verdana, sans-serif; line-height: 20.7999992370605px;">тут</a></noindex><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"> (почему-то сайт плохо работает в Опере). Только учтите, что сайт не использует возможности ИЕ9, в котором эти свойства доступны с префиксом -ms-, а скармливает ему -ms-filter-матрицу.</span></p>
<p><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"> </span></p>
<p><span style="color: #000000; font-family: Verdana, sans-serif; font-size: 13px; line-height: 20.7999992370605px;"><span style="color: #000000; font-family: Verdana, sans-serif; font-size: small;">http://habrahabr.ru/post/123000/</span></span></p><div class="jcomments-links"> <a class="comments-link" href="/idxfldr/2013-06-18-22-25-47/401-2d.html" title="Прокомментировать">Прокомментировать</a> </div>

	
	

</div>

</div>
					<div class="clearfix"></div>
				</div><!-- end item -->
							</div><!-- end spann -->
						
		</div><!-- end row -->
							<div class="items-row cols-1 row-4 row-fluid">
					<div class="span12">
				<div class="item column-1">
					
		
			<div class="blogview-item-wrapper">


<div class="item-header">

	
	
		<div class="page-header">

				<h4 class="">
						Using MySQL and memcached with Java					</h4>
				
		
						
	</div>
		<div class="clearfix"></div>
</div>


<div class="blogview-item-image">
			
	</div>

<div class="blogview-item-body">


			

	<p>The <code class="literal">com.danga.MemCached</code> class within Java provides a native interface to <span class="command"><strong>memcached</strong></span> instances. You can obtain the client from <noindex><a target="_blank" rel="nofollow" class="ulink" href="https://github.com/gwhalin/Memcached-Java-Client/downloads">https://github.com/gwhalin/Memcached-Java-Client/downloads</a></noindex>. The Java class uses hashes that are compatible with <code class="literal">libmemcached</code>, so you can mix and match Java and <code class="literal">libmemcached</code> applications accessing the same <span class="command"><strong>memcached</strong></span> instances. The serialization between Java and other interfaces are not compatible. If this is a problem, use JSON or a similar nonbinary serialization format.</p>
<div class="jcomments-links"><a class="readmore-link" href="/idxfldr/2013-06-18-22-25-47/400-using-mysql-and-memcached-with-java.html" title="Using MySQL and memcached with Java">Читать больше...</a> <a class="comments-link" href="/idxfldr/2013-06-18-22-25-47/400-using-mysql-and-memcached-with-java.html#addcomments" title="Прокомментировать">Прокомментировать</a> </div>

	
	

</div>

</div>
					<div class="clearfix"></div>
				</div><!-- end item -->
							</div><!-- end spann -->
						
		</div><!-- end row -->
							<div class="items-row cols-1 row-5 row-fluid">
					<div class="span12">
				<div class="item column-1">
					
		
			<div class="blogview-item-wrapper">


<div class="item-header">

	
	
		<div class="page-header">

				<h4 class="">
						How to use Memcache with PHP					</h4>
				
		
						
	</div>
		<div class="clearfix"></div>
</div>


<div class="blogview-item-image">
			
	</div>

<div class="blogview-item-body">


			

	<p>Today I have new article for PHP. Last time I did post about <noindex><a rel="nofollow" href="http://www.script-tutorials.com/how-to-use-apc-caching-with-php/" target="_blank">Memcache with PHP</a></noindex>. Today we will talking about caching in PHP again. I will show you how you can use <strong>Memcache in PHP</strong>. We will prepare useful class for working with Memcache for us and several examples. Memcache itself providing procedural and object oriented interface to memcached, highly effective caching daemon, which was especially designed to decrease database load in dynamic web applications.<br><span id="more-1048"></span></p>
<div class="jcomments-links"><a class="readmore-link" href="/idxfldr/2013-06-18-22-25-47/399-how-to-use-memcache-with-php.html" title="How to use Memcache with PHP">Читать больше...</a> <a class="comments-link" href="/idxfldr/2013-06-18-22-25-47/399-how-to-use-memcache-with-php.html#addcomments" title="Прокомментировать">Прокомментировать</a> </div>

	
	

</div>

</div>
					<div class="clearfix"></div>
				</div><!-- end item -->
							</div><!-- end spann -->
						
		</div><!-- end row -->
							<div class="items-row cols-1 row-6 row-fluid">
					<div class="span12">
				<div class="item column-1">
					
		
			<div class="blogview-item-wrapper">


<div class="item-header">

	
	
		<div class="page-header">

				<h4 class="">
						Кэширование и memcached					</h4>
				
		
						
	</div>
		<div class="clearfix"></div>
</div>


<div class="blogview-item-image">
			
	</div>

<div class="blogview-item-body">


			

	<p>Кэширование сегодня является неотъемлемой частью любого Web-проекта, не обязательно высоконагруженного. Для каждого ресурса критичной для пользователя является такая характеристика, как время отклика сервера. Увеличение времени отклика сервера приводит к оттоку посетителей. Следовательно, необходимо минимизировать время отклика: для этого необходимо уменьшать время, требуемое на формирование ответа пользователю, а ответ пользователю требует получить данные из каких-то внешних ресурсов (backend). Этими ресурсами могут быть как базы данных, так и любые другие относительно медленные источники данных (например, удаленный файловый сервер, на котором мы уточняем количество свободного места). Для генерации одной страницы достаточно сложного ресурса нам может потребоваться совершить десятки подобных обращений. Многие из них будут быстрыми: 20 мс и меньше, однако всегда существует некоторое небольшое количество запросов, время вычисления которых может исчисляться секундами или минутами (даже в самой оптимизированной системе один могут быть, хотя их количество должно быть минимально). Если сложить всё то время, которое мы затратим на ожидание результатов запросов (если же мы будем выполнять запросы параллельно, то возьмем время вычисления самого долгого запроса), мы получим неудовлетворительное время отклика.<br><br> Решением этой задачи является кэширование: мы помещаем результат вычислений в некоторое хранилище (например, memcached), которое обладает отличными характеристиками по времени доступа к информации. Теперь вместо обращений к медленным, сложным и тяжелым backend’ам нам достаточно выполнить запрос к быстрому кэшу.</p>
<div class="jcomments-links"><a class="readmore-link" href="/idxfldr/2013-06-18-22-25-47/398-memcached.html" title="Кэширование и memcached">Читать больше...</a> <a class="comments-link" href="/idxfldr/2013-06-18-22-25-47/398-memcached.html#addcomments" title="Прокомментировать">Прокомментировать</a> </div>

	
	

</div>

</div>
					<div class="clearfix"></div>
				</div><!-- end item -->
							</div><!-- end spann -->
						
		</div><!-- end row -->
							<div class="items-row cols-1 row-7 row-fluid">
					<div class="span12">
				<div class="item column-1">
					
		
			<div class="blogview-item-wrapper">


<div class="item-header">

	
	
		<div class="page-header">

				<h4 class="">
						Ruby on Rails. Установка, настройка, начало работы					</h4>
				
		
						
	</div>
		<div class="clearfix"></div>
</div>


<div class="blogview-item-image">
			
	</div>

<div class="blogview-item-body">


			

	<p>В этой маленькой статье, которую с удовольствием прочитал бы сам неделю назад, я попытался собрать все вещи, которые понадобились бы человеку, задумай он «с нуля» написать приложение на RoR. То есть не углубляясь ни в одну из областей, описать необходимый минимум действий, чтобы установить, настроить и написать своё первое приложение.Здесь собрано, как мне кажется, всё, что нужно и я надеюсь этот текст сэкономит кому-нибудь несколько часов поиска в интернете). Сам изучаю RoR вторую неделю, так что не судите строго).</p>
<div class="jcomments-links"><a class="readmore-link" href="/idxfldr/2013-06-18-22-25-47/397-ruby-on-rails.html" title="Ruby on Rails. Установка, настройка, начало работы">Читать больше...</a> <a class="comments-link" href="/idxfldr/2013-06-18-22-25-47/397-ruby-on-rails.html#addcomments" title="Прокомментировать">Прокомментировать</a> </div>

	
	

</div>

</div>
					<div class="clearfix"></div>
				</div><!-- end item -->
							</div><!-- end spann -->
						
		</div><!-- end row -->
							<div class="items-row cols-1 row-8 row-fluid">
					<div class="span12">
				<div class="item column-1">
					
		
			<div class="blogview-item-wrapper">


<div class="item-header">

	
	
		<div class="page-header">

				<h4 class="">
						Почему вы никогда не должны использовать MongoDB					</h4>
				
		
						
	</div>
		<div class="clearfix"></div>
</div>


<div class="blogview-item-image">
			
	</div>

<div class="blogview-item-body">


			

	<p>Дисклеймер от автора (автор — девушка): Я не разрабатываю движки баз данных. Я создаю веб-приложения. Я участвую в 4-6 разных проектах каждый год, то есть создаю <strong>много</strong> веб-приложений. Я вижу много приложений с различными требованиями и различными потребностями хранения данных. Я разворачивала большинство хранилищ, о которых вы слышали, и несколько, о которых даже не подозреваете.<br><br> Несколько раз я делала неправильный выбор СУБД. Эта история об одном таком выборе — почему мы сделали такой выбор, как бы узнали что выбор был неверен и как мы с этим боролись.Это все произошло на проекте с открытым исходным кодом, называемым Diaspora.</p>
<div class="jcomments-links"><a class="readmore-link" href="/idxfldr/2013-06-18-22-25-47/395-mongodb.html" title="Почему вы никогда не должны использовать MongoDB">Читать больше...</a> <a class="comments-link" href="/idxfldr/2013-06-18-22-25-47/395-mongodb.html#addcomments" title="Прокомментировать">Прокомментировать</a> </div>

	
	

</div>

</div>
					<div class="clearfix"></div>
				</div><!-- end item -->
							</div><!-- end spann -->
						
		</div><!-- end row -->
							<div class="items-row cols-1 row-9 row-fluid">
					<div class="span12">
				<div class="item column-1">
					
		
			<div class="blogview-item-wrapper">


<div class="item-header">

	
	
		<div class="page-header">

				<h4 class="">
						Интервью с Джо Армстронгом, одним из создателей языка Erlang					</h4>
				
		
						
	</div>
		<div class="clearfix"></div>
</div>


<div class="blogview-item-image">
			
	</div>

<div class="blogview-item-body">


			

	<p> <strong>Аннотация: </strong> Джо Армстронг — один из создателей языка Erlang. Работая в лаборатории Ericsson в 1986 году, он входил в состав команды, которая разработала и реализовала первую версию языка. С тех пор, помимо работы над самим языком, он написал несколько книг об Erlang, провел первый учебный курс по Erlang и обучил языку сотни программистов. Невзирая на свой напряженный график (Джо регулярно читает лекции и выступает на конференциях), он любезно согласился дать интервью нашему журналу.</p>
<blockquote class="abstract"><div class="jcomments-links"><a class="readmore-link" href="/idxfldr/2013-06-18-22-25-47/393-erlang-2.html" title="Интервью с Джо Армстронгом, одним из создателей языка Erlang">Читать больше...</a> <a class="comments-link" href="/idxfldr/2013-06-18-22-25-47/393-erlang-2.html#addcomments" title="Прокомментировать">Прокомментировать</a> </div>

	
	

</blockquote></div>

</div>
					<div class="clearfix"></div>
				</div><!-- end item -->
							</div><!-- end spann -->
						
		</div><!-- end row -->
							<div class="items-row cols-1 row-10 row-fluid">
					<div class="span12">
				<div class="item column-1">
					
		
			<div class="blogview-item-wrapper">


<div class="item-header">

	
	
		<div class="page-header">

				<h4 class="">
						Знакомимся с Erlang – языком программирования для распределенных систем					</h4>
				
		
						
	</div>
		<div class="clearfix"></div>
</div>


<div class="blogview-item-image">
			
	</div>

<div class="blogview-item-body">


			

	<p> Каждому из нас знакома проблема, когда пароль параноидально-настроенного юзверя никак не хочет поддаваться брутфорсу. И каждого, наверняка, посещала мысль, что было бы здорово замутить под это дело распределенные вычисления. Но тут мало иметь свой ботнет – необходим соответствующий инструментарий. Увы, большей частью он заточен под всякую научную пургу. Но что тебе мешает написать прогу для распределенного брута? Для этого есть прекрасный инструмент - язык Erlang!</p>
<div class="jcomments-links"><a class="readmore-link" href="/idxfldr/2013-06-18-22-25-47/392-erlang-1.html" title="Знакомимся с Erlang – языком программирования для распределенных систем">Читать больше...</a> <a class="comments-link" href="/idxfldr/2013-06-18-22-25-47/392-erlang-1.html#addcomments" title="Прокомментировать">Прокомментировать</a> </div>

	
	

</div>

</div>
					<div class="clearfix"></div>
				</div><!-- end item -->
							</div><!-- end spann -->
						
		</div><!-- end row -->
							<div class="items-row cols-1 row-11 row-fluid">
					<div class="span12">
				<div class="item column-1">
					
		
			<div class="blogview-item-wrapper">


<div class="item-header">

	
	
		<div class="page-header">

				<h4 class="">
						Chicago Boss, Erlang для маленьких					</h4>
				
		
						
	</div>
		<div class="clearfix"></div>
</div>


<div class="blogview-item-image">
			
	</div>

<div class="blogview-item-body">


			

	<p>Бытует мнение, что Erlang отлично подходит для веба (и это правда), но для небольших сайтов его использование неоправдано.<a name="habracut"></a> Так ли это на самом деле?</p>
<div class="jcomments-links"><a class="readmore-link" href="/idxfldr/2013-06-18-22-25-47/391-chicago-boss-erlang.html" title="Chicago Boss, Erlang для маленьких">Читать больше...</a> <a class="comments-link" href="/idxfldr/2013-06-18-22-25-47/391-chicago-boss-erlang.html#addcomments" title="Прокомментировать">Прокомментировать</a> </div>

	
	

</div>

</div>
					<div class="clearfix"></div>
				</div><!-- end item -->
							</div><!-- end spann -->
						
		</div><!-- end row -->
							<div class="items-row cols-1 row-12 row-fluid">
					<div class="span12">
				<div class="item column-1">
					
		
			<div class="blogview-item-wrapper">


<div class="item-header">

	
	
		<div class="page-header">

				<h4 class="">
						 Техника: Составление методов (рефакторинг М. Фаулера) tutorial 					</h4>
				
		
						
	</div>
		<div class="clearfix"></div>
</div>


<div class="blogview-item-image">
			
	</div>

<div class="blogview-item-body">


			

	<p>Как сделать рефакторинг? Или как писать совершенный код? Большинство тех, кто задумываются над данным вопросом, знакомятся с книгой (<a href="/fauler_refactoringN.pdf">скачать</a>) Мартина Фаулера, «Рефакторинг». Итак, читаем о том, как книга была глубоко переработана и нашла свое применение в жизни.</p>
<div class="jcomments-links"><a class="readmore-link" href="/idxfldr/2013-06-18-22-25-47/390-tutorial.html" title=" Техника: Составление методов (рефакторинг М. Фаулера) tutorial ">Читать больше...</a> <a class="comments-link" href="/idxfldr/2013-06-18-22-25-47/390-tutorial.html#addcomments" title="Прокомментировать">Прокомментировать</a> </div>

	
	

</div>

</div>
					<div class="clearfix"></div>
				</div><!-- end item -->
							</div><!-- end spann -->
						
		</div><!-- end row -->
							<div class="items-row cols-1 row-13 row-fluid">
					<div class="span12">
				<div class="item column-1">
					
		
			<div class="blogview-item-wrapper">


<div class="item-header">

	
	
		<div class="page-header">

				<h4 class="">
						Лёгкий способ писать iOS приложения на вебе					</h4>
				
		
						
	</div>
		<div class="clearfix"></div>
</div>


<div class="blogview-item-image">
			
	</div>

<div class="blogview-item-body">


			

	<div class="hubs">Всем привет. Не так давно Габриель подарил нам игру <noindex><a target="_blank" rel="nofollow" href="http://habrahabr.ru/post/215291/">2048</a></noindex>. Это тот самый удивительный случай, когда клон игры становится более популярный, чем оригинал. Не малая часть успеха Габриеля — открытый код и, вуаля, MIT лицензия. Набрав чуть больше 20к очков, захотелось поделиться результатом с друзьями, кроме как сделать скриншот не получилось. Глянул аппстор на наличие клона с геймцентром или чем-то подобным — пусто. И тут подумал, почему бы нет?<div class="jcomments-links"><a class="readmore-link" href="/idxfldr/2013-06-18-22-25-47/389-ios.html" title="Лёгкий способ писать iOS приложения на вебе">Читать больше...</a> <a class="comments-link" href="/idxfldr/2013-06-18-22-25-47/389-ios.html#addcomments" title="Прокомментировать">Прокомментировать</a> </div>

	
	

</div>

</div>
					<div class="clearfix"></div>
				</div><!-- end item -->
							</div><!-- end spann -->
						
		</div><!-- end row -->
							<div class="items-row cols-1 row-14 row-fluid">
					<div class="span12">
				<div class="item column-1">
					
		
			<div class="blogview-item-wrapper">


<div class="item-header">

	
	
		<div class="page-header">

				<h4 class="">
						НАСА объявило конкурс компьютерных алгоритмов: работа в разгаре					</h4>
				
		
						
	</div>
		<div class="clearfix"></div>
</div>


<div class="blogview-item-image">
			
	</div>

<div class="blogview-item-body">


			

	<p><img src="http://habrastorage.org/getpro/habr/post_images/b21/c4a/073/b21c4a0733cb873a531fadb29d9574fd.jpg" width="300" style="float: right; margin-left: 5px; margin-right: 5px;">На сайте TopCoder размещён новый конкурс <noindex><a target="_blank" rel="nofollow" href="http://www.topcoder.com/asteroids/asteroiddatahunter/">NASA Asteroid Grand Challenge Series</a></noindex>. Задача конкурса — помочь в решении проблемы астероидов, которые могут врезаться в Землю и уничтожить человеческую расу. Конкретно, от программистов требуется разработать новые алгоритмы распознавания астероидов на изображениях с земных телескопов.<br><a name="habracut"></a><br> Конкурс НАСА начался 17 марта. Проект запущен совместно с частной компанией Planetary Resources, которая собирается добывать полезные ископаемые с астероидов.</p>
<div class="jcomments-links"><a class="readmore-link" href="/idxfldr/2013-06-18-22-25-47/388-2014-03-28-21-26-18.html" title="НАСА объявило конкурс компьютерных алгоритмов: работа в разгаре">Читать больше...</a> <a class="comments-link" href="/idxfldr/2013-06-18-22-25-47/388-2014-03-28-21-26-18.html#addcomments" title="Прокомментировать">Прокомментировать</a> </div>

	
	

</div>

</div>
					<div class="clearfix"></div>
				</div><!-- end item -->
							</div><!-- end spann -->
						
		</div><!-- end row -->
							<div class="items-row cols-1 row-15 row-fluid">
					<div class="span12">
				<div class="item column-1">
					
		
			<div class="blogview-item-wrapper">


<div class="item-header">

	
	
		<div class="page-header">

				<h4 class="">
						PHP и различные виды NoSQL					</h4>
				
		
						
	</div>
		<div class="clearfix"></div>
</div>


<div class="blogview-item-image">
			
	</div>

<div class="blogview-item-body">


			

	<div class="content html_format"><img src="http://habrastorage.org/getpro/habr/post_images/868/8a1/54e/8688a154e3be178aa518bfd20a33f0c7.png" align="right">В последнее время набирают популярность различные NoSQL базы данных. Эта статья начиналась как изучение особенностей графовой базы данных Neo4j. Но, в процессе подбора информации, мне захотелось систематизировать информацию о NoSQL решениях и о графовых базах данных, в частности.</div>
<div class="jcomments-links"><a class="readmore-link" href="/idxfldr/2013-06-18-22-25-47/387-php-nosql.html" title="PHP и различные виды NoSQL">Читать больше...</a> <a class="comments-link" href="/idxfldr/2013-06-18-22-25-47/387-php-nosql.html#addcomments" title="Прокомментировать">Прокомментировать</a> </div>

	
	

</div>

</div>
					<div class="clearfix"></div>
				</div><!-- end item -->
							</div><!-- end spann -->
						
		</div><!-- end row -->
							<div class="items-row cols-1 row-16 row-fluid">
					<div class="span12">
				<div class="item column-1">
					
		
			<div class="blogview-item-wrapper">


<div class="item-header">

	
	
		<div class="page-header">

				<h4 class="">
						Facebook научился распознавать лица в толпе с точностью 97,25 %					</h4>
				
		
						
	</div>
		<div class="clearfix"></div>
</div>


<div class="blogview-item-image">
			
	</div>

<div class="blogview-item-body">


			

	<p><img src="http://habrastorage.org/getpro/habr/post_images/68e/046/2ce/68e0462ced67327fe62bbd0470da29ba.jpg" alt="image"><br><br> Facebook разработал алгоритм под названием DeepFace, который позволяет идентифицировать лицо в толпе с точностью 97,25 %, что почти соответствует</p>
<p>способностям среднего человека (97,53 %), <noindex><a target="_blank" rel="nofollow" href="http://techcrunch.com/2014/03/18/faceook-deepface-facial-recognition/">пишет</a></noindex> TechCrunch.</p>
<div class="jcomments-links"><a class="readmore-link" href="/idxfldr/2013-06-18-22-25-47/386-facebook-97-25.html" title="Facebook научился распознавать лица в толпе с точностью 97,25 %">Читать больше...</a> <a class="comments-link" href="/idxfldr/2013-06-18-22-25-47/386-facebook-97-25.html#addcomments" title="Прокомментировать">Прокомментировать</a> </div>

	
	

</div>

</div>
					<div class="clearfix"></div>
				</div><!-- end item -->
							</div><!-- end spann -->
						
		</div><!-- end row -->
							<div class="items-row cols-1 row-17 row-fluid">
					<div class="span12">
				<div class="item column-1">
					
		
			<div class="blogview-item-wrapper">


<div class="item-header">

	
	
		<div class="page-header">

				<h4 class="">
						Команда Facebook выложила в открытый доступ язык Hack					</h4>
				
		
						
	</div>
		<div class="clearfix"></div>
</div>


<div class="blogview-item-image">
			
	</div>

<div class="blogview-item-body">


			

	<p>Новый язык Hack является прямым потомком PHP, основанным на его синтаксисе. Hack создан специально для виртуальной машины HHVM (Hip Hop Virtual Machine). Команда Facebook полностью перевела разработку на новый язык и называет эту миграцию большим успехом. Однако Facebook не отказывается от поддержки PHP и планирует доработать поддержку PHP5 в HHVM.<br> Подробная документация по языку доступна <noindex><a target="_blank" rel="nofollow" href="http://docs.hhvm.com/manual/en/hacklangref.php">здесь</a></noindex> (на английском языке).<br> Официальный сайт нового языка — <noindex><a target="_blank" rel="nofollow" href="http://hacklang.org/">http://hacklang.org/</a></noindex>.<br><a target="_blank" href="https://code.facebook.com/posts/264544830379293/hack-a-new-programming-language-for-hhvm/">Новость о релизе языка.</a></p>
<div class="jcomments-links"><a class="readmore-link" href="/idxfldr/2013-06-18-22-25-47/385-facebook-hack.html" title="Команда Facebook выложила в открытый доступ язык Hack">Читать больше...</a> <a class="comments-link" href="/idxfldr/2013-06-18-22-25-47/385-facebook-hack.html#addcomments" title="Прокомментировать">Прокомментировать</a> </div>

	
	

</div>

</div>
					<div class="clearfix"></div>
				</div><!-- end item -->
							</div><!-- end spann -->
						
		</div><!-- end row -->
							<div class="items-row cols-1 row-18 row-fluid">
					<div class="span12">
				<div class="item column-1">
					
		
			<div class="blogview-item-wrapper">


<div class="item-header">

	
	
		<div class="page-header">

				<h4 class="">
						Facebook ускорил PHP в девять раз благодаря HipHop VM					</h4>
				
		
						
	</div>
		<div class="clearfix"></div>
</div>


<div class="blogview-item-image">
			
	</div>

<div class="blogview-item-body">


			

	<p><img src="http://habrastorage.org/storage2/3d2/65a/7e3/3d265a7e3bd76dbf08665cbc3963c969.jpg" align="right">Компания Facebook продолжает работу по повышению производительности кода PHP. В 2010 году они выпустили компилятор HipHop (HPHPc), который транслировал PHP в C++, жертвуя некоторыми редко используемыми функциями PHP вроде <code>eval()</code>, но повышая производительность.<br><br> С активной аудиторией в 1,1 млрд человек, Facebook крайне заинтересован в увеличении производительности веб-приложений. Поскольку многие программисты хорошо знакомы с PHP, компания решила не отказываться от этого «медленного» языка, а постараться максимально оптимизировать его. Кстати, так же делает и «Вконтакте» с недавно представленной технологией <noindex><a target="_blank" rel="nofollow" href="http://habrahabr.ru/post/187214/">kPHP</a></noindex>.</p>
<div class="jcomments-links"><a class="readmore-link" href="/idxfldr/2013-06-18-22-25-47/384-facebook-php-hiphop-vm.html" title="Facebook ускорил PHP в девять раз благодаря HipHop VM">Читать больше...</a> <a class="comments-link" href="/idxfldr/2013-06-18-22-25-47/384-facebook-php-hiphop-vm.html#addcomments" title="Прокомментировать">Прокомментировать</a> </div>

	
	

</div>

</div>
					<div class="clearfix"></div>
				</div><!-- end item -->
							</div><!-- end spann -->
						
		</div><!-- end row -->
							<div class="items-row cols-1 row-19 row-fluid">
					<div class="span12">
				<div class="item column-1">
					
		
			<div class="blogview-item-wrapper">


<div class="item-header">

	
	
		<div class="page-header">

				<h4 class="">
						Несколько незамеченных подробностей о HipHop PHP					</h4>
				
		
						
	</div>
		<div class="clearfix"></div>
</div>


<div class="blogview-item-image">
			
	</div>

<div class="blogview-item-body">


			

	<p>Я думаю многие из вас слышали про HipHop PHP (далее hphp), разработанный программистами Facebook для оптимизации социальной сети с минимальными затратами по адаптации существующего кода. Но по какой-то причине, в интернете тема этого иструмента раскрыта, я считаю, не полностью. Большая часть тех, кто его использовал, или хотя бы крутил в руках, ограничивается лишь мануалами по установке, однако хотелось бы заглянуть немного глубже, что я и хочу сделать в этой статье.</p>
<div class="jcomments-links"><a class="readmore-link" href="/idxfldr/2013-06-18-22-25-47/383-hiphop-1.html" title="Несколько незамеченных подробностей о HipHop PHP">Читать больше...</a> <a class="comments-link" href="/idxfldr/2013-06-18-22-25-47/383-hiphop-1.html#addcomments" title="Прокомментировать">Прокомментировать</a> </div>

	
	

</div>

</div>
					<div class="clearfix"></div>
				</div><!-- end item -->
							</div><!-- end spann -->
						
		</div><!-- end row -->
						
				<div class="pagination">
				<p class="counter pull-right"> Page 1 of 11 </p>
				<ul><li class="pagination-start"><span class="pagenav">Начало</span></li><li class="pagination-prev"><span class="pagenav">Предыдущая</span></li><li><span class="pagenav">1</span></li><li><a title="2" href="/idxfldr/2013-06-18-22-25-47@start=20.html" class="pagenav">2</a></li><li><a title="3" href="/idxfldr/2013-06-18-22-25-47@start=40.html" class="pagenav">3</a></li><li><a title="4" href="/idxfldr/2013-06-18-22-25-47@start=60.html" class="pagenav">4</a></li><li><a title="5" href="/idxfldr/2013-06-18-22-25-47@start=80.html" class="pagenav">5</a></li><li><a title="6" href="/idxfldr/2013-06-18-22-25-47@start=100.html" class="pagenav">6</a></li><li><a title="7" href="/forum/index.html" class="pagenav">7</a></li><li><a title="8" href="/idxfldr/2013-06-18-22-25-47@start=140.html" class="pagenav">8</a></li><li><a title="9" href="/idxfldr/2013-06-18-22-25-47@start=160.html" class="pagenav">9</a></li><li><a title="10" href="/idxfldr/2013-06-18-22-25-47@start=180.html" class="pagenav">10</a></li><li class="pagination-next"><a title="Следующая" href="/idxfldr/2013-06-18-22-25-47@start=20.html" class="pagenav">Следующая</a></li><li class="pagination-end"><a title="Последняя" href="/idxfldr/2013-06-18-22-25-47@start=200.html" class="pagenav">Последняя</a></li></ul></div>
	</div>


						<!-- Content-bottom -->
											</div>

					<!-- Right sidebar -->
									</div>
			</div>
		</div>
		<!-- Mainbottom -->
		
		<!-- Bottom -->
			</div>

	<div id="footer-wrapper">
		<!-- Footer -->
					<div id="footer-row">
				<div class="container">
					<div id="footer" class="row">
						<div class="moduletable   span6">

<div class="custom">
	<p>Телефон <strong>+7 351 235 00 10</strong><br> Понедельник - Пятница С 9:00 до 18:00 </p>
<p><span style="font-family: Arial, sans-serif; font-size: 11px; line-height: 11.016666412353516px; text-align: center;">© 2005-2014 ИТ-Компания АльфаЛаВиста.Разработка программного обеспечения в Челябинске. Центр разработки программного обеспечения Alfalavista. Професиональная разработка программного обеспечения и архитектурных решений, ИТ аутсорсинг, автоматизация, web-разработка, mobile разработка, Android, SEO, AlfaSolutions, 1С<br></span></p></div>
</div><div class="moduletable   span6"><ul class="nav menu social"><li class="item-148"><a target="_blank" class="twitter" href="https://twitter.com/AlfaLaVista1%20%20">Twitter</a></li></ul></div>
					</div>
				</div>
			</div>
		
		<!-- Copyright -->
			</div>

			<p id="back-top">
			<a href="/idxfldr/2013-06-18-22-25-47.html#"><span></span>Вверх</a>
		</p>
	

	
	

	<script src="/templates/theme1204/js/jquery.isotope.min.js"></script><script src="/templates/theme1204/js/touch.gallery.js"></script><script src="/templates/theme1204/js/scripts.js"></script><noindex><!--Openstat--><span id="openstat1"></span>
<script type="text/javascript">
var openstat = { counter: 1, next: openstat };
(function(d, t, p) {
var j = d.createElement(t); j.async = true; j.type = "text/javascript";
j.src = ("https:" == p ? "https:" : "http:") + "//openstat.net/cnt.js";
var s = d.getElementsByTagName(t)[0]; s.parentNode.insertBefore(j, s);
})(document, "script", document.location.protocol);
</script><!--/Openstat--></noindex></div></body></html>