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

Дело было вечером, делать было нечего. Пора сделать мир немного лучше, — сказал я и сел рисовать ios клиент для фриланса. Ведь было-бы очень клево, мобильно отслеживать комментарии, читать и отвечать на сообщения, смотреть ленту проектов и даже если ничего из этого не выйдет, как минимум получить профит в проектировании сложного интерфейса и повысить себе карму. В блокноте набросал руками почти 20 экранов приложения, теперь постепенно, буду отрисовывать их и показывать в блоге.

Цепляю эту заключительную тему на этом блоге, что-бы напомнить всем, что я жив и принимаю заказы. С огромным удовольствием разработаю сложный интерфейс для вас, нарисую промо-сайт или спроектирую интерфейс под iPhone/iPad/Android. Под катом мои все контакты. Жду фидбека господа! К чему тут дрибббл? – Да просто так, для привлечения внимания!

Контакты:

Айсикю: 123068
Скайп: co.works.design
Dribbble: http://dribbble.com/kr1z
Twitter: http://twitter.com/#!/kr1z
Почта: co.works.design(дог)gmail.com

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

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

• Яндекс.Деньги
• WebMoney
• VISA
• Mastercard
• Сбербанк
• PayPal
• RBK Money
• QIWI
• CONTACT
• ePassporte
• Rapida
• e-port
• CyberPlat
• ASSIST
• Maestro
• Cirrus
• Diners Club
• American Express
• Switch
• Google checkout
• Solo
• Наличные рубли 1
• Наличные рубли 2
• Moneybookers
• IntellectMoney
• Единый кошелёк
• Z-Payment
• Western Union
• Юнистрим
• 2Checkout
• e-gold
• RBS WorldPay
• Наличные гривны
• Наличные доллары
• Наличные евро
• ROBOKASSA
• МОБИ.Деньги
• Деньги@mail.ru
• SMS
• Приват24
• LiqPay
• giropay
• Dotpay
• Neteller
• ClickandBuy
• EcoCard
• Ukash
• ChronoPay
• Laser
• Wirecard
• CLICK2PAY
• POLi
• paysafecard
• Грошi онлайн

Скачать иконки платежных систем в png: payment-icons.zip

Добрый день/ночь/вечер, сегодня закончим серию обзоров редакторов, я уже писал о редакторах под Windows и о php редакторах linux. Последняя остановка, это редакторы для горяче любимой операционной системы Mac OS. В этой системе, почти все интерфейсы, продуманы и удобны, спорить со мной в этом плане бесполезно, я страшный фанат Apple. Тема сегодняшнего поста, это php редакторы, которыми я пользовался в этой системе или пользуюсь сейчас. Рассматривать мы будем следующие редакторы: Coda, BBEdit, TextWrangler, Smultron. А теперь о каждом и подробней:

Начнем с простых и бесплатных:

TextWrangler

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

Его кстати выпускает компания Bare Bones Software, которая в свою очередь выпустила платный редактор BBEdit. Можно сказать TextWrangler выпустили как демо версию BBEdit, что-бы увеличить количество продаж платного продукта. Скачать можно на оф.сайте.

Smultron

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

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

BBEdit

Мощный редактор, является одним из самых популярных и профессиональных редакторов для операционной системы Mac OS. Этот редактор был сделан в первую очередь для разработчиков, но не кто не мешает вам в нем верстать. Редактор имеет много интересных возможностей, например серверный просмотр страниц (Preview Server Support) написанных на php и других серверных языках.

Включена поддержка Subversion, что помогает вам легко работать с многими хранилищами. Есть у программы огромный минус — большая стоимость, которая составляет $125 баксов.

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

Coda

Я по праву считаю Коду самым лучшим редактором для веб-программистов. У каждого свое мнение, у каждого свои вкусы, меня долго не могли переманить на этот редактор, но когда я попробовал в нем выполнить пару проектов, то влюбился в него полностью и бесповоротно. Чем же таким она меня привлекла спросите вы, сейчас расскажу, а пока скрин программы на закуску.

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

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

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

Как верстальщика, порадовал очень не плохой редактор css, который делает за нас половину роботы. Функция автодополнения и быстрого выбора css свойств.

Вообщем перечислять можно долго, скажу только, что свою стоимость 99$ программа отрабатывал по полной программе. Купить/скачать/попробовать можно на оф. сайте.

Вывод

Я упустил в своем обзоре и другие не плохие редакторы, такие как CSSEdit, TextMate и многие другие, которые заслуживают внимания, но только из-за того, что я с ними не познакомился должным образом. Как я говорил, мой личный выбор это Coda + Smultron (для мелких поправок). А какой выбор сделаешь ты, %user_name% ?

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

Сделать простое, горизонтальное и резиновое css меню проще простого. Есть несколько способов:

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

2. Использовать списки ul, li. Причем каждому элементу задавать css свойство float:left. Способ довольно неплохой и распространенный. Например в движке Wordpress, меню формируется именно в таком виде и мы очень легко можем придавать ему любой стиль и вид.

3. Использовать выравнивание текста justify. Если объяснять коротко, то после применения выравнивания justify все строки текста, кроме последней растягиваются на всю возможную ширину блока, по этому, для получения нужного эффекта нам нужно растянуть только одну строку. Мы добавляем длинный строковый inline элемент, который не помещается в первой строке и, следовательно, переносится на вторую, заставляя тем самым первую (наше меню) растянутся по всей ширине. В качестве такого элемента можно использовать пустой рисунок (Обычной называют blank.gif имеющий размер 1×1 пиксель) или любой строковый элемент с большим значением отступа.

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

css

.menu {
			text-align:justify !important;
			width:80%;
			background-image: url('fon.gif');
			margin:20px auto 0;
			padding:5px 10px;
			height:15px;
			overflow:hidden;
		}
		.menu a {
			color:white;
			text-decoration:none;
			padding-top: 5px;
			padding-bottom: 6px;
			padding-left: 10px;
			padding-right: 10px;
		}
		.menu a:hover {
			text-decoration:underline;
			background-color: #69ace3;
		}

html

<div class="menu">
	<a href="#">Главная</a>
	<a href="#">Дизайн</a>
	<a href="#">Верстка&nbsp;и&nbsp;кодинг</a>
	<a href="#">pro100design.net</a>
	<img src="blank.gif" width="99%" height="1" alt="">
</div>

Кому ничего не понятно, смотрите рабочий пример меню.

Скачать готовый скрипт css меню (4кб)

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

Кто угадает, что будет за сервис, получит доступ к бета тестированию.

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

Скачать: myicons.zip (1.6 мб)

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

В начале немного теории по алгоритму и план реализаци.

1. Запрашиваем страницу, где выводятся ваши ссылки, на примере моего блога и поисковика Яндекса, эта страница: http://yandex.ua/yandsearch?numdoc=50&pag=u&surl=pro100design.net&rdrnd=658752&rd=0&lr=145

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

3. Чистим текст от тегов и мусора, находим регулярным выражением нужные цифры и записываем в результат выполнения нашей функции.

Теперь о реализации. Запрашивать страницу можно разными способами, рассмотрим основные.

file_get_contents / fopen

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

cUrl

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

Яндекс.XML + cUrl

Наверное один из самых удачных способов реализации получения информации со страниц Яндекса. Вы регистрируетесь в сервисе на свой IP, где будет стоять скрипт и после этого без проблем можете выполнять до 1000 запросов в день, не боясь быть забаннеными в Яндексе. Очень удобный скрипт получения проиндексированных страниц написал Самборский, где он как раз использует Яндекс.XML и cUrl.

На закуску 2 скрипта.
Получаем количество проиндексированных страниц Яндекс и Google при помощи cUrl

<?
class method_curl
{
	// Инициализация curl
	function curl_start($url)
	{
		$ch = curl_init();
		curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
		curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
		curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 20);
		curl_setopt($ch, CURLOPT_ENCODING,'gzip,deflate');
		curl_setopt($ch, CURLOPT_URL, $url);
		curl_setopt($ch, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows; U; Windows NT 6.1; ru; ru:1");
		$data = curl_exec($ch);
		curl_close($ch);
		return $data;
	}
	// Получаем количество страниц в индексе Яндекса
	public function yandex_index($site_url)
	{
		$content = $this->curl_start('http://yandex.ru/yandsearch?date=&text= &spcctx=notfar&zone=all& wordforms=all&lang=all&within=0&from_day=&from_month= &from_year= &to_day=21 &to_month=7&to_year=2009&mime=all &site='.urlencode($site_url).'&rstr=&ds=&numdoc=10');
		$content = str_replace('&nbsp;тыс.','000',$content);
		$content = str_replace('&nbsp;млн','000000',$content);
		$content = str_replace('ничего не найдено','0',$content);
		preg_match('~<title>[^\d]*(\d+)[^\d]*</title>~',$content,$match);
		return $match[1];
	}
	// Получаем количество страниц в индексе Google
	public function google_index($site_url)
	{
		$content =  str_replace(',','',$this->curl_start('http://www.google.com/search?hl=en&safe=off&q=site:'.$site_url.'&btnG=Search'));
		preg_match('/<b>.+?<\/b>\s*-\s*<b>.+?<\/b>.+?<b>(.+?)<\/b>/',$content,$a);
		$count = str_replace(',','',htmlspecialchars_decode($a[1]));
		return $count;
	}
}

// Для вызовы и выполнения кода пишем
$analiz = new method_curl();
// Адрес сайта
$url = "pro100design.net";

// Вывод
echo "Анализ сайта: <b>".$url."</b><br />";
echo "Google: ".$analiz->google_index($url)."<br />";
echo "Яндекс: ".$analiz->yandex_index($url);
?>

Получаем количество проиндексированных страниц Яндекс и Google без помощи cUrl

<?
//Конвертируем полученные данные функцией file_get_contents
function _convert_file($utf = '')
{
  if($utf == '' || !is_string($utf)) return($utf);
  $max_count = 5;
  $max_mark = 248;
  $html = '';
  for($str_pos = 0; $str_pos < strlen($utf); $str_pos++) {
   $old_chr = $utf{$str_pos};
   $old_val = ord( $utf{$str_pos} );
   $new_val = 0;
   $utf8_marker = 0;
   if( $old_val > 127 ) {
     $mark = $max_mark;
     for($byte_ctr = $max_count; $byte_ctr > 2; $byte_ctr--) {
       if( ( $old_val & $mark  ) == ( ($mark << 1) & 255 ) ) {
         $utf8_marker = $byte_ctr - 1;
         break;
       }
       $mark = ($mark << 1) & 255;
     }
   }
   if($utf8_marker > 1 and isset( $utf{$str_pos + 1} ) ) {
     $str_off = 0;
     $new_val = $old_val & (127 >> $utf8_marker);
     for($byte_ctr = $utf8_marker; $byte_ctr > 1; $byte_ctr--) {
       if( (ord($utf{$str_pos + 1}) & 192) == 128 ) {
         $new_val = $new_val << 6;
         $str_off++;
         $new_val = $new_val | ( ord( $utf{$str_pos + $str_off} ) & 63 );
       }
       else $new_val = $old_val;
     }
     if ($new_val == 1025) { $html .= chr(168); }
     elseif ($new_val == 1105) { $html .= chr(184); }
     elseif (1040 <= $new_val and $new_val <= 1103) { $html .= chr($new_val - 848); }
     else { $html .= '&#'.$new_val.';'; }
     $str_pos = $str_pos + $str_off;
   }
   else { $html .= chr($old_val);$new_val = $old_val; }
  }
  return($html);
}

// Получаем количество страниц в индексе Яндекса
function yandex_index($url){
	$url=@urlencode($url);
	$str=@file_get_contents("http://yandex.ru/yandsearch?numdoc=10&serverurl={$url}");
	$str=_convert_file($str);
	$data = @eregi("<title>(.*)</title>", $str, $out);
	$result1 =  @trim($out[1]);

	$data = @eregi("нашлось(.*)страниц", $result1, $out2);
	$result2 =  @trim($out2[1]);
	if(@strlen($result2)<1){
		$data = @eregi("нашлась(.*)страниц", $result1, $out2);
		$result2 =  @trim($out2[1]);
	}
	$result2=str_replace("&nbsp;","",$result2);
	$result2=str_replace("млн","000000",$result2);
	$result2=str_replace("тыс.","000",$result2);
	if ($result2<1) $result2=0;
	return $result2;
}

// Получаем количество страниц в индексе Google
function google_index($url){
	if($_GET["debug"] == "7") echo "http://www.google.com/search?&q=allinurl:$url+ site:$url&hl=en";
	$file=@implode("",file("http://www.google.com/search?&q=site:$url&hl=en"));
	if(preg_match("!of (about )?<b>(.*?)</b> from!si",$file,$ok)){
		$result=$ok[2];
		$result=str_replace(",", "", $result);
	}
	else{
		if(preg_match("!No results found!si",$file)) $result="0";
		else $result="0";
	}
	return $result;
}

// Адрес сайта
$url = "pro100design.net";

// Вывод
echo "Анализ сайта: <b>".$url."</b><br />";
echo "Google: ".google_index($url)."<br />";
echo "Яндекс: ".yandex_index($url);
?>

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

Скачать исходники, можно тут: IndexPage_Yandex_Google.zip