—»     —»   Автоматическое создание и вывод адресов страниц в виде QR-кодов для DataLife Engine
  Раздел: DataLife Engine (DLE)   Комментариев: 2  

Автоматическое создание и вывод адресов страниц в виде QR-кодов для DataLife Engine



Сегодня мы решили создать и поделиться с вами мини-руководством по созданию и выводу адресов страниц в виде QR-кодов для DataLife Engine. Для этого мы воспользуемся сервисом создания QR-кодов http://qrserver.com/.
Итак, для начала вам нужно определиться, где и для чего вы будете генерировать и выводить QR-коды. Например, на нашем сайте coolwebmasters.com QR-коды выводятся для всех адресов страниц, на которых мы публикуем новости. QR-код может быть сосканирован мобильным устройством как с краткой новости (анонса), так и с полной новости (статьи/публикации). Вы можете воспользоваться подобным подходом или разработать свой персональный подход к показу QR-кодов.

В нашем мини-руководстве мы расскажем вам о том, как генерировать QR-код именно к публикуемым материалам. Итак, начнем.

1. Откройте любой текстовый редактор (например, Notepad++) или HTML-редактор (например, Adobe Dreamweaver) и впишите следующий код:

http://api.qrserver.com/v1/create-qr-code/?

2. Далее определим размер генерируемого QR-кода. Обращаем внимание, что у вас на выходе должен быть квадрат и только квадрат. Ни в коем случае не прямоугольник, не круг и не трапеция. Поэтому размеры сторон квадрата должны быть равными. Вы можете задать значения размера в пределах от 10 до 1000 пикселей. Формат кода будет следующим: 10x10 или 1000x1000 или иным, зависимо от вашего требования. В нашем случае размеры выводимого QR-кода составляют 150x150 пикселей, поэтому к коду, приведенному ранее нам следует дописать следующий фрагмент:

size=150x150

в результате мы получим следующий код:

http://api.qrserver.com/v1/create-qr-code/?size=150x150

3. Следующим пунктом будет раскраска QR-кода требуемым нам цветом. По умолчанию сгенерированный код будет иметь черную заливку, которую вы всегда можете определить заранее, используя требуемый вам цвет. Задать цвет QR-кода вы можете следующим образом:

255-0-0 или f00 или FF0000 (для красного цвета);
0-255-0 или 0f0 или 00ff00 (для зеленого цвета);
0-0-255 или 00f или 0000ff (для синего цвета);

Т.е. используя указанные примеры, вы можете определить нужный вам цвет заливки в RGB- или HEX-формате. Если вас интересует наше мнение, то мы рекомендовали бы вам воспользоваться HEX-значением нужного цвета.
Итак, с цветом мы определились, далее дописываем в конец нашего кода следующий фрагмент:

&color=7F878F

в результате мы получим следующий код:

http://api.qrserver.com/v1/create-qr-code/?size=150x150&color=7F878F

4. Мы почти у цели, но нам нужно еще добавить данные, на основании которых будет сгенерирован QR-код. В нашем случае такими данными будет служить ссылка на страницу новости, т.е. ее полный абсолютный адрес в Сети. Например, возьмем следующий адрес:

http://www.coolwebmasters.com/uncategorized/3628-top-tech-trends-to-look-out-for-in-2013.html

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

&data=http://www.coolwebmasters.com/uncategorized/3628-top-tech-trends-to-look-out-for-in-2013.html

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

http://api.qrserver.com/v1/create-qr-code/?size=150x150&color=7F878F&data=http://www.coolwebmasters.com/uncategorized/3628-top-tech-trends-to-look-out-for-in-2013.html

5. Код вызова картинки QR-кода готов и теперь нам нужно вставить его в краткую и полную новость на нашем сайте. Для этого открываем файл-шаблоны краткой и полной новости (в DLE это файлы в папке шаблона с именами shortstory.tpl и fullstory.tpl) и в нужное место (нужное место вы должны найти или создать самостоятельно) вставляем тэг вывода изображения со следующими параметрами и следующего вида:

<img src="" width="150" height="150" alt="QR-код адреса статьи">

Источником изображения будет ранее созданная нами ссылка, которую мы вставляем в атрибут "src". Т.е.:

<img src="http://api.qrserver.com/v1/create-qr-code/?size=150x150&color=7F878F&data=http://www.coolwebmasters.com/uncategorized/3628-top-tech-trends-to-look-out-for-in-2013.html" width="150" height="150" alt="QR-код адреса статьи">

6. Подключаем магию DataLife Engine. Как вы уже наверное заметили, мы создали код и тэг вывода QR-кода для определенной статьи. Но ведь это статика, а нам нужна динамика. Под динамикой мы подразумеваем автоматическое генерирование QR-кода для любой новости на сайте с индивидуально для нее сгенерированным QR-кодом. К счастью, функционал движка DLE обладает чудотворными возможностями, одну из которых мы и используем в нашем случае, а именно ключ {full-link}.

Согласно документации к DLE, ключ {full-link} предназначен для вывода полного постоянного адреса новости и может быть использован в файл-шаблонах краткой и полной новости. Этим фактором мы и воспользуемся для создания динамичности генерации.

Чтобы применить ключ {full-link} к нашему случаю нам необходимо изменить ранее созданный тэг изображения следующим образом:

<img src="http://api.qrserver.com/v1/create-qr-code/?size=150x150&color=7F878F&data={full-link}" width="150" height="150" alt="QR-код адреса статьи">

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

7. В завершение сохраняем внесенные изменения в файл-шаблоны shortstory.tpl и fullstory.tpl и перезаливаем данные файлы на сервер. Переходим на свой сайт и наблюдаем красоту генерации QR-кодов для любой новости на вашем сайте.

Автоматическое создание и вывод адресов страниц в виде QR-кодов для DataLife Engine
пример вывода QR-кода в краткой новости DLE

Автоматическое создание и вывод адресов страниц в виде QR-кодов для DataLife Engine
пример вывода QR-кода в полной новости DLE

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

В завершение хотим сказать, что для генерации QR-кодов вы можете использовать и другие опции. Все зависит от ваших требований и фантазии. К примеру, зависимо от случая, вы можете задавать кодировку (с помощью параметра charset-source), или выставить фоновую заливку (с помощью параметра bgcolor) или указать поля (при помощи параметра margin). Весь спектр возможных параметров, а также их описания и формат вывода вы можете изучить, прочитав документацию к qrserver-у.

На этом все. Благодарим вас за внимание! Если данный материал был вам интересен и полезен - поделитесь ссылкой на него в социальных сетях или с помощью QR-кода.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: QR-код, DLE
Опубликовал Design FactoRy   Прочитано (раз): 4471   |   Оставлено комментариев: 2
Распечатать
Другие статьи и новости по теме:
Комментарий #1: 28 января 2013 @ 16:41
Написал: tcse — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
пожалуй бы я добавил:

QR-код полезен не для самой статьи которую вы читаете с экрана компьюетра, а для страницы "версии для печати"

ведь именно подобную страницу стараются распечатать на бумаге, а вот там QR код будет в самый раз
Комментарий #2: 29 января 2013 @ 09:05
Написал: krapan88 — группа: Читатели  
На сайте с: 31.01.2010   |   Публикаций: 0   |   Комментариев: 59
ICQ: --- не указано ---
для wordpress этот способ тоже работает, только нужно поменять {full-link} на родной вордпрессовский <?php the_permalink(); ?>

Штука хорошая, но есть маленькое но... Для длинных заголовков статей кьюар код практически нечитабелен. Может кто подскажет как "на лету" ее сокращать?
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Февраль 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
2728