оптимізація коду
В процесі написання коду неможливо виявити всі помилки і виправити їх. Написання коду, особливо в великих обсягах, справа монотонне, в чомусь нудне і часто повторюване, тому око замилюється. Пошук і виправлення помилок є особисто для мене окремої фінішної процедурою. Крім явних помилок часто спливають нелогічні ділянки коду, які теж доводиться переписувати, спрощувати і скасовувати.
Крім виправлення помилок та інших недоліків необхідно потурбуватися оптимізацією контенту для пошукових машин. Пошуковики пред'являють до сайтів певні вимоги, які з кожним роком тільки множаться і якщо ви не вирішили цілеспрямовано закрити сайт від індексації, цих вимог варто дотримуватися.
Помилки в html-коді
Почнемо з помилок. Зовсім нема чого сидіти і вишукувати помилки самому. Для цього консорціумом W3C надані спеціальні сервіси. Код HTML можна перевірити за допомогою html-валідатора W3C , А каскадні таблиці стилів - за допомогою css-валідатора W3C .
У мене на головній сторінці дві помилки (було на момент написання статті) - обидві через тега кнопки google +, якого немає в специфікації.
<G: plusone href = "http://nevor.ru">
Прибираємо ці невідповідності і ніяких претензій валідатор до мого коду не має:
Але google + штука куди більш потрібна, ніж картинка від W3C, тому я залишу ці помилки там, де вони і були. Це не особливо істотно, особливо якщо основний код сайту валідацію проходить.
Працює валідатор W3C тільки зі сторінками, розміщеними в мережі інтернет. Якщо ж ви хочете перевірити локальний сайт на предмет помилок, рекомендую користуватися плагіном HTML Validator для Firefox. Плагін вбудовується в інтерфейс вкладки перегляду вихідного коду оглядача (викликається поєднанням клавіш Ctrl + U) оглядача і базується на тому ж алгоритмі, що і сервіс W3C. Виглядає все це в такий спосіб:
Плагін не тільки показує помилки, але і дає поради з приводу того, як має бути. Я думаю, користувачі Firefox по достоїнству оцінять цей чудовий інструмент розробки.
Кросбраузерність і стандартизований код
Є ще одна значна область, іменована кроссбраузерность. Я вже торкався теми кросбраузерності в цієї статті . Хоч це і не можна назвати помилками, відмінності в зовнішньому вигляді сайту в різних браузерах змушують нерідко правити справний (такий ось каламбур) код на догоду примхам оглядачів. Самим капризним був є і залишиться Internet Explorer. є різні хакі для Internet Explorer , Які дозволяють анулювати ці капризи. Однак, багато хто з цих способів сприймаються валідатором як помилки (по суті ними і є).
Тому я не раджу використовувати хакі. Замість цього можна вміло користуватися умовними коментарями, про які я також згадував у статті, присвяченій кросбраузерності. Приклад нижче демонструє як за допомогою умовного коментаря можна розмістити на сторінці посилання на таблицю стилів виключно для IE. Оскільки вона слід за основною таблицею, її стилі будуть за правилом каськадності перекривати попередні (конфліктні), даючи оглядачеві Internet Explorer інші вказівки.
<Link rel = "stylesheet" href = "style.css" type = "text / css">
Проблема Internet Explorer'а ще й в тому, що від версії до версії помилки в обробці вмісту html-сторінок у цього оглядача різні. Тому деякі програмісти перевіряють свої роботи окремо в кожній версії Explorer'а. Завдання в деяких випадках дійсно необхідна. А для її виконання можна (і потрібно) користуватися програмою IETester , Спеціально для цього створеної.
Також раджу скачати портативні оглядачі з сайту Portableapps.com , Розпакувати їх в окремі папки, а потім встановити і налаштувати плагін Open width (Firefox) для швидкої і простої перевірки сайтів на предмет кросбраузерності. Різні плеєри, галереї та інші навороти теж дуже бажано переглянути у всіх браузерах перед тим як впроваджувати. Благо практично завжди для цього розміщують демо-версії. Це що стосується помилок.
оптимізація коду
Тепер трохи про оптимізацію коду. Полягає вона у всілякому спрощення конструкцій і рішень, щоб якомога більше скоротити обсяг коду без втрати якості і функціонала (оптимізувати). Повторювані ділянки (як варіант) можна об'єднати і представити у вигляді змінної php.
$ Img = "<img src = 'logo.jpg' alt = 'лого'>"; echo "$ img";
Дуже часто програмісти дублюють ділянки коду або команди викликають десять разів
echo "<div class = 'main'> ......"; echo "<span class = 'adress'> ......."; echo "<button id = 'send' type = 'button'> ....."; echo "</ button> </ span> </ div>";
коли можна і потрібно один:
$ Result = "<div class = 'main'> ......"; $ Result. = "<Span class = 'adress'> ......."; $ Result. = "<Button id = 'send' type = 'button'> ....."; $ Result. = "</ Button> </ span> </ div>"; echo $ result;
Приклад примітивний, написаний для наочності, щоб не ускладнювати. Оскільки стаття скоріше про html-верстці і оформленні CSS, ніж про PHP, оскільки серверні операції з php-файлами для підсумкової сторінки не так важливі. А ось погано написаний HTML і CSS - дуже!
Стилі, часто використовуються в коді (та й взагалі все) потрібно виносити в таблицю стилів. Можна частину стилів для однієї якоїсь сторінки винести в шапку (секція <head>). Але взагалі дуже бажано використовувати саме таблиці стилів і не плодити їх без потреби (використовувати одну-дві). Також код css-файлу можна мінімізувати за допомогою онлайн-сервісу або плагіна для оглядача ( Phoneix для Firefox ) Щоб він швидше завантажувався.
Є ще один вид помилок, які не належать до коду, але відносяться до сайту - орфографічні. До них відносяться власне помилки, а також помилки, які робляться через неуважність або при наборі тексту статті з напівзакритими очима о третій годині ночі. Так що перевіряйте набраний текст на сервісі Орфографія .
Якщо матеріали сайту виявилися для вас корисними, можете підтримати подальший розвиток ресурсу, надавши йому (і мені) моральну і матеріальну підтримку .