Статьи

Я в бізнесі і бізнес в мені

Блог для кожного несе свої функції і виконує індивідуальні цілі Блог для кожного несе свої функції і виконує індивідуальні цілі. Для кого-то це просто спосіб самовираження, для кого-то додаткове джерело доходу, для третіх - тусовка з читачами. У першому випадку не так важливо, як добре виглядає блог, наскільки він зручний, виконаний чи без помилок і т.п.

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

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

1. Відображення в різних браузерах

Я буду орієнтуватися на два найбільш поширених зараз броузера InternetExplorer і Mosilla FireFox. перший встановлений на всіх машинах, що працюють під Windows, другий броузер безкоштовний, Ви можете завантажити його і встановити на свій комп'ютер. Я сам досить давно вже користуюся FireFox'ом. Перейшов на нього з подачі мого наставника Дмитра Смакотін , І зараз не хочу міняти цей броузер ні на який інший Я буду орієнтуватися на два найбільш поширених зараз броузера InternetExplorer і Mosilla FireFox

Отже, найпростіше - відкрити Ваш блог одночасно в двох браузерах і порівняти, чи добре, чи правильно відображаються всі елементи. Якщо Ви встановили FireFox, то немає необхідності запускати ще й IE, тому що "Лиса" (так звуть FireFox) має можливість показувати сторінки, використовуючи движок IE (плагін IE Tab ). Т.ч. прямо в одному браузері Ви можете подивитися обидва варіанти відображення.

Результат порівняння Вас може сильно здивувати, особливо, якщо в дизайні використовуються не таблиці, а div'и.

Якщо у Вас встановлені інші браузери (Opera, IE7), перевірте і в них, як відвідувачі бачать Ваш блог.

2. Чистота коду

Це вже більш тонка перевірка, якщо Ви не дуже добре розбираєтеся в CSS і HTML, можна її опустити, але я б радив хоча б перевірити, чи є проблеми в даному напрямку або турбуватися нема про що.

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

Здійснити перевірку нам допоможе ще один плагін для FireFox під назвою Web Developer . Я використовую його близько півроку - дуже зручно і просто. Встановіть плагін, у верхній частині вікна з'явиться додаткова панель інструментів, яких там налічується досить багато. Нам все не потрібні, будемо використовувати тільки кілька.

У правій частині панелі Ви можете побачити три кнопочки-картинки, які відображають статус аналізу поточної сторінки на правильність коду.

У першій перевіряється правильно видаються сервером даних, а натискаючи на неї, Ви зможете подивитися всі характеристики сторінки.

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

Третя картинка схожа на другу, але перевіряє вона не стилі, а розташовані на сторінці java-скрипти.

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

Крім того, якщо Ви володієте більш детальними знаннями по верстці, можете скористатися кількома перевірками з розділу Tools того ж плагіна.
3. Дотримання структури

Цей пункт скоріше спрямований на вироблення та підтримання єдиного стилю. Якщо Ви використовуєте "Дівова" дизайн (від тега div), а саме такий застосовується в більшості шаблонів WordPress, то і не варто порушувати дану структуру, використовуючи для розміщення контенту таблиці. Таблиці повинні застосовуватися для виведення табличних даних, а все форматування в CSS.

З цього приводу до цих пір сперечаються прихильники табличного і Дівова дизайну. Раніше я використовував табличний, тепер намагаюся перейти до більш просунутому варіанту.

Якщо для Вас всі ці слова (верстка, HTML, CSS, теги, div і т.д.) здаються чимось страшним і незрозумілим, або почитайте літературу по верстці, або не заморачивайтесь даною проблемою і віддайте її професіоналам.

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

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

Крім того, можна подивитися, як розташовані у Вас на сторінці шари (DIV'и). Для цього в панелі плагіна вибирайте

Information - Display Div Order

У цього плагіна так багато дуже корисних фішок, як для перевірки сторінок, так і для пошуку невідповідностей. Наприклад, Information - Display Element Information дозволяє подивитися властивості будь-якого б'екта на сторінці.

4. Цілісність

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

Для аналізу картинок використовуйте Images - View Image Information

а для посилань Tools - Validate Links

5. SEO

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

1) Мета-теги

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

Це можна зробити просто відкривши html-код сторінки (Ctrl + U) або скориставшись все тим же плагіном:

Information - View Meta Tag Information

2) Заголовки

Ще один важливий момент, на який дивляться пошуковики - теги заголовків H1, H2, H3 і т.д.

H1 повинен бути на сторінці один, H2 може бути кілька (як підзаголовки) і т.д. Своєрідна ієрархічна структура

Перевірте, чи все в порядку з цими тегами за допомогою плагіна:

Information - View Document Outline

В блогах на движку WordPress така ієрархія зроблена автоматично, і, якщо ви самі нічого не правили, все повинно бути в порядку.

3) Alt і Title

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

Images - Display Alt Attributes і Information - Display Title Attributes

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

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

Я сам уже перевірив свій блог, що знайшов - поправив. Зараз я планую ще й оновити версію, тому що вона досить старенька.

Зауваження, пропозиції та побажання з даного матеріалу вітаються.

Отже, давайте подивимося, що ж можна зробити?
Як перевірити правильність коду, стилів, відображення?
Правильно?

Новости