![[NeVor.ru]](../images/logo.jpg){kind=logo}
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Отладка кода и оптимизация сайта.редакция 20.02.10 Итак, вот перед вами последняя глава раздела "Сайтостроение". Речь в ней пойдет об отладке кода страниц и оптимизации сайта. Разумеется в процессе написания кода невозможно обнаружить все ошибки и исправить их. Зачастую на поиск ошибок не хватает ресурсов. Либо сроки коротки, либо "творческий фонтан" отнимает все внимание. В результате для поиска ошибок отводится специальный (контрольный) промежуток времени между задачами или ошибки исправляются в самом конце. Кроме исправления ошибок необходимо оптимизировать сайт для поисковых машин. Поисковики предъявляют к сайтам определенные требования и если вы не решили целенаправленно закрыть сайт от индексации, этих требований стоит придерживаться. Начнем с ошибок. В этом разделе с правой стороны страницы можно заметить два значка "W3C css" и "W3C html4.01". Такие значки выдаются скриптом проверки консорциума W3C, если проверка пройдена на отлично. Правда если в "doctype" стоит "strict", значок не выдается. Фиг знает почему. Поэтому я проверил сайт на "strict", потом перевел "doctype" на "transitional" и получил значок. HTML можно проверить здесь, а CSS - тут. По окончании проверки, если нет ошибок, вам будет предоставлена возможность разместить у себя на сайте значок. Что касается этого сайта, CSS полностью проходит проверку на соответствия стандартам W3C CSS2.1.  валидатор W3C Что же касается HTML - выдаются ошибки о несуществующем теге <noindex>, в остальном все в порядке. Тег <noindex> придуман яндексом, чтобы закрывать некоторые участки страницы (ссылки, например) от индексации. Естественно, в консорциуме знать не знают ни о каком <noindex>. Потому и ошибки.  валидатор W3C Для проверки кода на соответствие стандартам нужно лезть в интернет. Это не всегда удобно. Намного удобнее, когда все под рукой. Обратите внимание на предыдущий рисунок: под номером 1 идет фрагмент внешнего вида валидатора W3C. Под номером 2 - фрагмент плагина для обозревателя Firefox. Правда плагин в представленном примере "видит" на один <noindex> меньше, но это не существенно. Плагин называется HTML Validator и встраивается в просмотрщик исходного кода обозревателя. Выглядит он следующим образом.  валидатор Firefox Если вы используете Firefox, можете скачать и установить его в обозреватель. Плагин не только показывает ошибки, но и дает советы по поводу "как должно быть". Я думаю, пользователи Firefox'а по достоинству оценят этот замечательный инструмент разработки. Есть еще одна внушительная область, именуемая кроссбраузерность. Я немного затрагивал данную тему в этой статье. Проблемы кроссбраузерности - это не ошибки, если рассматривать их как ошибки в коде. Однако большие различия внешнего вида в разных обозревателях заставляют править исправный (такой вот каламбур) код в угоду капризам обозревателей. Самым капризным был есть и будет (надеюсь, недолго) Internet Explorer. Есть всяческие хаки, которые позволяют аннулировать эти капризы, однако многие из них воспринимаются валидатором как ошибки. Поэтому я советую их, по возможности, не использовать. Посоветую только условные комментарии. <!--[if IE]> <link rel="stylesheet"... type="text/css"> <![endif]--> Комментарий <!--[if IE]> воспримется всеми обозревателями как обычный и будет пропущен, а IE воспримет его как инструкцию и обработает. Чтобы разделить стили для Internet Explorer и остальных обозревателей, можно в контейнере <HEAD> последней строкой подставить ссылку на таблицу стилей для IE (как в примере выше). Согласно принципу каскадности таблиц стили из последней таблицы перекроют предыдущие. Это что касается ошибок. Теперь немного об оптимизации. Видов оптимизации несколько. Оптимизация призвана качественно повысить работу сайта. Разберу для примера два вида - оптимизация кода и поисковая оптимизация. Оптимизация кода заключается в том, чтобы как можно более сократить объем кода без потери так сказать качества. Повторяющиеся участки можно объединить и представить в виде переменной php. <?php $img="<IMG src='logo.jpg' alt='лого'>";?> <?php echo "$img";?> Стили, встречающиеся в коде более трех раз нужно выносить в таблицы стилей. По окончании разработки из файлов удаляются лишние пробелы и переносы строк. Это можно сделать вручную или с помощью специальных программ. Правда не лишним будет оставить копию на будущее для последующей работы с файлом, иначе не разберетесь. Такая процедура может уменьшить файл процентов на 10. А это значит, что сайт будет быстрее грузиться. Правда, если честно, для меня это кажется малозначительным, поэтому подобным образом я код не оптимизирую, а вот перенос настроек из html в css и php-переменные использую очень часто. И последнее, о чем хотелось бы упомянуть - это поисковая оптимизация. Для поискового робота важна плотность ключевых слов в тексте страницы и то, как они подобраны. С помощью скрипта проверки ключевиков можно оценить то, насколько хорошо подобраны ключевые слова. Если увеличить изображение, по тем отметкам, которые я на него нанес, можно определить, по каким критериям определять успешность применения того или иного ключевого слова. Есть еще один вид ошибок, о которых я забыл сказать - орфографические. К ним относятся и опечатки, которые делаются по невнимательности или при наборе текста статьи с полузакрытыми глазами в три часа ночи. Так что учитесь на чужих ошибках и проверяйте набранный текст. Ну вот и все. На этом данный учебник заканчивается. Надеюсь, что он помог вам в изучении и принес пользу. Все отзывы, комментарии и предложения можете оставлять в гостевой, я обязательно их прочту. Всего доброго и успеха! P.S.: Сегодня (13 марта) полностью убрал тег <noindex></noindex> с сайта. Остался только один контейнер на скрипте LiveInternet'а. Почему - читайте тут или вот тут. Теперь с валидацией html-кода почти все в порядке (почти). Ошибки, конечно, есть (из-за невнимательности), но большая их часть - это контейнеры "noindex", закрывающие от индексации разные штуки, типа скрипта LiveInternet. Ниже вы можете наблюдать ссылку на статью по установке CMS. Эта статья продолжает раздел сайтостроения, но не является продолжением учебника, так как работа с контент-менеджерами - это немного другая история, выходящая за рамки изучения непосредственно HTML. |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![[наверх]](../images/row.gif)
