SimpleCoding.org » Web разработка

Yii фреймворк: создание XML-RPC сервера

Владимир — Sat, 24 Dec 2011 20:15:06 +0000

На мой взгляд, XML-RPC протокол является одним из наиболее удобных способов передачи данных между Интернет-ресурсами. Можно, конечно, поспорить, но на изучение XML-RPC требуется минимальное количество времени, есть множество готовых библиотек, да и используется он очень широко. Поэтому я никогда не понимал, почему разработчики отличного фреймворка Yii решили не включать библиотеку для работы с XML-RPC в дистрибутив. Хотя, возможно, это вопрос времени

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

Примечание. Если вас интересует создание XML-RPC клиента, почитайте статью XML-RPC и Yii фреймворк.

Немного теории.

Мы можем использовать два основных подхода при создании XML-RPC сервера.

1) Отдельный скрипт. В этом случае создаём файл с именем вроде xmlrpc.php и помещаем его в корень сайта. В нём будет находиться код обработки XML-RPC запросов. Такой подход используется, например, в WordPress. Достоинство в том, что вам не нужно вносить никаких изменений в код вашего проекта, т.е. XML-RPC интерфейс получается независимым. С другой стороны, независимость приводит к тому, что вам будет гораздо сложнее работать со встроенными библиотеками фреймворка.

2) Использование действий контроллера. Этот вариант гораздо интереснее. Во-первых, вы автоматически получаете доступ ко всем возможностям Yii. Во-вторых, в этом случае XML-RPC методы можно разделить по модулям. Т.е. подключение / отключение модуля будет автоматически подключать / отключать соответствующие XML-RPC методы.

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

Какие библиотеки можно использовать?

По большому счёту – любые, т.к. подключение сторонних библиотек к Yii выполняется без особых проблем. Я обычно использую библиотеку Incutio XML-RPC Library. Она достаточно простая, работает без проблем и, кроме того, используется в WordPress, а эта CMS используется очень часто.

Переходим к практике.

Шаг 1. Подключаем библиотеку.

Для этого скачиваем библиотеку и сохраняем файл IXR_Library.php в папку protected/vendors. Теперь подключить библиотеку можно так:

Yii::import('application.vendors.*');
require_once ('IXR_Library.php');

Этот код можно добавить в любое действие (action) контроллера.

Шаг 2. Создаём точку входа.

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

class MyController extends Controller {
	...
	public function actionXmlrpc() {
		Yii::import('application.vendors.*');
		require_once ('IXR_Library.php');

		$server = new IXR_Server(array(
			'my.hello' => array($this,'hello'),
		));
	}
	...
}

В этом методе мы просто создаём объект типа IXR_Server, конструктору которого нужно передать массив с названиями XML-RPC методов. В данном случае в массиве только один элемент. Ключ этого элемента является названием XML-RPC метода, а значение – именем функции, которую нужно вызвать.

array($this,'hello') означает, что будет вызван метод hello данного контроллера.

Тут нужно помнить об одном нюансе. Обычно в XML-RPC запросах не передаются данные сессий. Логин и пароль отправляются в каждом запросе в качестве параметров. Поэтому необходимо, обеспечить доступ к методу actionXmlrpc() без авторизации. Для этого немного изменим метод accessRules

public function accessRules() {
	return array(
		array('allow',  // allow all users to perform 'index' and 'view' actions
			'actions'=>array('index','view','xmlrpc'),
			'users'=>array('*'),
		),
		…,
	);
}

Шаг 3. Добавляем методы.

Теоретически, можно ограничиться просто добавлением метода hello, который просто вернет «Hello, world!».

public function hello($args) {
	return 'Hello, world!';
}

Но в 99% нужно аутентифицировать пользователя. Добавим метод

protected function xmlrpcLogin($username, $password) {
	$identity = new UserIdentity($username, $password);
	$identity->authenticate();
	if ($identity->errorCode === UserIdentity::ERROR_NONE) {
		Yii::app()->user->login($identity, 0);
		return true;
	}
	else {
		return false;
	}
}

Здесь мы используем класс UserIdentity, который автоматически создаётся фреймворком Yii при создании приложения. В параметрах этого метода нужно передать логин и пароль. В случае успешной аутентификации метод вернёт TRUE, в противном случае – FALSE. Кроме того, данные пользователя будут доступны через Yii::app()->user, т.е. точно также как и при обычной работе с фреймворком.

Теперь перепишем код метода hello.

public function hello($args) {
	if (!$this->xmlrpcLogin($args[0], $args[1])) {
		return new IXR_Error(-1, 'You did not provide the correct password');
	}
return 'Hello, world!';
}

Здесь предполагается, что логин и пароль будут переданы в первом и втором параметрах XML-RPC запроса.

Шаг 4. Проверяем работу.

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

require_once ('IXR_Library.php');

$client = new IXR_Client('http://my_site.domen/my/xmlrpc');
$client->debug = true;

$args = array();
$args[0] = 'login';
$args[1] = 'password';

if (!$client->query('my.hello', $args)) {
    die('Something went wrong - '.$client->getErrorCode().' : '.$client->getErrorMessage());
}
echo $client->getResponse();

Как видите, создание XML-RPC сервера особой сложности не представляет. Конечно, самая сложная работа – это написание самих методов. Но не забывайте, что если у вас уже готов web интерфейс и логика по максимуму вынесена в модели, то вы сможете спокойно использовать её и в XML-RPC методах.

Успехов!

Полезная информация

Новогодний подарок от Inferno Solutions – всем новым клиентам панель ISP бесплатно и 30$ в подарок при заказе VPS в Германии, Украине или Голландии! Укажите при заказе в примечании ISP+30.

WordPress: публикация постов с помощью XML-RPC с поддержкой таксономий

Владимир — Tue, 11 Oct 2011 08:02:30 +0000

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

Одной из возможностей, которая почему-то по возможностям постоянно отстаёт от остальной части движка, является XML-RPC. На сегодняшний день этот протокол является основным средством удалённой публикации постов. И, при этом, он фактически бесполезен если вы используете произвольные типы записей (custom post types) и таксономии (custom taxonomies). Ни один XML-RPC метод публикации постов в WP 3.2.1 их не поддерживает.

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

Рассмотрим небольшой пример.

Допустим, нам нужно публиковать посты произвольного типа через XML-RPC и связывать их с таксономиями. При этом, таксономии могут быть как иерархическими, так и плоскими.

Примечание. Подробнее о типах постов и таксономиях рассказано в статьях: WordPress: вывод записей произвольных типов (Custom Post Types) и Управление контентом в WordPress CMS: ситуация на сегодня и ближайшая перспектива.

Немного теории

В WordPress предусмотрен фильтр (xmlrpc_methods), позволяющий добавлять новые методы во встроенный XML-RPC сервер. Делается это следующим образом:

add_filter('xmlrpc_methods', 'add_xml_rpc_methods');

Во втором параметре фильтра указываем имя функции, которая создаст запись в глобальном массиве XML-RPC методов.

function add_xml_rpc_methods($methods) {
	$methods['my.my_method_name'] = 'my_method_name';
	return $methods;
}

function my_method_name($args) {
//обработка XML-RPC запроса и отправка ответа
}

Чтобы создать XML-RPC метод нужно добавить новый элемент в массив $methods. Ключ этого элемента является именем метода, а значение – именем функции, которая выполняет обработку XML-RPC запроса и формирует ответ.

Реализация: XML-RPC клиент

Начнём с кода, который отправляет XML-RPC запрос. В данном случае будем использовать библиотеку The Incutio XML-RPC Library (она же используется и в WordPress).

require_once ('IXR_Library.php');

$client = new IXR_Client('http://my_blog.com/xmlrpc.php');
$client->timeout = 60000;

$requestData[0] = 0; //id блога
$requestData[1] = 'admin'; //имя пользователя
$requestData[2] = 'pass'; //пароль

$post = array();

$post['post_title'] = 'New Post';
$post['post_excerpt'] = 'Short description';
$post['post_content'] = 'This story about ...';
$post['post_status'] = 'draft';
$post['post_type'] = 'my_custom_post_type'; //тип поста
$post['post_date'] = date('Y-m-d H:i:s');
$post['post_modified'] = date('Y-m-d H:i:s');

//формируем массив с терминами таксономий
$terms = array();
$terms['taxonomy_1'][] = (int)$term['term_id_1'];
$terms['taxonomy_1'][] = (int)$term['term_id_2'];
$terms['taxonomy_2'][] = (int)$term['term_id_3'];
$terms['taxonomy_3'][] = (int)$term['term_id_4'];

$post['tax_input'] = $terms;

$requestData[3] = $post;

if (!$client->query('my.publish_post', $requestData)) {
	echo 'Publish Post error: '.$client->getErrorMessage();
	return;
}

$publishedPost = $client->getResponse();

Прежде всего, создаём объект IXR_Client, конструктору которого передаём адрес скрипт, который выполняет обработку XML-RPC запросов (xmlrpc.php).

Затем формируем массив с данными для публикации поста. В первых трёх элементах указываем: id блога (на данный момент не используется), логин и пароль. В четвертом элементе – массив с данными нового поста.

Чтобы сократить количество кода на стороне XML-RPC сервера, названия полей этого массива должны совпадать с полями массива, который передаётся функции wp_insert_post. Кстати, большинство ключей элементов этого массива совпадает с именами полей таблицы posts базы данных.

Обратите внимание на параметр

$post['post_type'] = 'my_custom_post_type'; //тип поста

В нём указан тип поста, который мы хотим создать. Естественно, этот тип должен быть заранее создан.

Отдельно остановимся на таксономиях.

WordPress поддерживает таксономии 2-х типов: иерархические и плоские. Чтобы связать пост с терминами таксономий нужно перечислить их в элементе tax_input массива, который передаётся функции wp_insert_post. Например, так:

'tax_input' => array('taxonomy_1' => array('term', 'term2', 'term3'), 'taxonomy_2' => array('term1', 'term2'))

Здесь taxonomy_1, taxonomy_2 – имена таксономий, а term, term1 и т.д. – имена терминов.

Но здесь есть нюансы. Если публикуется «плоская» таксономия, то можно указать, либо имя термина, либо его id. При этом, id должен иметь тип int, если id сохранён в виде строки, то WordPress просто создаст новый термин. Для иерархических таксономий можно использовать только id термина (при этом нет ограничения на тип значения, оно будет автоматически приведено к типу int).

Т.е. универсальный вариант установки таксономий выглядит так:

$terms['taxonomy_1'][] = (int)$term['term_id_1'];
$terms['taxonomy_1'][] = (int)$term['term_id_2'];
$terms['taxonomy_2'][] = (int)$term['term_id_3'];
$terms['taxonomy_3'][] = (int)$term['term_id_4'];

Отправка запроса выполняется с помощью метода query, а прочитать результат можно используя getResponse.

XML-RPC сервер

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

Примечание. Следующий код можно добавить в плагин или в файл functions.php темы.

add_filter('xmlrpc_methods', 'add_xml_rpc_methods' );

function add_xml_rpc_methods($methods) {
	$methods['my.publish_post'] = 'my_publish_post';
	return $methods;
}

function my_publish_post($args) {
	$blog_id = (int) $args[0];
	$username = $args[1];
	$password = $args[2];
	$post_data  = $args[3];

	if ( !get_option( 'enable_xmlrpc' ) ) {
		return new IXR_Error( 405, sprintf( __( 'XML-RPC services are disabled on this site.  An admin user can enable them at %s'),  admin_url('options-writing.php') ) );
	}

	$user = wp_authenticate($username, $password);

	if (is_wp_error($user)) {
		return new IXR_Error(403, __('Bad login/pass combination.'));
	}

	wp_set_current_user( $user->ID );

	if ( !current_user_can( 'edit_private_posts' ) ) {
		return new IXR_Error( 401, __( 'Sorry, you cannot edit private posts.' ) );
	}

	if (!is_array($post_data)) {
		return new IXR_Error( 401, __( 'Sorry, no post data not found.' ) );
	}

	$id = wp_insert_post( $post_data );

	if ($id === 0) {
		return new IXR_Error( 401, __( 'Post save error.' ) );
	}

	$post = array();
	$post['id'] = $id;
	$post['permalink'] = get_permalink($id);

	return $post;
}

Здесь мы регистрируем XML-RPC метод my.publish_post и указываем, что при обращении к нему WordPress должен вызвать функцию my_publish_post.

Большая часть кода в этой функции совпадает с большинством обработчиков стандартных XML-RPC методов WP. Собственно он оттуда и скопирован . Этот код проверяет, разрешен ли XML-RPC для данного блога (строки 14-16, кстати, не забудьте его включить в админке на странице Settings -> Writing), аутентифицирует пользователя и проверяет, достаточно ли у него прав для публикации поста.

Сама публикация выполняется с помощью всего одной функции wp_insert_post (строка 34).

Клиенту возвращаем id созданного поста и постоянную ссылку на него (формируем с помощью функции get_permalink).

Заключение

Как видите, принцип достаточно простой. Любую встроенную функцию WP можно вызвать через XML-RPC протокол и использовать все возможности движка при удалённой публикации постов.

Если есть вопросы или замечания, пишите, постараюсь ответить.

Успехов!

Интересные ссылки

Закажите печать фотокниг тремя способами: онлайн, в офисе или вип

jQuery: обработка параметров URL

Владимир — Fri, 19 Aug 2011 07:45:55 +0000

Приветствую всех!

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

Предположим на нашей странице есть ссылка, клик по которой отправляет запрос на выполнение некоторой операции. Пускай это будет удаление какого-нибудь объекта.

HTML разметка такой ссылки может выглядеть следующим образом.

Удалить

Как видите, ссылка содержит два параметра (action и object_id), значения которых PHP скрипт сможет получить из массива $_GET.

Теперь, мы хотим выполнить удаление объекта с помощью AJAX запроса. Изменять ради него ссылку нет никакой необходимости. Просто назначаем обработчик для события click.

$('a.delete').click(function() {
  return false;
});

Этот код блокирует отправку обычного запроса при клике по ссылке. Нам нужно получить параметры и отправить AJAX запрос.

В обработчике события click получить значение атрибута href ссылки можно следующим образом.

$(this).attr('href')

Затем нужно найти в этой строке параметры. Тут есть два варианта.

1) Если вам достаточно параметров, указанных в атрибуте href и вы не хотите их изменять, то просто передать методам $.ajax (или $.post, или $.get) строку с параметрами запроса.

Т.е. код будет выглядеть примерно так

var params = $(this).attr('href').split('?');
$.post('ajax_delete.php', params[1], function(response) {
    console.log(response);
} );

Здесь мы с помощью метода split разбили запрос на две части (по знаку вопроса), и передали методу $.post второй элемент массива params. Для данного примера он выглядит так
action=delete_object&object_id=1

2) Если перед отправкой AJAX запроса нужно изменить/удалить/добавить какие-то параметры, то удобнее всего преобразовать строку с параметрами в хеш.

Для этих целей существует специальный плагин – parseQuery

Использовать его можно так.

var params = $.parseQuery($( this ).attr( 'href' ).split('?'));

В результате вы получите хеш

{
	action: delete_object,
	object_id: 1
}

Код отправки AJAX запроса при этом не изменяется. Точно также передаёте переменную params во втором параметре метода $.post.

В заключение посмотрите код обработчика целиком.

$(document).ready(function() {
	$('a.delete').click( function() {
		var params = $(this).attr('href').split('?');
		$.post('ajax_delete.php', params[1], function(response) {
			console.log(response);
		});
		return false;
	});
});

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

Если есть вопросы или замечания, пишите.

Успехов!

Интересно почитать

Платежный модуль Robokassa для Magento с поддержкой.

Нужна фотокнига? В наличие фотокниги образцы, множество видов дизайна и верстки

HTML5: загрузка файлов с помощью Drag & Drop

Владимир — Thu, 21 Jul 2011 13:13:41 +0000

Приветствую всех!

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

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

Загрузку файлов с локального компьютера трогать пока не будем, я планирую опубликовать отдельный пост на эту тему, разберем загрузку с удалённого сервера.

Проблемы начинаются с первого же шага. Даже если вы четко понимаете, где искать URL и хорошо умеете пользоваться инструментами вроде firebug, то всё равно потребуется несколько кликов мышкой чтобы получить нужный адрес. Было бы гораздо удобнее просто перетянуть нужную картинку из одного окна браузера в другое.

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

Обратите внимание! Данный пример работает только в браузере Google Chrome. По-идее, поддержка всех необходимых технологий есть в Firefox и Safari, но с ними я пока не разбирался.
В качестве объектов для «перетягивания» я брал в основном картинки с википедии. Было замечено несколько проблем связанных с не латинскими символами в URL картинок, но чтобы не перегружать пример проверками и преобразованиями я их оставил как есть.

Принцип работы

Стандарт HTML5 предусматривает поддержку «перетягивания» объектов страницы (Drag and Drop). Кстати, пример простейшей реализации D&D я уже показывал – Drag & Drop с использованием HTML5. И, кроме того, есть довольно много JavaScript библиотек, реализующих поддержку D&D.

Но тут важно понимать, что если необходимо «перетягивать» картинки со сторонних ресурсов, то использовать библиотеки не получится. Т.к. вы не сможете добавить свой JS код на чужую страницу. А для того, чтобы загрузить картинку, нам нужно получить её URL, т.е. браузер должен вместе с перетягиваемым объектом передавать и его параметры (например, атрибут src картинки или весь тег img).

В этом случае мы можем создать на своей странице «приёмник» картинок. Это будет обычный div которому назначен обработчик события drop. Если пользователь «сбросит» картинку над этим div'ом, то будет вызван обработчик и в первом параметре он получит объект, содержащий информацию о перетягиваемой картинке.

Дальше всё достаточно просто. Если мы получили нужный URL, то можно отправить AJAX-запрос серверному скрипту, который выполнит загрузку файла.

Реализация

Начнём со страницы нашего приложения.



    
        
        Images Upload

На ней размещены два блока: images – здесь будем показывать загруженные изображения и img_target – на этот блок нужно перетягивать картинки.

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

Рассмотрим main.js

$(function() {
    $('#img_target')
        .bind('dragenter', function(event) {
            $(this).addClass('drop_here');
            return false;
        })
        .bind('dragleave', function(event) {
            $(this).removeClass('drop_here');
            return false;
        })
        .bind('dragover', function(event) {
            return false;
        })
        .bind('drop', function(event) {
            $(this).removeClass('drop_here');
			var srcRegex = /src=\"([^\s]+)\"/ig;
            var data = event.originalEvent.dataTransfer.getData('text/html');
			var img_data = srcRegex.exec(data);
			$.post('upload.php', {'file_url':img_data[1]}, function(res) {
				var response = eval('(' + res + ')');
				$('#images').append($(''));
			});
            return true;
        });
});

Здесь мы назначаем обработчики событиям dragenter, dragleave и dragover. Все они должны просто возвращать false и, чтобы как-то проинформировать пользователя о том, что можно «сбрасывать» картинку, в обработчике dragenter устанавливаем CSS класс drop_here для блока-приёмника.

Основная часть работы выполняется в обработчике события drop. При возникновении этого события мы читаем информацию о «сброшенном» объекте и «вырезаем» значение атрибута src, т.е. URL картинки (строки 16-18). Информация передается в объекте event.originalEvent.dataTransfer (строка 17).

Затем формируем обычный AJAX запрос и в качестве параметра передаём ему найденный URL.

Серверный скрипт (upload.php) получит URL изображения на удалённом сервере и загрузит его. А в ответе на AJAX запрос он отправит новый URL загруженной картинки.

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

Рассмотрим upload.php

 'Не указан URL файла');

if (isset($_POST['file_url'])) {
	$new_url = upload_from_url($_POST['file_url']);
	$res = array('file_url' => $new_url);
}

echo json_encode($res);

Принцип работы следующий. Читаем URL картинки и пытаемся её загрузить (строки 29-32).

Если картинка загружена, сохраняем её в папку upload. Получение картинки с удалённого сервера осуществляется с помощью функций fread. Файл читаем блоками по 1кБ (строки 15-18). Такой подход позволяет прервать загрузку файла, если его размер превышает заданный предел (в данном случае 300кБ).

После загрузки файла формируем для него URL и отправляем браузеру в формате JSON.

Как видите, реализовать такой загрузчик несложно. И пользоваться им достаточно удобно. Естественно, основным недостатком является поддержка HTML5 браузерами, точнее её отсутствие

Тем не менее, если вы создаёте интерфейс для сотрудников какой-нибудь компании, и можете оговорить тип браузера, то HTML5 вполне можно использовать.

Успехов!

Интересно почитать.

Фотокнига — фантастический сюрприз для любимого мужчины. Попробуйте сами!

Правильно подготовим 3-ндфл при покупке квартиры за 2011 год, дадим инструкции для получения вычета

Нужно распарсить сайт? Интересный пример как написан парсер на php. Можно даже скачать скрипт парсера.

Как показать на Google Maps объекты, находящиеся в заданной области

Владимир — Tue, 28 Jun 2011 09:48:03 +0000

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

Начнём с постановки задачи

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

Будем считать, что заданная область представляет собой окружность, т.е. мы знаем координаты её центра и радиус. А координаты объектов находятся в KML файле (это XML формат, разработанный для описания объектов на Google maps).

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

1) Читаем координаты объекта из KML файла.
2) Рассчитываем расстоянием между центром окружности и текущим объектом.
3) Если это расстояние меньше радиуса окружности, ставим маркер, если больше – пропускаем объект.

Переходим к решению.

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

Серверная часть

Начнем с серверного скрипта, который формирует страницу с картой (index.php).

Folder->Placemark as $organisation) {
    $organizations_data[] = array(
        'name' => (string)$organisation->name,
        'coordinates' => (string)$organisation->Point->coordinates,
    );
}
?>





    
    Объекты на Google Maps
    




Google Maps: отображение объектов, которые находятся в заданной области

Прежде всего, загружаем данные из KML файла (строка 2). Т.к. это обычный XML файл, то мы можем использовать любую библиотеку для работы с этим форматом. В данном случае – SimpleXML.

Затем, необходимо обеспечить доступ к этим данным на клиентской стороне, т.к. настройка Google Maps выполняется с помощью JavaScript.

Для этого мы формируем массив с необходимыми данными (строки 6-11), преобразовываем его в JSON формат (строка 22) и присваиваем переменной organizations (строка 22) в теге script. Таким образом, мы получаем JavaScript массив с координатами всех объектов из KML файла.

Тут я хочу сделать небольшое отступление. В принципе, работать с KML файлом можно и на стороне браузера, это несложно. Но в общем случае, этот файл не обязательно будет находиться на вашем сервере, а кросс-доменные (XSS) запросы запрещены политикой безопасности браузеров. Т.е. придётся искать какой-нибудь обходной путь. Подробнее на эту тему можно почитать здесь, здесь, здесь и здесь.

Подробно разбирать работу с SimpleXML, думаю, смысла не имеет. Для данного примера достаточно понимать, что после загрузки файла вы получите объект, имеющий такую же структуру как и xml-документ.

Т.е. вызов $organizations->Folder->Placemark вернет вам содержимое тега в документе с такой структурой

…

Обратите внимание! Библиотека чувствительна к регистру тегов в xml-файле.

На самой странице мы создаём блок для карты (my_map).

И подключаем файл main.js, который и будет выполнять настройку карты.

Клиентская часть

Сразу посмотрим на весь скрипт целиком.

var map, circle, circleOptions, setCenter, marker, organizations_markers;

function initialize() {
    var centerPoint = new google.maps.LatLng(48.67, 44.47); //Волгоград
    var myOptions = {
        zoom: 12,
        center: centerPoint,
        mapTypeId: google.maps.MapTypeId.HYBRID
    }
    map = new google.maps.Map(document.getElementById("my_map"), myOptions);

    //радиус окружности - 5 км
    var radius = 5;

    circleOptions = {
        center: centerPoint,
        fillColor: "#00AAFF",
        fillOpacity: 0.5,
        strokeColor: "#FFAA00",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        clickable: false,
        radius: radius*1000
    }

    //рисуем окружность
    circle = new google.maps.Circle(circleOptions);
    circle.setMap(map);

    //устанавливаем маркеры организаций
    organizations_markers = [];
    for (var i = 0; i < organizations.length; i++) {
        var ll = organizations[i].coordinates.split(',');
        var latlng = new google.maps.LatLng(ll[1], ll[0]);
        if (distHaversine(latlng, centerPoint) < radius) {
            organizations_markers[i] = new google.maps.Marker({
                    position:latlng,
                    clickable:true
                });
            organizations_markers[i].setMap(map);
        }
    }
}

function loadScript() {
    var script = document.createElement("script");
    script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
    document.body.appendChild(script);
}

rad = function(x) {return x*Math.PI/180;}

//эта функция используются для определения расстояния между точками на
//поверхности Земли, заданных с помощью географических координат
//результат возвращается в км
distHaversine = function(p1, p2) {
    var R = 6371; // earth's mean radius in km
    var dLat  = rad(p2.lat() - p1.lat());
    var dLong = rad(p2.lng() - p1.lng());

    var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
            Math.cos(rad(p1.lat())) * Math.cos(rad(p2.lat())) * Math.sin(dLong/2) * Math.sin(dLong/2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
    var d = R * c;

    return d.toFixed(3);
}

window.onload = loadScript;

В первую очередь мы создаём карту и устанавливаем её основные параметры (координаты центра, приближение). Для этого, назначаем обработчик событию window.onload (строка 69). Этот обработчик добавляет на страницу тег script в параметре src которого передается адрес имя метода, который будет вызван после загрузки Google Maps (в данном случае – initialize). Таким образом, все наши настройки выполняются в этом методе.

Выполняем установку параметров карты (строки 4-10). Мы указали: центральную точку (centerPoint), приближение (zoom) и тип карты (mapTypeId).

Теперь рисуем окружность (строки 13-28). Её центр совпадает с центром карты, а радиус равен 5 км. В настройках окружности указываем толщину и цвет линии, цвет и прозрачность фона и другие параметры.

После этого расставляем маркеры объектов.

Напомню, что координаты этих объектов находятся в массиве organizations, который был сформирован серверным скриптом.

Т.е. нам нужно пройтись по всем элементам этого массива и рассчитать расстояние от центра окружности до текущего объекта (строки 31-42).

Расчет расстояний для точек на поверхности Земли выполняется с помощью функции гаверсинусов (distHaversine). Её реализацию на JavaScript я взял здесь.

Если это расстояние меньше заданного, создаём маркер и показываем его на карте (строки 36-40). В противном случае – переходим к следующему объекту.

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

Если есть вопросы или замечания, пишите, постараюсь ответить в комментариях

Успехов!

Интересно почитать

Хотите создать свой сайт? Template CMS – быстрая и маленькая CMS! Поможет решить эту задачу с минимальными затратами времени и ресурсов.

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

Заполним 3-ндфл за 2011 год за 1 день, от 500 рублей!

JavaScript XSS: получение данных от facebook и вконтакте

Владимир — Sun, 22 May 2011 11:02:21 +0000

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

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

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

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

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

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

Именно о таком решении я хочу рассказать в этой статье. В качестве примера возьмем facebook и вконтакте. Выбор этот сделан не случайно, разница между API этих сервисов довольно ощутимая. Чуть ниже вы поймете почему.

Условно, виджет можно разбить на две части.

1) Кнопка публикации.
2) Счетчик публикаций.

Рассмотрим их подробнее.

Кнопка публикаций

Здесь все предельно просто. В обоих случаях информация передаётся в параметрах GET запроса. Т.е. достаточно сформировать ссылки следующего вида.

Для facebook:

facebook

Для вконтакте:

вконтакте';

Вместо url и text нужно подставить адрес и описание страницы, соответственно.

Счетчик публикаций

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

В большинстве источников, которые я видел в Сети, предлагают отправлять такой запрос со своего сервера (с помощью PHP) и затем кэшировать результат. Мне этот подход не нравится по нескольким причинам.

1) Любой запрос занимает какое-то время, которое прибавляется к общему времени формирования страницы. Кэширование в какой-то степени решает эту проблему (запросы будут отправляться не при каждом просмотре страницы), но не полностью.

2) При большом количестве запросов, социальная сеть может заблокировать ваш IP (зависит от политики социальной сети).

3) Создаётся дополнительная нагрузка на ваш сервер.

Второй вариант – отправлять запросы со стороны клиента, с помощью JavaScript.

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

Но, при реализации такого подхода, возникают две проблемы.

1) Встроенная защита браузеров от кросс-доменных запросов.

Т.е. вы не можете отправить AJAX запрос на другой домен, но можно вставить в страницу тег script и в его атрибуте src указать адрес нужного скрипта на другом домене. В результате браузер загрузит нужный вам скрипт и выполнит код, находящийся в нём.

При использовании jQuery задача решается с минимумом усилий. Например, так:

$.getJSON('http://vkontakte.ru/share.php?act=count&index=1&url=page_url&callback=?', function(response) {
	…
});

Обратите внимание на параметр callback=?. Если он указан, то jQuery вставит тег script внутрь страницы. Вообще параметр callback разработан для поддержки JSONP и указывает серверу, что ответ в JSON формате нужно передать в качестве параметра указанной функции. Имя этой функции jQuery формирует автоматически и подставляет вместо знака вопроса.

Естественно, JSONP должен поддерживаться на стороне сервера. И сейчас мы разберем какие ответы мы получим от социальных сетей на практике.

2) Формат ответа социальной сети.

С facebook всё отлично. Эта социальная сеть поддерживает JSONP и если мы отправим запрос вида.

$.getJSON('http://graph.facebook.com/' + encodeURI(page_url)
		+ '&callback=?', function(response) {
	if (response.shares !== undefined) {
		fb_counter = response.shares;
	}
	$('#facebook_count').html(response.shares);
});

То получим следующий ответ.
jQuery16105957901661749929_1306057803097({
   "id": "http://www.smashingmagazine.com/",
   "shares": 5454
});
jQuery16105957901661749929_1306057803097 – имя функции, которое сгенерировала jQuery.

В первом параметре этой функции передаётся строка в JSON формате с адресом страницы и количеством публикаций.

В результате, в обработчик запроса будет передан JS объект с нужными данными. В этом примере он называется response, т.е. получить количество публикаций ссылки можно с помощью вызова response.shares.
В случае с вконтаке всё сложнее. Эта социальная сеть JSONP не поддерживает и на запрос
$.getJSON('http://vkontakte.ru/share.php?act=count&index=1&url='
	+ encodeURI(page_url) + '&callback=?', function(response) {});
отвечает следующей строкой:
VK.Share.count(1, 9);
Естественно, это приводит к возникновению ошибки
VK is not defined
Вообще ответ сервера вконтакте – это обычный вызов метода count, присвоенного параметру Share объекта VK. Откуда берется этот объект? Его создаёт скрипт, который нужно подключить при использовании стандартного виджета. Но этот скрипт нам не нужен, т.к. виджет мы не используем, а количество публикаций ссылки нужно вставить в заранее подготовленный блок о котором стандартный скрипт ничего не знает.
Т.е. нам нужен собственный объект VK с соответствующими параметрами. Создать его совсем не сложно.
var VK = {
    Share: {
        count: function(value, count) {
            $('#vkontakte_count').html(count);
        }
    }
}
Теперь, после получения ответа от сервера вконтакте, будет вызвана анонимная функция, установленная для параметра count. Во втором параметре она получит количество публикаций страницы.
Обратите внимание – этот код должен находится в глобальной области видимости.
Привожу весь код целиком.
Страницы со счетчиками



    Счетчики
    



    Facebook 
    ВКонтакте 

    
    


Скрипт social_counters.js
jQuery(document).ready(function($) {
    var fb_counter = 0;
    var vk_counter = 0;
    var page_url = 'http://www.smashingmagazine.com/';

	$.getJSON('http://vkontakte.ru/share.php?act=count&index=1&url='
		+ encodeURI(page_url) + '&callback=?', function(response) {});

	$.getJSON('http://graph.facebook.com/' + encodeURI(page_url)
			+ '&callback=?', function(response) {
		if (response.shares !== undefined) {
			fb_counter = response.shares;
		}
		$('#facebook_count').html(response.shares);
	});
});

var VK = {
    Share: {
        count: function(value, count) {
            $('#vkontakte_count').html(count);
        }
    }
}
В заключение пара замечаний
1) Поддержка JSONP значительно упрощает жизнь разработчикам и в конечном итоге способствует популяризации социальной сети или сервиса.
2) Отсутствие этой поддержки не означает, что вы не сможете интегрировать ваш сайт с данной социальной сетью. Главное, чтобы была возможность получить нужные данные в какой-нибудь форме. Естественно, при этом придётся написать какое-то количество дополнительного кода.
Если вы заметили ошибку или знаете более удачное решение данной проблемы, пишите, будет интересно обсудить.

Успехов!
Интересно почитать
Не знаете, что подарить подруге на день рождения? Фотоальбом с ее лучшими снимками!

Сортировка в MySQL: несколько редко используемых возможностей

Владимир — Mon, 25 Apr 2011 08:17:43 +0000

О сортировке данных с помощью SQL запросов, думаю, знают все web разработчики.

Достаточно указать в запросе предложение ORDER BY с нужными параметрами и вы получите желаемый результат.

Параметры задавать тоже несложно. Просто перечисляете через запятую столбцы по которым нужно выполнить сортировку и указываете её направление (по возрастанию (ASC) или по убыванию (DESC)).

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

SELECT * FROM articles ORDER BY a_title ASC, a_date DESC

В этом случае записи из таблицы articles будут отсортированы в возрастающем порядке по полю a_title, а для записей у которых совпадают значения в поле a_title – по полю a_date в убывающем порядке.

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

Сортировка с учетом типа данных

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

При этом таблицы будут иметь приблизительно следующую структуру.

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

Но что произойдет если мы попытаемся выполнить сортировку по метаданным?

Такую сортировку можно выполнить с помощью следующего запроса

SELECT * FROM articles AS a LEFT JOIN metadata AS m ON a.a_id=m.m_article_id WHERE m.m_name="color"

Этот запрос выведет все записи из таблицы articles для которых создано мета-поле color.

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

При этом числовые данные будут отсортированы не правильно. Дело в том, что ORDER BY сравнивает значения с учетом типа поля и, например, при сортировке по возрастанию вы получите следующий ряд значений: «1», «10», «2», «3» и т.д.

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

SELECT * FROM metadata ORDER BY (m_value+0)

Обратная операция (сортировка числового поля по правилам текстового) записывается немного сложнее.

SELECT left(a_id, 20) AS id_str FROM articles ORDER BY id_str

Функция left возвращает строку, содержащую первые N символов из строки, указанной в первом параметре. Количество символов (N) задается во втором параметре. В данном случае будут выбраны первые 20 символов (достаточно чтобы преобразовать 8-байтное целое число в строку). Т.е. движок MySQL выполнит сортировку по строке, полученной из значения числового поля.

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

Сортировка текста с учетом регистра

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

1. «Язык запросов»
2. «Язык программирования»
3. «Язык Запросов»

Но если всё-таки сортировку нужно выполнить с учетом регистра, просто добавьте оператор BINARY перед именем поля.

SELECT * FROM articles ORDER BY BINARY a_title

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

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

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

SELECT SUBSTRING_INDEX(a_title, ' ', -1) AS at FROM wp_5_posts ORDER BY at

Сортировка записей по заданному списку значений

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

Очевидно, что, используя стандартный вариант сортировки (по алфавиту), расположить сезоны порядке «весна», «лето», «осень», «зима» не получится. Естественно, можно каждому времени года присвоить свой код, но есть и другой вариант решения – использовать функцию FIELD.

SELECT * FROM articles ORDER BY FIELD(a_season, "весна","лето","осень","зима")

Эта функция ищет значение, указанное в первом параметре, среди значений, перечисленных в остальных параметрах, и возвращает его порядковый номер. При выполнении запроса в первый параметр функции FIELD будут передаваться значения из поля a_season и, таким образом, записи будут отсортированы в заданном нами порядке.

Сортировка строк по их длине

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

SELECT * FROM articles ORDER BY CHAR_LENGTH(a_title)

Как видите, «фокус» заключается в использовании функции CHAR_LENGTH, которая определяет количество символов в строке.

Заключение

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

Интересное в Интернете

Заказ свадебных фотоальбомов с доставкой по РФ и СНГ

JavaScript виджет: бесконечная загрузка твитов

Владимир — Tue, 05 Apr 2011 18:59:36 +0000

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

Рассмотрим небольшой практический пример.

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

На первый взгляд всё предельно просто, twitter предоставляет API, с помощью которого можно получить твиты любого пользователя (если они открыты). Вставить их сайдбар тоже не проблема.

Но на практике возникает несколько интересных моментов.

1) Информация от twitter не является основным контентом сайта и не должна влиять на скорость загрузки страницы. Кроме того, доступность сервиса также не должна влиять на работу сайта.

2) Твиты могут появляться довольно быстро, поэтому чтобы информация в виджете была всегда актуальной от кеширования придётся отказаться.

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

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

5) Количество места, выделенного под виджет, обычно ограничено. И необходимо чтобы загрузка новых твитов не «ломала» дизайн.

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

Теперь рассмотрим сам виджет.

Начнём с алгоритма.

1) Создаём на странице область с фиксированной высотой и вертикальным полосой прокрутки.

2) После загрузки страницы подгружаем в эту область твиты с помощью JavaScript.

3) Если пользователь переместит ползунок скролла в крайнее нижнее положение – загружаем следующую «порцию» твитов.

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

Разметка виджета с твитами может выглядеть следующим образом.

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

.loader {
    background-image: url('ajax-loader.gif');
    width: 400px;
    height: 300px;
    background-repeat: no-repeat;
    background-position: center center;
    position: fixed;
}

Значения width и height должны совпадать с соответствующими значениями, установленными для виджета (div#tweets).

#tweets {
    height: 300px;
    width: 400px;
    overflow: auto;
    position: relative;
    border: solid 1px #999;
    margin: 3em auto 0 auto;
}

Переходим к загрузке твитов

Основная сложность заключается в том, что нам нужно с помощью JavaScript выполнить кросс-доменный запрос к серверу twitter’а. Такие запросы запрещены политикой безопасности браузеров, поэтому использовать обычный AJAX запрос не получится.

Тем не менее, благодаря тому, что Twitter API поддерживает JSONP задача решается достаточно просто.

$(function() {
    //параметры для получения твитов
    var user_id = '24147920';
    var tweets_url = 'http://api.twitter.com/1/statuses/user_timeline.json';
    var page = 1;
    var tweets_num = 10;

    //список твитов и картинка загрузчика
    var container = $('#tweets');
    var loader = $('.loader');

    //шаблон для поиска ссылок в твитах (упрощенный)
    var pattern = /(http\S+)/gi;

    //загружаем первую страницу твитов
    get_tweets(page);

    //обработчик события scroll
    container.scroll(function() {
        //это условие выполняется когда ползунок находится в крайнем нижнем положении
        if  (container[0].scrollTop == container[0].scrollHeight - container[0].clientHeight){
            //показываем загрузчик
            loader.removeClass('hidden');
            //загружаем очередную страницу твитов
            page = page + 1;
            get_tweets(page);
        }
    });

    //эта функция загружает твиты, ищет ссылки и ставит для них
    //соответствующий тег , вставляет твиты в список
    function get_tweets(page) {
        $.getJSON(
            //формируем запрос на получение твитов (используется JSONP)
            tweets_url + '?user_id=' + user_id + '&page=' + page + '&count=' + tweets_num + '&callback=?',
            function(data) {
                $(data).each(function(i, tweet) {
                    //формируем ссылки
                    var text = tweet.text.replace(pattern, '$1');
                    //вставляем твит в список
                    container.append('' + text + '');
                });
                //прячем загрузчик
                loader.addClass('hidden');
            }
        );
    }
});

Прежде всего, мы подготавливаем данные, которые нужны для работы с Twitter API (строки 3-6). Для данного примера я использовал свою собственную ленту твитов, но вы можете вывести любую другую. Также не принципиально сколько твитов загружать за раз, главное, чтобы после первоначальной загрузки появилась полоса прокрутки.

Для получения твитов используем метод getJSON (строки 33-46, библиотека jQuery).

В первом её параметре передаём запрос на получение твитов. В него мы включаем:
- id пользователя ('?user_id=' + user_id);
- номер страницы ('&page=' + page);
- количество твитов на странице ('&count=' + tweets_num);
- имя функции, которая будет вызвана после получения данных ('&callback=?') – его jQuery формирует автоматически и подставляет вместо знака вопроса.

После получения твитов нам остается только добавить их в список (строки 36-42). При этом, мы ищем ссылки в тексте твитов и обрамляем их тегом .

Завершающий этап – установка обработчика для события scroll (строки 19-28).

Здесь нужно только проверить достигнут конец списка или нет. Если достигнут, показываем загрузчик (убираем класс hidden) и вызываем функцию get_tweets, которой передаём номер нужно страницы. В противном случае, не делаем ничего.

Всё. Можно считать, что виджет в рабочем состоянии. Конечно, перед размещением на рабочем сайте нужно будет его немного доработать, например, добавить вывод сообщение об ошибке при отсутствии доступа к twitter'у. Но, думаю, с этой задачей вы легко справитесь сами

Успехов!

Интересное

Глянцевая и матовая печать фотокниг и свадебных фотоальбомов

Любителям страйкбола будет интересно почитать про камуфляж Горка его расцветки и разновидности.

Небольшой эксперимент с использованием data: URL

Владимир — Mon, 21 Mar 2011 08:52:15 +0000

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

К сожалению, не всегда есть возможность проигнорировать устаревшие браузеры (главным образом речь идет о IE6 и 7). И это сильно замедляет использование новых стандартов.

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

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

Об одной из таких технологий и пойдёт речь в этой статье. Называется она data: URL.

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

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

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

Рассмотрим тестовую страницу





    CSS clip

Она содержит шесть ссылок, которые нужно показать в виде иконок на социальные сервисы.

Делается это достаточно просто. Для каждой ссылки задаётся ширина, высота и фоновое изображение (иконка).

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

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

Именно этот вариант я решил использовать для браузеров IE6 и 7, а для новых – передать иконки с помощью data: URL.

Подготовка данных для использования в data: URL

Тут всё достаточно просто. Нужно закодировать содержимое файла с картинкой с помощью base64 и вставить полученную строку в CSS файл.

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

Примечание. Я использовал коллекцию бесплатных иконок от wpzoom.

На практике можно воспользоваться одним из сервисов, выполняющих эту операцию. Например, duris.ru или dopiaza.org.

В результате у меня получилась такая таблица стилей.

@charset 'utf-8';

.icon {
	width: 64px;
	height: 64px;
	display: block;
	float: left;
	margin: 10px;
}

div#social_icons a {
	background-image: url("data:image/png;base64,iVBORw......");
	background-repeat:no-repeat;
}
.twitter {
	background-position: 0 0;
}
.facebook {
	background-position: 0 -64px;
}
.bobrdobr {
	background-position: 0 -128px;
}
.memori {
	background-position: 0 -192px;
}
.delicious {
	background-position: 0 -256px;
}
.stumbleupon {
	background-position: 0 -322px;
}

Обратите внимание. Здесь не важно кодируете вы один файл со всеми иконками или каждую отдельно. Все данные будут переданы внутри CSS файла.

Рассмотрим стили подробнее.

Для каждой ссылки мы указываем высоту (width) и ширину (height). При этом, нужно сделать ссылку блоковым элементом (display: block), иначе длина и высота применятся не будут. Чтобы расположить иконки в один ряд, используем обтекание (float: left).

Далее каждой ссылке устанавливаем фоновое изображение (background-image). В качестве значения url вставляем результат преобразования картинки. Я его сократил, т.к. он занимает около 19 кБ.

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

Остаётся подключить файл стилей к странице.

Всё. В современных браузерах иконки отображаются правильно.

Для формирования страницы браузер выполняет два запроса к серверу. Первый – получение самой страницы, второй – получения файла стилей. При этом, файл стилей занимает 19,1 кБ (если его сжать, получится 14,4 кБ).

Поддержка IE6 и 7

Есть несколько вариантов решения этой задачи. Подробно они рассмотрены в статье Кроссбраузерное использование data:URL.

Я покажу один из самых простых вариантов, с заменой файла стилей.

Идея предельно простая. С помощью условных комментариев, браузерам IE6 и 7 указываем свой собственный CSS файл.

Выглядит это следующим образом.

В результате, современные браузеры загрузят файл styles.css, а шестая и седьмая версии IE – ie_6_7_styles.css.

В этих стилях отличается только свойство background-image. Вместо data:URL указываем файл с иконками.

div#social_icons a {
    background-image: url("icons/icons_sprites.png");
    background-repeat:no-repeat;
}

Теперь во всех браузерах иконки отображаются одинаково.

Результаты

Должен отметить, что в данном случае, результаты получились не очень впечатляющие.

Безусловно, при использовании data: URL количество запросов уменьшилось (на один), но объём передаваемых данных увеличился практически на 5 кБ (исходный файл icons_sprites.png «весит» 13,9 кБ, а после base64 преобразования он занимает около 19 кБ).

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

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

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

К тому же, если бы не нужна была поддержка IE6, 7, то можно было бы вообще не заниматься созданием файла со спрайтами и установкой background-position, а просто передавать изображения в background-image для соответствующих элементов.

В целом, я не уверен, что в ближайшее время начнется массовое использование data: URL. Тем не менее, технология очень интересная.

Успехов!

Интересно почитать

Хотите сделать карьеру в IT? Курсы программистов будут хорошей стартовой точкой.

Нужна декларация 3-ндфл «продажа квартиры»? Заполним за сутки и вышлем на емейл.

WordPress: вывод записей произвольных типов (Custom Post Types)

Владимир — Sun, 13 Mar 2011 14:56:48 +0000

На сегодняшний день движок WordPress довольно интенсивно развивается. Во всяком случае изменения в версиях с 2.8 по 3.1 добавляют WP возможности полноценных CMS. Большинство из этих возможностей должны быть активированы на уровне темы (или плагина), поэтому сразу после установки WP вы работаете с ним как с обычным блоговым движком.

Вроде бы все правильно. Если какие-то возможности вам не нужны, вы их не используете. Но при этом возникает серьёзная проблема с документацией. Дело в том, большинство примеров и в Кодексе, и в других источниках, ориентированы на самый простой случай – дефолтную инсталляцию WP. Как только вы активируете дополнительные возможности ко многим рекомендациям нужно относится очень аккуратно.

Об одном из таких примеров я хочу рассказать в этой статье.

Предположим, вы решили использовать произвольные типы записей (custom post types). Создать их достаточно просто и на эту тему есть масса статей, поэтому подробно останавливаться на этом моменте не будем.

В большинстве случаев достаточно добавить следующий код в файл functions.php вашей темы.

register_post_type('gadgets',
	array(
		'labels' => array(
			'name' => __('Gadgets'),
			'singular_name' => __('Gadget'),
			//остальные переводы
		),
		'public' => true,
		'publicly_queryable' => true,
		'query_var' => true,
		'taxonomies' => array('category','post_tag'),
		'supports' => array('title','editor','author','thumbnail','excerpt','comments'),
		'rewrite' => array('slug' => 'gadgets'),
		//другие настройки
	)
);

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

http://blog.url/gadgets

Теперь обратите внимание, что для этого типа записей мы используем такие же категории, как и для типа Post (строка 11).

Очевидно, что на странице категории мы захотим увидеть записи всех типов, но WordPress покажет только тип Post.

Происходит это потому что WP при формировании запроса к базе данных явно указывает тип поста. И по-умолчанию этот тип – post.

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

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

Решается задача достаточно просто.

function prefix_pre_get_posts($query) {
     if ($query->is_category) {
          $query->set('post_type', 'any');
     }
     return $query;
}

add_action('pre_get_posts', 'prefix_pre_get_posts');

Здесь мы назначаем собственный обработчик события (action) pre_get_posts. Как следует из названия, это событие возникает непосредственно перед отправкой запроса к БД. В первом параметре обработчик получает объект типа WP_Query, который формирует запрос к базе.

Прежде всего, мы проверяем, что в данный момент создаётся страница категории (строка 2). А затем изменяем атрибут post_type. По-умолчанию он равен post. Не забывайте, что обработчик обязательно должен вернуть изменённый (или неизменённый) объект WP_Query.

Вообще, если вы планируете работать с новыми возможностями WP (произвольными типами записей, таксономиями, форматами записей), то научиться работать с WP_Query нужно обязательно. Встроенными функциями движка здесь вы не обойдетесь.

В целом, этого и следовало ожидать, чем больше возможностей у движка, тем больше времени придётся потратить на его изучение

Успехов!

Интересно почитать

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