Категории: Web разработка

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

Владимир | 22 мая, 2011 | HTML, JavaScript, Web разработка.

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

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

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

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

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

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

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

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

Владимир | 25 апреля, 2011 | MySQL, Web разработка.

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

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

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

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

SELECT * FROM articles ORDER BY a_title ASC, a_date DESC

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

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

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

Владимир | 5 апреля, 2011 | CSS, HTML, JavaScript, Web разработка.

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

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

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

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

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

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

Владимир | 21 марта, 2011 | CSS, HTML, Web разработка.

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

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

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

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

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

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

Владимир | 13 марта, 2011 | PHP, Web разработка, WordPress.

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

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

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

Galleria — плагин для создания галерей с картинками

Владимир | 7 марта, 2011 | CSS, HTML, JavaScript, Web разработка.

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

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

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

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

Управление контентом в WordPress CMS: ситуация на сегодня и ближайшая перспектива

Владимир | 19 февраля, 2011 | PHP, Web разработка, WordPress.

Приветствую всех! В этот раз поговорим о нынешних и будущих возможностях одного из самых популярных блоговых движков – WordPress. И заодно обсудим, корректно ли вообще называть его «блоговым».

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

И ещё одно замечание. Под «работой с контентом» я имею в виду не работу редактора, который форматирует текст с помощью TinyMCE, а работу web мастера, т.е. группировку записей по определённым признакам, их индивидуальное оформление, создание страниц архивов, навигацию и т.п.

Начнем с возможностей, которые предоставляет последний стабильный релиз WordPress (на данный момент это версия 3.0.5).
Читать дальше

jQuery Grid Plugin – FAQ на основе комментариев

Владимир | 27 января, 2011 | JavaScript, Web разработка.

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

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

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

Что бы немного улучшить ситуацию, я решил составить этот список.

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

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

Кстати, если кому-то интересно, в этом блоге опубликовано 7 статей о jqGrid и более 650 комментариев к ним.

Прежде всего, привожу список статей.
Читать дальше

JavaScript и jQuery: перемещение блоков

Владимир | 8 января, 2011 | HTML, JavaScript, Web разработка.

В этот раз я покажу пример небольшого скрипта, позволяющего перемещать HTML блоки на странице.

Когда возникает подобная задача, первое что приходит в голову (по крайней мере мне 😉 ) – использовать готовые плагины. Например, jQuery Sortable. Что ни говори, решение довольно удобное, от пользователя требуется только перетащить объект с помощью мышки.

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

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

Именно такой вариант мы рассмотрим в этой статье.

Посмотреть результат можно на демонстрационной страничке
Читать дальше

Google Maps: выделение областей на карте

Владимир | 27 декабря, 2010 | HTML, JavaScript, Web разработка.

О сервисах Google Maps и Яндекс.Карты слышали, наверное, практически все пользователи интернета. Но если для рядового пользователя их возможности ограничиваются стандартным интерфейсом, то для разработчиков всё гораздо интереснее.

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

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

Прежде всего, сформулируем задачу.

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

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

Итак, принцип работы будет следующий.
Читать дальше