Создаём виджет для хранения заметок. Часть 2.

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

В этой статье мы продолжаем разработку виджета для работы с короткими заметками. Если вы не читали предыдущую часть, то очень советую бегло её просмотреть. В ней мы подробно описаны постановка задачи и реализована серверная часть виджета, т.е. весь PHP код.

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

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

Поэтому основную часть клиентской части у нас будет занимать JavaScript код. А чтобы его сократить мы используем библиотеку jQuery с несколькими плагинами.

Кстати, есть демонстрационная страничка с этим виджетом.

Demo

И, как и обещал, выкладываю архив с исходниками.

Source

Прежде всего, рассмотрим разметку страницы (index.html).
Читать дальше

Создаём виджет для хранения заметок. Часть 1.

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

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

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

Код виджета не сложный, но требует использования сразу нескольких технологий: PHP и MySQL на стороне сервера, HTML, CSS, JavaScript – на стороне клиента, поэтому я разбил статью на 2 части. В первой мы рассмотрим серверную часть кода, во второй – клиентскую.

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

Demo

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

Начнем с базы данных.
Читать дальше

jQuery Grid Plugin — «продвинутое» решение для создания таблиц

Владимир | | Ajax, HTML, JavaScript, PHP, Web разработка.

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

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

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

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

Стикер. Создаем плагин для jQuery.

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

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

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

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

Demo
Source

Теперь перейдем к реализации.
Читать дальше

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

Владимир | | Hosting, Разное.

Статья «Как самостоятельно и бесплатно зарегистрировать домен» до сих пор остается самой популярной в этом блоге, несмотря на то, что прошел 1 год и 9 месяцев с момента её публикации.

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

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

Как поймать спамеров в twitter’е

Владимир | | Разное.

Сегодня будет небольшой оффтопик. Мне просто хочется обсудить twitter и его проблемы 🙂

Начну из далека. Многие блоггеры (и не только они) уже зарегистрировались в этом сервисе и пользуются им. Только пользуются по-разному.

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

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

Отправка данных в формате JSON с помощью JavaScript и jQuery

Владимир | | Ajax, JavaScript, PHP, Web разработка.

В прошлых статьях я рассказывал и приводил примеры получения и обработки данных в формате JSON на стороне клиента. Но примера отправки данных серверу в этом формате не было. Сегодня я попробую исправить это упущение.

Прежде всего, кратко напомню принцип передачи данных в JSON формате от сервера браузеру.

1) Серверный (PHP) скрипт формирует массив с данными, преобразует их в формат JSON (используется функция json_encode) и отправляет браузеру.

2) На стороне браузера JS скрипт обрабатывает полученные данные. Тут для преобразования данных используется eval.

То есть все преобразования данных сводятся к использованию двух функций.

Отправка данных серверу немного сложнее.
Читать дальше

Делаем радио кнопки удобными

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

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

В этой заметке я расскажу, как можно значительно увеличить этот показатель для формы с радио кнопками (radio buttons) за счет правильной HTML разметки и нескольких CSS стилей.

Обратите внимание. Применение этих советов никоим образом не сказывается на работоспособности формы и не изменяет отправляемые данные.

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

Сворачиваем списки с помощью jQuery

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

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

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

Применений для этого плагина можно найти множество. Например:

1) Выравнивать высоту блоков в сайдбаре. Тут лучше сильно не увлекаться. Вряд ли будет удачным решением свернуть блок со списком разделов сайта. Но если вы свернете блоки типа «Последние посетители» или «Топ комментаторов», то вреда большого не будет.

2) Прятать редко используемые пункты в меню. Предварительно, конечно, нужно отсортировать список с этими пунктами и разместить наиболее популярные в начале.

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

4) Использовать для SEO. Часто оптимизаторы делают очень большие блоки ссылок на внутренние страницы сайта. Это даёт возможность получить много страниц 2-ого уровня. Но выглядят такие блоки далеко не лучшим образом (много мелкого текста).

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

Принцип работы плагина.
Читать дальше

JavaScript библиотеки для создания графиков

Владимир | | Ajax, htaccess, HTML, JavaScript, PHP, Web разработка.

Сегодня я продолжу рассказ о создании и использовании графиков на web ресурсах.

В предыдущих статьях речь шла об использовании для этих целей flash библиотек (Графики своими руками – Open Flash Chart 2) и внешних сервисов (Графики от Google и PHP библиотеки для работы с ними).

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

Рассмотрим достоинства и недостатки этого варианта.

Достоинства.

1) Минимальные затраты на трафик. Передать нужно только саму библиотеку (обычно размер не превышает 100 кБ (без сжатия)) и данные для построения графика.

2) Минимальная нагрузка на сервер. Отрисовка графика выполняется браузером. Сервер должен только отправить массив с точками, по которым будет построен график.

3) Простота использования. Достигается за счет готовых библиотек.

Недостатки.

1) Возможны проблемы совместимости с некоторыми браузерами. С этими проблемами знакомы все web мастера. Но, должен отметить, что разработчики библиотек неплохо с ними справляются.

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

Теперь перейдем к практической части.
Читать дальше