Кодування тексту сайтів і не тільки. Розбір польотів і рішення проблем





Здрастуйте, шановні читачі, шанувальники та інші хороші люди!

Чи траплялося Вам отримувати і читати листи на «фіг якому зрозумій мовою» або заходити на який-небудь інтернет-ресурс і замість звичних букв бачити суцільні кракозябри? Якщо так, тоді ця замітка для Вас, бо в ній ми поговоримо про кодування сторінок, її форматах, чому она виникає і як надалі уникнути незрозумілих ієрогліфів.

Кодування тексту сайтів і не тільки. Розбір польотів і рішення проблем

Отже, сьогодні нас чекає не легка софтова стаття, а сувора технічна, так що приготуйтеся: будемо трохи заглиблюватися в суворі реалії.

Поїхали.

Що таке кодування тексту і з чим її їдять?

Почати хотілося б з того, що цієї статті могло б і не бути, тому комп’ютерно-юзательная життя автора цих рядків протікала цілком собі спокійно і гідно. Але ось в один прекрасний день, шляясь по просторах мережі Інтернет не зі свого ПК, я зіткнувся з незрозумілими явищами на деяких сайтах. Заходячи на інтернет-ресурси, я бачив не звичний нам російський алфавіт і красивий зрозумілий текст, а якусь єресь у вигляді незрозумілої послідовності символів. Виглядала вона приблизно ось так (див. Зображення).

Кодування тексту сайтів і не тільки. Розбір польотів і рішення проблем

Спочатку я подумав, що моя улюблена мозілку (браузер Firefox) перегрілася і їй пора викликати невідкладну допомогу, але потім почав розуміти, що проблема, швидше за все, на стороні ресурсу мережі і криється вона в неправильно налаштованої кодуванні. Це дійсно виявилося так, і пошаманіть трохи з бубном, проблемка була оперативно вирішена. Результатом же всіх моїх любовних пригод і став сьогоднішній матеріал. Власне, поїхали розбиратися в деталях.

Всю інформацію, представлену в цифровому вигляді і знаходиться в глобальній павутині, потрібно розглядати з двох сторін: перша — з боку користувача (красивий і доглянутий текст на екрані монітора) і друга — з боку пошукової машини (якийсь програмний код, що складається з різних тегів / метатегов, таблиці символів та інше).

Якщо Ви хоч трохи знайомі з мовою розмітки гіпертексту (HTML), то повинні бути в курсі, що сайт очима пошукових машин (Google, Яндекс) бачиться не як звичайний текст, а як структурований документ, що складається з послідовностей різного роду тегів. Щоб було зрозуміліше, про що я кажу, давайте поглянемо на всіма нами улюблений сайт Нотатки Сіс.Адміна «проекту [Online-Games], але не очима звичайного користувача, а« очима »пошуковика. Для цього натискаємо поєднання клавіш Сtrl + U (для браузерів Firefox і Chrome) і бачимо наступну картину (див. Зображення):

Кодування тексту сайтів і не тільки. Розбір польотів і рішення проблем

Перед нами машинний варіант online-games.kuzenstudio.ru, ось в такому ось непрезентабельному вигляді він подається пошуковим системам і саме в такому вигляді вони його і їдять. Якби ми просто взяли і «засандалив» варіанти статей з блокнота або Word звичайним текстом, машини б їм не те що подавилися, вони б навіть і є його не стали. Отже, перед нами головна сторінка проекту в HTML-вигляді. Зверніть увагу на рядок з написом UTF-8, це не що інше, як горезвісна кодування тексту сторінки, саме вона і відповідає за формат виведення інформації в презентабельному вигляді, в результаті чого через браузер ми бачимо нормальний текст.

Тепер давайте розберемося, чому ж відбувається так, що часом на екрані монітора ми бачимо кракозябри. Все дуже просто, проблема криється у відкритті файлу в невірній кодуванні. Якщо перевести на побутову мову, то допустимо Вас послали в магазин за молоком, а Ви притарабанив хліб, начебто теж їстівне, але зовсім інший формат продукту.

Отже, тепер давайте розбиратися з теорією і для цього введемо деякі визначення.

Кодування (або «Charset») — відповідність набору символів набору числових значень. Потрібна для «зливання» інформації в інтернет, тобто текстова інформація перетворюється в біти даних;

Кодова сторінка («Codepage») — 1 байтовая (8 біт) кодування;

Кількість значень, прийняте 1 байтом — 256 (два у восьмому).

Відповідність «символ-зображення» задається за допомогою спеціальних кодових таблиць, де кожному символу вже привласнений свій конкретний числовий код. Таких таблиць існує досить багато, і в різних таблицях один і той же символ може ідентифікуватися по-різному (йому можуть відповідати різні числові коди).

Всі кодування розрізняються кількістю байт і набором спеціальних знаків, до яких перетворюється кожен символ вихідного тексту.

Примітка:

Декодування — операція, в результаті якої відбувається перетворення коду символу в зображення. В результаті цієї операції інформація виводиться на екран монітора користувача.

Загалом .. З визначеннями розібралися, а тепер давайте дізнаємося, які ж (кодування) бувають.

Види кодувань тексту

А їх, загалом-то, не бракує.

ASCII

Однією з найбільш «древніх» вважається американська кодировочная таблиця (ASCII, читається як «аски»), прийнята національним інститутом стандартів. Для кодування вона використовувала 7 бітів, в першому 128 значеннях розміщувався англійський алфавіт (у нижньому і верхньому регістрах), а також знаки, цифри і символи. Вона більше підходила для англомовних користувачів і не була універсальною.

Кирилиця

Вітчизняний варіант кодування, для якого стали використовувати другу частину кодової таблиці — символи з 129 по 256. Заточена під російськомовну аудиторію.

 Кодування сімейства MS Windows: Windows 1250-1258.

8-бітові кодування, з’явилися як наслідок розробки самої популярної операційної системи, Windows. Номери з 1250 по 1258 вказують на мову, під який вони заточені, наприклад, 1250 — для мов центральної Європи; 1251 — кириличний алфавіт.

Код обміну інформацією 8 біт — КОИ8

KOI8-R, KOI8-U, KOI-7 — стандарт для російської кирилиці в юнікс-подібних операційних системах.

Юнікод (Unicode)

Універсальний стандарт кодування символів, що дозволяє описати знаки практично всіх письмових мов. Позначення «U + xxxx» (хххх — 16-ковий цифри). Найпоширеніші сімейства кодувань UTF (Unicode Transformation Format): UTF-8, 16, 32.

В даний час, як кажуть, «рулить» UTF-8 — саме вона забезпечують найкращу сумісність зі старими ОС, які використовували 8-бітові символи. В UTF-8 кодуванні знаходяться більшість сайтів в мережі Інтернет і саме цей стандарт є універсальним (підтримка кирилиці і латиниці).

Зрозуміло, я привів не всі види кодувань, а тільки найбільш ходові. Якщо ж Ви хочете для загального розвитку знати їх усі, то повний список можна відшукати в самому браузері. Для цього достатньо пройти в ньому на вкладку «Вид-Кодування-Вибрати список» і ознайомитися зі всілякими їх варіантами (див. Зображення).

Кодування тексту сайтів і не тільки. Розбір польотів і рішення проблем

Думаю виникло резонне питання: «Якого дідька стільки кодувань?». Їх достаток і причини виникнення можна порівняти з таким явищем, як кроссбраузерность / кроссплатформенность. Це коли один і той же сайт сайт відображається по-різному в різних інтернет-браузерах і на різних гаджет-пристроях. До речі у сайту «Нотатки Сіс.Адміна» з цим, як Ви помітили все в порядку :).

Всі ці кодування — робочі варіанти, створені розробниками «під себе» і рішення своїх завдань. Коли ж їх кількість перевалила за всі розумні межі, а в пошуковиках стали плодитися запити типу: «Як прибрати кракозябри в браузері?» — Розробники стали ламати голову над приведенням всієї цієї каші до єдиного стандарту, щоб, так би мовити, всім було добре. І кодування Unicode, в общем-то, це «добре» і зробила. Тепер якщо такі проблеми і виникають, то вони носять локальний характер, і не знають як їх виправити тільки зовсім неосвічені користувачі (втім, часто біда з кодуванням і відображенням сайтів з’являється через те, що веб-майстер вказав на стороні сервера некоректний формат, і доводиться перемикати кодування в браузері).

Ну от, власне, поки вся «базово необхідна» теорія, яка дозволить Вам »не плавати» в кодіровочних питаннях, тепер переходимо до практичної частини статті.

Вирішуємо проблеми з кодуванням або як прибрати кракозябри?

Отже, наша стаття була б неповною, якби ми не торкнулися користувальницького-побутові питання. Давайте їх і розглянемо і почнемо з того, як (за допомогою чого) можна подивитися кодування?

У будь-якій операційній системі є таблиця символів, її не потрібно докачивать, встановлювати — це даність згори, яка розташовується за адресою: «Пуск-програми-стандартні-службові-таблиця символів». Це таблиця векторних форм всіх встановлених у Вашій операційній системі шрифтів.

Кодування тексту сайтів і не тільки. Розбір польотів і рішення проблем

Вибравши «додаткові параметри» (набір Unicode) і відповідний тип накреслення шрифту, Ви побачите повний набір символів, в нього входять. Клікнувши по будь-якому символу, Ви побачите його код у форматі UTF-16, що складається з 4-х шістнадцяткових цифр (див. Зображення).

Кодування тексту сайтів і не тільки. Розбір польотів і рішення проблем

Тепер пара слів про те, як прибрати кракозябри. Вони можуть виникати у двох випадках:

З боку користувача — при читанні інформації в інтернет (наприклад, при заході на сайт);

Або, як говорилося трохи вище, з боку веб-майстра (наприклад, при створенні / редагуванні текстових файлів з підтримкою синтаксису мов програмування в програмі Notepad ++ або через вказівки неправильної кодування в коді сайту).

Розглянемо обидва варіанти.

№1. Ієрогліфи з боку користувача.

Припустимо, Ви запустили ОС і в якомусь з додатків у Вас відображаються горезвісні каракулі. Щоб це виправити, йдемо за адресою: «Пуск — Панель управління — Мова і регіональні стандарти — Зміна мови» і вибираємо зі списку, «Росія«.

Кодування тексту сайтів і не тільки. Розбір польотів і рішення проблем

Також перевірте у всіх вкладках, щоб локалізація була «Росія / русский» — це так звана системна локаль.

Якщо Ви відкрили сайт і раптом зрозуміли, що почитати інформацію Вам не дають ієрогліфи, тоді варто поміняти кодування засобами браузера («Вид — Кодування»). На яку? Тут все залежить від виду цих кракозябри. Орієнтуйтеся на наступну шпаргалку (див. Зображення).

Кодування тексту сайтів і не тільки. Розбір польотів і рішення проблем

№2. Ієрогліфи з боку веб-майстра.

Дуже часто початківці розробники сайтів не надають великого значення кодуванні створюваного документа, в результаті чого потім і стикаються з вищезазначеної проблемою. Ось декілька простих базових порад для веб-майстрів, щоб виправити біду.

Щоб такого не відбувалося, заходимо в редактор Notepad ++ і вибираємо в меню пункт «Кодування». Саме він допоможе перетворити наявний документ. Питається, який? Найчастіше (якщо сайт на WordPress або Joomla), то «Перетворити в UTF-8 без BOM» (див. Зображення).

Кодування тексту сайтів і не тільки. Розбір польотів і рішення проблем

Зробивши таке перетворення, Ви побачите зміни в рядку статусу програми.

Кодування тексту сайтів і не тільки. Розбір польотів і рішення проблем

Також щоб уникнути кракозябри необхідно примусово прописати інформацію про кодування в шапці сайту. Тим самим Ви вкажіть браузеру на те, що сайт варто зчитувати саме в прописаної кодуванні. Починаючому веб-майстру необхідно розуміти, що чехарда з кодуванням найчастіше виникає через невідповідність налаштувань сервера налаштувань сайту, тобто на сервері в базі даних прописана одна кодування, а сайт віддає сторінки в браузер в досконалої інший.

Для цього необхідно прописати «нахабно» (в шапку сайту, т.е, як частенько, у файл header.php) між тегами lt; headgt; lt; / headgt; наступну сходинку:

lt; meta http-equiv = »Content-Type» content = «text / html; charset = utf-8 «gt;

Прописавши таку строчку, Ви змусите браузер правильно інтерпретувати кодування, і ієрогліфи пропадуть.

Також може знадобитися коригування висновку даних з БД (MySQL). Робиться це так:

mysql_query (‘SET NAMES utf8′);

myqsl_query (‘SET CHARACTER SET utf8′);

mysql_query (‘SET COLLATION_CONNECTION = »utf8_general_ci’» ‘);

Як варіант, можна ще зробити хід конем і прописати в файл .htaccess такі от рядки:

# BEGIN UTF8

AddDefaultCharset utf-8

AddCharset utf-8 *

lt; IfModule mod_charset.cgt;

CharsetSourceEnc utf-8

CharsetDefault utf-8

lt; / IfModulegt;

# END UTF8

Всі вищенаведені методи (або деякі з них), швидше за все, допоможуть Вам і Вашим майбутнім відвідувачам позбутися від ненависних ієрогліфів і проблем з кодуванням. На жаль, більш докладно ми тут інструкцію з веб-майстерням штукам розглядати не будемо, думаю, що вони обов’язково розберуться в подробицях при бажанні (як-не у нас дещо інша тематика сайту).

Ну, от і практична частина статті закінчена, залишилося підвести невеликі підсумки.

Післямова

Сьогодні ми познайомилися з таким поняттям, як кодування тексту. Упевнений, тепер при виникненні каракулей на моніторі комп’ютера Ви не спасуете, а згадайте всі наведені тут методи і вирішите питання на свою користь!

На сим все, дякую за увагу і до нових зустрічей.

P.S. Коментарі, як і завжди, чекають Ваших гарячих дискусій і питань, так що відписує.

PPS: За існування даної статті спасибі члену команди 25 КАДР

Це може бути корисно: Вам можуть стати в нагоді досить таки цікаві безлімітні тарифи від Мобільно24 можуть допомогти Вам заощадити кошти і бути завжди на зв’язку, користуючись послугами найбільших мобільних операторів за найкращими цінами. Відвідайте сайт за посиланням, щоб дізнатися усі подробиці та зробити замовлення