Фолксономия на Freetag и пара слов о SVG.

Добрый день! Надеюсь, все мои читатели счастливо перенесли свирепые морозы и с юмором относятся ко второй волне холодов.

Поговорим сегодня о фолксономии. В далёком 2002 году, в такую же холодную зиму я трудился в замечательной компании Infobox над одним фотосайтом. И я помню, как целый день менеджер Анна Зябрева убеждала наш дружный коллектив веб-программистов, что если одна фотка будет находиться сразу в нескольких каталогах - это хорошо! А мы настаивали, что ничего нет лучше точной иерархии каталогов. Слава богу мы были не правы.

Существует много других способов рассортировать объекты, например, пометить их тагами. Ещё больше облегчается труд разработчиков, если эти таги пользователи расставляют сами, что и получило название фолксономия. Просто? —Просто. Однако стартапы, которые первыми догадались применить этот способ организации контента Yahoo! купила за много миллионов долларов.

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

Ниже речь пойдёт о Freetag - небольшом приложении позволяющем легко внедрить в ваш сайт таги и фолксономию. Кроме технических подробностей автор, Gordon Luk, расскажет нам немного и о теоретической стороне вопроса.

Введение

Это руководство написано для разработчиков веб-приложений хорошо знающих PHP и MySQL. Опыт работы с ADOdb для PHP полезен, если вы хотите написать хак к Freetag, но не является необходимым

Помещение тагов в базу данных в естественных условиях

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

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

Разделение входных тагов и помещение их в кавычки.

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

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

Нормализация тагов(и «сырые» таги)

«Нормализация», когда мы говорим о тагах, относиться к любым операциям, которые модифицируют или, иными словами, фильтруют ввод пользователя (после разбиения на фразы), например, переводят ввод в нижний регистр, пропускают пробелы и знаки пунктуации и так далее. «Сырой» таг - это неизменённая версия тага, такая, как её ввёл автор. Freetag нормализует по умолчанию все таги, переведя их в нижний регистр и опуская все символы не являющиеся буквенно-цифровыми. Freetag также делает следующий шаг и, подобно Flickr, сохраняет в единственном экземпляре первоначальный «сырой» таг вместе с его нормализованной версией. В дополнение, когда таги отображается, на уровне реализации( implementer 's choice) происходит выбор: показывать их в пользовательском интерфейсе «сырыми» или же нормализованными. Сайты, подобные Flickr, показывают «сырой» таг пользователю, который его поставил, таким образом, поддерживая персональный пользовательский стиль разметки, и в то же самое время показывают другим пользователям нормализованный таг, он же используется в запросах и поиске.

1. URLы легче построить из буквенно-цифровых символов. Вам проще создать чистые урлы типа http://site.com/tag/tagname/ с помощью нормализованных тагов.
2. Даже если пользователи ставят таги в разных форматах: " NY", "N .Y.", и "ny", их нормализация обозначает, что любой ищущий по одному из этих тагов получит объекты с нормализованным тагом «ny». Это умеренное преимущество, когда запрашивается база данных, в которой хранятся таги.
3. Войдя в систему, пользователи могут продолжать использовать их собственные сырые форматы тагов, чтобы организовать свой контент. Многие пользователи расстраиваются, когда видят свои таги нормализованными.

Вы можете выбрать способ нормализации в настройках "normalize_tags" и даже контролировать фильтруемые символы с помощью строки "normalized_valid_chars"

Редактирование и удаление тага.

Существует два основных стиля позволяющих пользователям редактировать и удалять их таги. В del.icio.us стиле, пользователь всегда взаимодействует с тагами объекта при помощи простого текстового поля. Этот подход просто реализовать (albeit a bit inefficiently) с помощью комбинации функций Freetag delete_all_object_tags_for_user() и tag_object(), вызываемых на submission текстового поля редактирования. В стиле Flickr, каждый таг должен быть удалён индивидуально, кроме того, новые таги могут быть введены с помощью текстового поля. В этом случае используйте delete_object _tag() с tag_ object()

Многопользовательские таги объектов.

Существует один мудрёный вопрос (особенно в сочетании с разрешёнными «сырыми» тэгами) - могут ли два пользователя отметить объект одним и тем же тагом. Это полностью зависит от выбранного вами дизайна приложения, во Freetag может быть поддержан и тот, и другой способ с помощью параметра конструктора "block_multiuser_tag_on_object". По умолчанию многопользовательские таги объектов заблокированы.

Таггирование с Freetag

Как вы можете видеть, Freetag вполне гибок, позволяя вам построить систему таггирования по вашему вкусу. Плюс, это open source, так что вы можете свободно изменять его и настраивать, как вам нравиться.

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

Простое демо-приложение

Руководство основано на абстрактной базе данных приложения, в котором храниться информация об автомобилях. Это приложение хранит информацию в MySQL о конкретном автомобиле в виде:

Как вы можете видеть, первичный ключ называется "id" и является беззнаковым десятичным целым. Freetag требует, чтобы была возможность ссылаться по уникальному целочисленному ключу, как на пользователей, которые ставят таги, так и на таггируемые объекты.

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

Планирование

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

Хорошим началом будет определить три главных объекта, которые вам нужны, чтобы думать о реализации фолксономии на Freetag.

1. Таггируемые объекты – это любые объект, на которые мы будем ставить таги в нашей системе. В нашем случае, это будут автомобили. Вам будет нужен уникальный целочисленный ключ, чтобы определить таггируемые объекты единственным образом.
2. Таггировщики – пользователи, члены, деятели, агенты, кто угодно, кого отслеживает ваша база данных. Эти «объекты» определяют таги для ваших таггируемых объектов. Вам понадобиться уникальный целочисленный ключ, чтобы определить таггировщиков единственным образом.
3. Таги – есть шанс, что вы уже знаете, что такое таги. Но вы знаете что различные приложения используют таги по разному? Freetag моделирует каждый таг, как двойной, состоящий из «сырого тага»( "raw tag ") и соответствующей ему нормализованной формы. Так как Freetag по умолчанию нормализует сырые таги удаляя все символы не являющиеся буквенно-цифровыми, то если вам нужно использовать дополнительные символы в нормальной форме ваших тагов, вы сможете это сделать.

Примеры нормализации:

• Нормализованный таг: [platophilosopher] Сырой: [Plato , Philosopher!]
• Нормализованный таг: [mattsrecumbentbike] Сырой : [Matt's Recumbent Bike ]
• Нормализованный таг: [concert] Сырой: [concert]

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

Так или иначе, вот трёхобъектная модель для нашего примера:

1. Таггированые объекты – это могут быть автомобили, которые пользователи, по нашему желанию, могут помечать тагами. Уникальный целочисленный идентификатор - `cars`.id.
2. Таггировщики – это отдельные пользователи вашей системы. Уникальный целочисленный идентификатор - `users`.id
3. Таги – это слова, которые мы даём пользователям устанавливать на автомобили.

Довольно просто, не правда ли?

Установка и настройка

Чтобы установить Freetag, скачайте http://www.getluky.net/projects/freetag/freetaglatest.tar.gz .

Разархивируйте файл в директорию вне структуры вашего сайта.

Наибольший интерес представляют два файла:

• freetag. class.php – файл класса, который включает в себя api для freetag
• freetag .sql – SQL дамп который используется, чтобы создать таблицы freetag в вашей базе данных MySQL

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

Мы импортируем определение таблиц, запустив файл freetag. sql

mysql -u username -p databasename < freetag.sql

После того, как исполнится freetag.sql, мы готовы устроить тарарам.

Интеграция

Это весёлая глава! Рано или поздно вместе с этим руководством будут прилагаться примеры кода, но чтобы максимально быстро обеспечить вас нужными примерами, мы просто пробежимся по некоторым основным функциям и уясним общие принципы использования Freetag

Добавляем возможность ставить таги.

Первое что мы должны сделать, это позволить пользователям отмечать тагами ваши автомобили. Без тагов в системе, мы не сможем протестировать остальные функции! Итак, мы начнём со страницы детального описания автомобиля.

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

Будучи отправленной, форма поместит таги в длинную строку переменной $_POST['tags'] на следующей загрузившейся странице. Freetag по умолчанию настроен так, что таги разделяют пробелами, а таги из нескольких слов помещают в двойные кавычки, что позволяет делать таги длинней и интереснее. Помните, однако, что из нескольких слов состоят только сырые таги, при переходе в нормализованную форму в них удаляют пробелы.

Вот, на что может быть похож код обработки формы:

Итак, это позволит нам помечать объект тагами, не меняя существующей логики приложения. Простенько и со вкусом, ага?

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

Оставим в качестве упражнения для читателей:

• Позволить пользователю удалять их собственные таги (Подсказка: используйте секцию условного выражения, в которой выводятся сырые таги )
• Поставьте на таг ссылку, ведущую на страницу, где находятся все автомобили помеченные этим тагом.
• Создайте старомодное облако тагов с помощью ловкой функции $freetag-> silly_list()!
• Расскажите мне, какие баги я пропустил в примерах кода!

Заключение

Если вы ИСПОЛЬЗУЕТЕ Freetag, дайте мне знать, о каком разделе вы хотели бы узнать побольше, и я буду счастлив вам помочь. Здорово наблюдать волнение вокруг Freetag, и я действительно надеюсь, что это руководство по применению поможет вам понять, как Freetag может быть задействован в вашем PHP/MySQL приложении. Но будет чертовски супер круто услышать, как вы интегрировали Freetag в ваше приложение, и сколько это отняло времени.

До следующей встречи, Gordon Luk

В моих ближайших планах - доделать и разместить на своём сайте "Популярная веб-механика" простой плагин для Wordpress вводящий фолксономию на основе Freetag, а вдобавок рассказ как я его русифицировал этот плагин. Подсказка: для начала добавьте в переменную-шаблон $_normalized_valid_chars русские буквы - 'a-zA-Z0-9а-яА-Я'.

А сейчас, как обещал, немного о SVG

SVG расшифровывается как Scalable Vector Graphics, масштабируемая векторная графика. Это открытый формат на основе XML, который позволяет создавать двумерные изображения встроеные в страницу. К таким изображениям можно применять таблицы стилей, а также анимировать с помощью JavaScript. Возможности открываются интереснейшие, их хорошо обрисовал Иван Сагалаев в заметках "Эксперименты с SVG" и "SVG + CSS — чумовая смесь!"

На данный момент формат поддерживается FireFox начиная с версии 1.5 и частично Opera с версии 8.0 Beta 3. Microsoft собирается реализовать поддержку SVG в новой, седьмой версии IE, так что в ближайшем будущем можно ожидать массового распространения формата

Отсюда вопрос читателям - нужно ли вам руководство по SVG? Хороших русских я пока не нашёл, но есть несколько на английском языке. Ваши пожелания можно оставлять по адресу adodonov+SVG@gmail.com

P.S: Обладатели FF 1.5 могут посмотреть на толковый пример применения SVG: статистика использования элементов и аттрибутов.

На сём позвольте откланяться. В следующих выпусках: 10 самых полезных функций JavaScript, AJAX библиотека rico и микроформаты.