{ "version": "https:\/\/jsonfeed.org\/version\/1.1", "title": "Здоровий глузд: дописи з тегом qr", "_rss_description": "Олександр Колодько. Інформаційний та навігаційний дизайнер. Співзасновник команди ARC, співзасновник та головний дизайнер в Агентах змін (А3). Пишу про дизайн і цікаве мені · alexkolodko.com · wayfinding.systems", "_rss_language": "uk", "_itunes_email": "", "_itunes_categories_xml": "", "_itunes_image": "", "_itunes_explicit": "", "home_page_url": "https:\/\/blog-archive.alexkolodko.com\/tags\/qr\/", "feed_url": "https:\/\/blog-archive.alexkolodko.com\/tags\/qr\/json\/", "icon": "https:\/\/blog-archive.alexkolodko.com\/pictures\/userpic\/userpic@2x.jpg?1768915547", "authors": [ { "name": "Олександр Колодько", "url": "https:\/\/blog-archive.alexkolodko.com\/", "avatar": "https:\/\/blog-archive.alexkolodko.com\/pictures\/userpic\/userpic@2x.jpg?1768915547" } ], "items": [ { "id": "132", "url": "https:\/\/blog-archive.alexkolodko.com\/all\/url-shortener-with-qr\/", "title": "Скорочувач посилань на своєму сайті та генерація QR-кодів", "content_html": "

Під час роботи над проєктом ознакування в заповіднику Тустані стикнувся з задач показувати на табличках QR код з більш детальною інформацією про обʼєкти. Але самі посиланні вели на wiki-сайт<\/a>, тому посилання були дуже довгими. Відповідно QR-коди містили більше точок і потреб вали більших розмірів, інакше камера їх просто не зчитувала. Тому треба було мати короткі посилання, які б перенаправляли на потрібні сторінки. Тоді це питання вирішив якось адмін сайту.<\/p>\n

\n $\"\"$ \n $\"\"$ \n<\/div>\n

Довге посилання<\/a>, що перенаправляє потім в апці на потрібний розділ<\/div>\n<\/div>\n

Потім вже в іншому кейсі стикнувся з необхідністю зробити на табличці QR, який в майбутньому можна було б змінити чи перенаправити.<\/p>\n

\n $\"\"$ \n

Табличка біля монумента в Ірпені<\/div>\n<\/div>\n

Авжеж є різні сервіси, на кшталт bit.ly, але опція зміни посилань платна і заради одного-двох випадків не вартує того. Окрім цього будь-які зовнішні сервіси можуть в якусь мить закритись і ніяких даних потім не лишиться, на відміну від надрукованого десь посилання.<\/p>\n

Тож я пішов пошукати альтернативи та знайшов два непоганих методи, якщо ви маєте свій сайт чи хостинг. Можливо посилання буде вже не таке коротке, як це було б з коротким доменом, але це дасть зручний інтерфейс, який коротко та у зрозумілому вигляді передавати якісь довгі посилання на ті ж Гугл Документи чи інші сторінки.<\/p>\n

htaccess — шлях адміна<\/h2>\n
Якщо ви адміністратор сайту, то логічно можна прописати редіректи (перенаправлення) у файлі .htaccess<\/i>. Але це дещо складно адмініструвати та треба знати як.<\/p>\n
Наприклад, коли ми міняли структуру сайту А3, то зробили додаткові редіректи, щоб працювали посилання, які були десь використані раніше: a3.kyiv.ua\/metromap<\/a> <\/i> → a3.kyiv.ua\/projects\/metromap<\/a><\/i>.<\/p>\n
Рядок у файлі виглядає так:<\/p>\n
`Redirect \/metromap \/projects\/metromap<\/code><\/pre>`JS + TXT — найпростіше рішення<\/h2>\nІнше рішення яке я знайшов — js-url-shotener<\/a> — це JS-скрипт, який зчитуватиме введену адресу та окремий TXT-файл в якому зберігатимуться самі редіректи. У самому текстовому файлі перенаправлення записуються у дуже простому вигляді: коротке посилання, далі стрілка з символів =><\/i> і далі довге посилання.<\/p>\n \nShortlink => Longlink<\/i><\/p>\n<\/blockquote>\n І далі використовуємо посилання має бути через символ решітки #. Наприклад, якщо ми розмістимо скрипт і текстовий файл у піддиректорії з назвою l, то коротке посилання матиме вигляд:<\/p>\n\n wayfinding.systems\/l#a <\/a><\/p>\n<\/blockquote>\n \nЯк працює скрипт<\/div>\n<\/div>\nПлюси:<\/p>\n\nВсе працює максимально просто, як текст.<\/li>\nЯкщо посилання зникне чи буде не потрібно, то коротке посилання вестиме на головний сайт і не видаватиме помилку.<\/li>\n<\/ul>\nМінуси:<\/p>\n\nПотрібно додавати до адреси символ #.<\/li>\nНемає адмінки та статистики переходів чи якоїсь аналітики.<\/li>\n<\/ul>\nДодаємо адмінку<\/h3>\nА в якості адмінки, яка дасть доступ не через FTP, а прямо на сайті, є простий файловий менеджер на PHP — Pheditor<\/a>.<\/p>\n NB: Якщо розмістити всі файли та піддиректорії, то Pheditor матиме доступ тільки до них, а та решти сайту ні.<\/p>\n \nsite.com\\l\\<\/i><\/p>\n<\/blockquote>\n\nЯк працює адмінка Pheditor<\/div>\n<\/div>\nYourls — PHP-рішення зі зручною адмінкою та блекджеком<\/s> плагінами<\/h2>\nЯкщо маєте хостинг з підтримкою PHP, то є гарне опенсорс рішення, яке ви можете встановити, наприклад, на піддомені — движок Yourls<\/a>. По факту база даних з адмінкою, в якій ви вписуєте довге посилання і короткий відповідник. Сервіс містить аналітику для відстеження кількості переходів та звідки були ці переходи.<\/p>\n \n\nСайт Yourls<\/div>\n<\/div>\nПриємний плюс — можливість створити свій плагін, що розширятиме функції сайту або знайти у цій прекрасній галереї<\/a> вже готовий. Також можна створити свою тему оформлення, якщо хочете зробити сайт подібним до інших своїх сторінок.<\/p>\n Для оформлення рекомендую тему Sleeky<\/a>, яка виглядає найбільш сучасно і простою. Плюс ця тема містить модуль для додавання посилань без входу в адмінку, може буде корисно і можна цю сторінку оформити під себе.<\/p>\n Бонус: плагін, що генерує QR-код<\/h2>\nЗахотілось мати можливість швидко створити QR-код для нових коротких посилань.<\/p>\nТож зробив плагін<\/a>, який при додаванні до посилання сполучення .qr<\/i>, на сайті відкривається окрема сторінка зі згенерованим кодом який можна зберегти у векторних форматах SVG та PDF, або растрових PNG та JPG.<\/p>\n \nЯк працює плагін<\/div>\n<\/div>\nСтиль QR-коду за замовчуванням чорний на прозорому тлі, але через параметри можна на це впливати. Наприклад, жовтий код (ff0, без символу #), тло кольору tomato та відступ від краю у 3 клітинки:<\/p>\n\ncolor=ff0<\/li>\n background=tomato<\/li>\npadding=3<\/li>\n<\/ul>\n\n\n<\/div>\nЯкщо ви хочете зафіксувати стиль, який буде застосовувати одразу при генерації, то у файлі плагіну plugin.php<\/i> пропишіть потрібні параметри, тоді вони передаватимуться разом з текстом.<\/p>\nheader('Location: \/qr?content='.YOURLS_SITE.'\/'.$keyword.'&color=ff0&background=tomato&padding=3');<\/code><\/pre> <\/p>\n₴<\/b><\/span><\/p>\n<\/div>Якщо вам було цікаво та корисно, можете пригостити мене кавою ☕️, задонатити чи підписатись:<\/p>\n \nна Базу<\/a><\/li>\n на Buy Me a Coffee<\/a><\/li>\n напряму на картку Монобанку<\/a> або через сайт<\/a>.<\/li>\n<\/ul>\n<\/div><\/div>", "date_published": "2024-02-09T18:58:17+02:00", "date_modified": "2024-02-10T13:18:44+02:00", "tags": [ "qr", "інструменти", "автоматизація" ], "image": "https:\/\/blog-archive.alexkolodko.com\/pictures\/tustan-2.png", "_date_published_rfc2822": "Fri, 09 Feb 2024 18:58:17 +0200", "_rss_guid_is_permalink": "false", "_rss_guid": "132", "_e2_data": { "is_favourite": false, "links_required": [ "jquery\/jquery.js", "fotorama\/fotorama.css", "fotorama\/fotorama.js", "highlight\/highlight.js", "highlight\/highlight.css" ], "og_images": [ "https:\/\/blog-archive.alexkolodko.com\/pictures\/tustan-2.png", "https:\/\/blog-archive.alexkolodko.com\/pictures\/tustan-1.png", "https:\/\/blog-archive.alexkolodko.com\/pictures\/irpin.jpeg", "https:\/\/blog-archive.alexkolodko.com\/pictures\/yourls-site.png", "https:\/\/blog-archive.alexkolodko.com\/pictures\/qr-custom.png" ] } } ], "_e2_version": 4134, "_e2_ua_string": "Aegea 11.3 (v4134)" }