WordPress: создаем виджет для показа картинок с Flickr

12 декабря, 2009
wordpress flickr widget

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

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

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

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

Единственное условие – тема должна быть «widget ready», т.е. поддерживать виджеты. Но добавить эту поддержку несложно. Подробная инструкция находится здесь. Чтобы не усложнять пример, я буду считать, что используется дефолтная тема.

Сформулируем задачу.

Допустим, нам нужен виджет, который будет находить по заданным тегам на сервесе flickr картинки и показывать их. При этом администратор должен иметь возможность задать теги, количество картинок и их размер.
Читать дальше »

Опубликовано в HTML, PHP, Web разработка, WordPress | Комментарии (4) »

Управление jqGrid с помощью поля с автозавершением

17 ноября, 2009
jqGrid_autocomplete

Сегодня я продолжу рассказывать о плагине jqGrid и покажу еще один пример его использования.

Если не ошибаюсь, это уже 5-ый пост об этом плагине, поэтому я не буду останавливаться на его установке и настройке. Лучше приведу ссылки на предыдущие части:

1) Query Grid Plugin – "продвинутое" решение для создания таблиц

2) jqGrid: редактирование табличных данных с помощью inline редакторов

3) jqGrid – создание дополнительных кнопок

4) jqGrid – поиск данных

Но для тех, кто их не читал, кратко поясню, о чем вообще речь.

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

Естественно, у плагина очень много настроек и вариантов использования, но это не означает, что их хватит на все случаи жизни ;)

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

Как это работает, вы можете посмотреть на демо-страничке

демонстрационный пример

либо скачать архив с примером и установить его на своем сервере

архив с исходным кодом

Реализовать такую систему не сложно.
Читать дальше »

Опубликовано в Ajax, HTML, JavaScript, MySQL, PHP, Web разработка | Комментарии (6) »

Создание слайдшоу на JavaScript и несколько особенностей анимации

8 ноября, 2009

jquery_panel_gallery

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

На днях я экспериментировал с плагином jQuery Panel Gallery и хочу поделиться впечатлениями, а заодно рассказать, как с ним работать. Кроме того, использование подобных плагинов имеет некоторые особенности, которые касаются не их самих, а JavaScript анимации вообще.

Итак, начнем с плагина.

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

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

демонстрационный пример

И, конечно, вы можете скачать архив с примером.

архив с исходным кодом
Читать дальше »

Опубликовано в HTML, JavaScript, Web разработка | Комментарии (14) »

960 Grid System: зачем нужны CSS фреймворки

30 октября, 2009
960grid logo

Что-то давно я ничего не писал о CSS, а ведь использовать эту технологию приходится практически постоянно.

Кроме того, последнее время я начинаю замечать, что все чаще использую CSS фреймворки. Поэтому сегодня речь пойдет именно о них. А точнее, об одном из них, под названием 960 Grid System.

Почему именно о нем? Тут все очень просто. Я более-менее плотно работал с двумя фреймворками: Blueprint и 960 grid. При этом, на мой взгляд, разработчикам 960 grid system удалось добиться очень хорошего отношения возможности/размер фреймворка.

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

Начнем с недостатков.

Если вы хоть немного интересовались темой, то, конечно, знаете, что есть много возражений против применении CSS фреймворков как таковых.

Основные возражения такие.
Читать дальше »

Опубликовано в CSS, HTML, Web разработка | Комментарии (25) »

Передача параметров в JavaScript файлы

26 сентября, 2009
js parameters

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

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

Прежде всего, объясню, в чем заключается проблема. Обычно в конфигурационных файлах серверных (PHP) скриптов хранится множество настроек. И к некоторым из них нужно получить доступ из JavaScript. Если все эти параметры собраны в одном месте (конфигурационном файле или БД), то значительно упростится поддержку приложения.

Существует два широко распространенных решения этой задачи.
Читать дальше »

Опубликовано в HTML, JavaScript, PHP, Web разработка | Комментарии (6) »

Исправляем недостатки IE6

7 сентября, 2009
ie6-bugs-logo

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

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

И на сегодняшний день игнорировать людей, которые используют устаревшую версию Internet Explorer нельзя.

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

Сегодня я расскажу о двух проблемах, которые можно решить практически без усилий с вашей стороны. Это поддержка :hover селекторов и прозрачных png изображений.
Читать дальше »

Опубликовано в CSS, HTML, JavaScript, Web дизайн, Web разработка | Комментарии (31) »

jqGrid – поиск данных

1 сентября, 2009
jqgrid

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

Я довольно давно обещал рассказать о функции поиска в плагине jqGrid и сегодня выполняю обещание.

Для тех, кто сразу хочет посмотреть, как это работает, я сделал демонстрационную страничку

демонстрационный пример

и, конечно, можно скачать архив с примером

архив с исходным кодом

Напомню, что jqGrid – это плагин для библиотеки jQuery, который значительно упрощает работу с таблицами данных.

Сразу хочу отметить, что эта статья – продолжение предыдущих двух частей (jQuery Grid Plugin – "продвинутое" решение для создания таблиц и jqGrid: редактирование табличных данных с помощью inline редакторов). Поэтому если вы впервые слышите о jqGrid – очень советую почитать хотя бы первую часть.
Читать дальше »

Опубликовано в Ajax, HTML, JavaScript, PHP, Web разработка | Комментарии (110) »

PHP скрипт: ToDo с картинками

13 августа, 2009
simple tasks

Уделяете ли вы внимание организации своей работы?
Много ли у вас "мелких" дел, о которых вы регулярно забываете?

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

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

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

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

Кстати, скрипт называется SimpleTasks.

Главная особенность – возможность указывать состояние выполнения задач. При этом используется специальная система обозначений.
Читать дальше »

Опубликовано в Ajax, CSS, CodeIgniter, HTML, JavaScript, MySQL, PHP, Web разработка, htaccess | Комментарии (59) »

Калькулятор взвешенных оценок

22 июля, 2009
weight_calc

Приветствую всех!
В этот раз речь пойдет о создании калькулятора для расчета взвешенных оценок. Такие оценки часто используют при проведении различных тестирований и сравнений.

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

Естественно некоторые параметры будут важнее чем другие. Например, цена важнее веса. И вы хотите это учесть.

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

В суммарную оценку входит сумма оценок всех параметров, умноженных на их вес.

При этом удобно, чтобы сумма весов всех параметров равнялась 1 (100%). Например, цена – 50%, размер дисплея – 40%, вес – 10%.

Теперь рассмотрим пример создания такого калькулятора для 3-х параметров.

Нам понадобятся 3 поля для ввода оценок каждого из параметров и 3 слайдера (slider) для задания их весов.

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

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

Опубликовано в HTML, JavaScript, Web разработка | Комментарии (3) »

Строим редактируемые графики с помощью JavaScript

13 июля, 2009
jqplot

И снова я продолжаю тему графиков :)

Кстати, в том, что от twitter’а есть польза я недавно убедился на личном опыте :) . В ленте b1shop проскочила ссылка на очень интересный плагин для jQuery, предназначенный для создания графиков.

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

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

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

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

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

Опубликовано в HTML, JavaScript, Web разработка | Комментарии (15) »