Операционная система на JavaScript

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

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

Конечно, о полноценной замене ОС речь не идет, но, тем не менее, некоторые возможности присутствуют.

Например, можно менять оформление рабочего стола (цвета фона, шрифтов, обои и т.п.).

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

Социорега – скоростная регистрация в социальных закладках

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

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

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

Оформление внешних ссылок

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

Сегодня речь пойдет о работе со ссылками на web странице, а если точнее – об их оформлении для просмотра и печати. У вас может возникнуть вполне закономерный вопрос: «О чем тут вообще речь? Ведь с помощью CSS можно оформить ссылки как угодно». В принципе, это действительно так, и большинство примеров в этой статье используют именно CSS, но если добавить немного JavaScript кода, то результат будет намного интереснее 😉

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

Нам нужно:

1) Выделить (визуально) все внешние ссылки на странице (внутренние должны остаться без изменений).

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

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

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

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

Создаем плагин для jQuery

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

Этот пост – вольный перевод очень полезной статьи Jeffrey Way Learn How to Create a jQuery Plugin.

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

Вы можете скачать исходники этого примера или посмотреть демонстрацию.

У вас может возникнуть мысль: «Что за суета вокруг jQuery? Нужно загрузить кучу плагинов чтобы эта библиотека на что-нибудь годилась». Первое, это не так. Второе, jQuery специально разрабатывалась для широкого применения. Сохраняя ядро библиотеки маленьким – 16кБ (прим. – речь идет о сжатом варианте) – пользователи могут добавить дополнительные плагины по собственному усмотрению. Сегодня, я покажу вам, как создать собственный плагин под названием «Center» с нуля. Приступим!

Наша задача

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

Говнокод онлайн

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

На днях меня попросили написать об одном ресурсе под названием Говнокод онлайн.

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

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

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

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

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

Переключение чекбоксов с помощью jQuery

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

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

Кстати, это довольно широкораспространенная задача.

Количество чекбоксов изменялось динамически и некоторые из них могли быть не активными (их трогать нельзя).

Вобщем, уложился я в шесть строк (включая объявление функции).
Читать дальше

Подключаем FCKeditor к CodeIgniter

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

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

Но, естественно, всегда существует несколько нюансов, которые немного усложняют жизнь 🙂

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

Дело вот в чем. Плагины и библиотеки (пользовательские) обычно находятся в папке application, которая не обязательно должна находиться внутри DOCUMENT_ROOT. Точнее, с точки зрения безопасности, эту папку лучше убрать за пределы DOCUMENT_ROOT чтобы исключить любую возможность прямого доступа к скриптам сайта (т.е. скрипты будут доступны только через index.php).

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

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

Психологический поиск в WordPress

Владимир | | WordPress.

Сегодня речь пойдет о плагине для WordPress, который помогает узнать желания посетителей. Естественно, речь идет о желании почитать что-нибудь интересное на блоге, а не пойти попить пивка (для этого плагин не нужен 😉 ).

Любой блоггер старается стать популярным, но для этого нужно написать что-то интересное и полезное для читателей. И тут сразу возникает вопрос: «А что интересует посетителей?»

Рекомендаций на эту тему масса, но рабочих способов всего два:

1) проанализировать статистику (например, и Google, и Яндекс предоставляют инструменты для оценки популярности поисковых фраз);

2) спросить ваших читателей (устроить опрос или просто попросить высказаться в комментариях).

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

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

Плагин о котором я хочу рассказать называется Psychic Search и предназначен для сбора статистики поиска по блогу и её анализа.

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

Подсветка тегов в редакторе WordPress

Владимир | | WordPress.

Вчера наткнулся на очень интересный плагин для WordPress. Называется WP Advanced Code Editor.

Если говорить кратко, то этот плагин расширяет возможности стандартного HTML редактора. Визуальный режим (WYSIWYG) при использовании WP Advanced Code Editor должен быть отключен.

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

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

<pre lang="php">...</pre>

Этого тоже нельзя сделать в WYSIWYG режиме.

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

Теперь подробнее о возможностях.
Читать дальше

Собственный сервис поиска с помощью Google Maps

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

Современные web сервисы позволяют с минимальными усилиями существенно расширить функциональность сайта.

Сегодня речь пойдет об использовании карт от Google на собственном сайте.

Для начала определимся с задачей.

Допустим, нам нужно сделать поиск по картам. Т.е. посетитель вводит название города в поле формы, нажимает кнопку «Найти».

После этого наше приложение показывает соответствующую карту.

В общем, должно получиться что-то похожее на эту страницу.

Переходим к реализации.

Для использования карт Google на собственном сайте нужно получить специальный ключ (AJAX Search API Key).

Процедура предельно простая. Заходим на страницу регистрации, соглашаемся с лицензией, вводим адрес сайта в форму и жмем кнопку «Generate API Key».

В результате вы получите длинную строку с ключом.

Размещаем карту на странице.
Читать дальше