Архивы за месяц: апреля 2009

Сворачиваем списки с помощью 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) Дополнительная нагрузка на компьютер пользователя. Достаточно спорный момент. Вряд ли обычный пользователь заметит время, за которое будет создан один простой график. Но если графиков десятки и для их создания используются тысячи точек, то время создания такой страницы может существенно возрасти. В общем, тут многое зависит от вас.

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

Графики от Google и PHP библиотеки для работы с ними

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

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

Речь, конечно, пойдет о web сервисе Google Chart. Этот сервис появился достаточно давно и на сегодняшний день существует множество библиотек для работы с ним. Но к сервису и библиотекам мы ещё вернемся, а сейчас обсудим варианты создания графиков для web страниц.

Главная проблема

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

1) Создать рисунок с графиком и вставить его в страницу.

2) Использовать Flash. Об этом варианте я рассказывал в статье Графики своими руками – Open Flash Chart 2. По-идее, вместо Flash можно использовать Silverlight, но примеров я не видел.

Примечание. Big_Shark подсказал еще одну flash библиотеку для создания графиков — amCharts. Очень советую посмотреть. Возможно вам она понравится больше чем Open Flash Chart.

Рассмотрим подробнее первый вариант. Рисунок с графиком может быть статическим или динамическим.
Читать дальше

Графики своими руками – Open Flash Chart 2

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

Об этой библиотеке я раньше рассказывал (Open Flash Chart – строим графики). Но с тех пор прошло почти 8 месяцев и за это время многое изменилось.

Вышла новая версия библиотеки Open Flash Chart 2 и она довольно серьезно отличается от первой версии. Объяснять причины введения изменений я не буду, просто процитирую автора.

Open Flash Chart 1.x была отличной и хорошо работала. Но я сделал несколько маленьких ошибок, которые со временем выросли, стали раздражать меня и сделали исходный код жутким. Поэтому я решил, что настало время переработать код и снова сделать его красивым. Теперь в качестве формата данных используется JSON. Это привело к значительным изменениям и позволило реализовать несколько новых возможностей.

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

Думаю, ситуация более-менее ясна, поэтому сразу приведу пример использования второй версии.

Как и в первой версии нужно внимательно следить за размещением библиотеки и правильно указывать пути к файлам.
Читать дальше

tinyMCE — установка, настройка и использование.

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

Сегодня речь пойдет об использовании tinyMCE – одного из лучших JavaScript редакторов. На сегодняшний день подобных редакторов воз и маленькая тележка и, конечно, идеального не существует. Кстати, раньше я рассказывал об одном из них (Подключаем FCKeditor к CodeIgniter).

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

1) Предельно простое подключение.

2) В дистрибутив входит тема с минимальным количеством элементов управления.

3) Есть готовые скрипты для сжатия редактора.

4) Есть пакет для русификации.

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

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

jQuery: Специальные события

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

Этот пост — перевод статьи Брэндона Аарона (Brandon Aaron) Special Events, в котором он рассказывает об использовании специальных событий jQuery и приводит пример создания обработчика тройного клика мышкой.

jQuery, начиная с версии 1.2.2, имеет API для создания "специальных событий". Эти события называются специальными, потому что позволяют выполнять некоторые дополнительные действия при их возникновении, а также имеют опцию, позволяющую обходить внутреннею систему событий jQuery. Используя эти специальные события вы можете создавать пользовательские события, которые требуют выполнения каких-то действий перед началом работы (при установке) или должны переопределять поведение встроенных событий.

Мы использовали специальные события jQuery для создания событий “mouseenter” и “mouseleave”, а также для создания события “ready” и для нормализации события “mousewheel” в плагине mouse wheel.

Специальное событие: “tripleclick” (тройной клик).
Читать дальше

SimpleCoding и твиттер

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

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

Как-то не очень интересно читать, что кто-то проснулся или пошел обедать. Первое время интерес есть, но потом быстро надоедает 🙂 Да и сам писать о текущих делах я не собираюсь.

Но потом я все-таки решил поэкспериментировать с твиттером.

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

Первый. Дело в том, что во время работы у меня собирается много интересных ссылок. Я люблю читать блоги (в Google ридере их 238 штук), и большая часть из них связана с IT. Хорошие статьи попадаются регулярно и ссылками на них хочется поделиться.

Публиковать посты в стиле «обзор IT блогосферы» в этом блоге я не буду, а Твиттер для этих целей подходит великолепно.

Второй. Если количество читателей (Followers) будет большим можно попробовать публиковать идеи для очередных постов. Очень интересно узнать насколько тема интересна читателям ещё до того как пост написан.

Ну и конечно будет пиар новых постов в этом блоге 🙂

Так что, всех желающих приглашаю подписаться.

http://twitter.com/simplecoding

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

Я недавно читал пост о премиум аккаунтах. В принципе идея очень не плохая.

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

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

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

Если произойдет второй вариант, владельцам твиттера придется придумать новый способ монетизации. Надеюсь это будут не баннеры 🙂

Удачи!

И follow me!