Многие озабочены оптимизацией HTML-кода. Для этих целей существует тьма тьмущая разных утилит. Одни из них устраивают настоящий геноцид «опальных» тэгов, другие производят странные действия над пробелами и форматированием, превращая код в малопонятный для человека, однако не браузера набор символов, третьи вообще снабжают документ распаковщиком на JavaScript, а контент документа архивируют. Стоит ли умственных и физических затрат получаемый таким вот образом результат? Нет. Во-первых, нужно писать изначально оптимальный код. Во-вторых, если использовать утилиту оптимизации, то лишь такую, которая не делает код менее читабельным.
Тезис — лучше всего код оптимизируется головой и руками. Примером тому служит разумная заточка страницы под конкретные браузеры с помощью стилей CSS. Сюжет таков. Заготавливаем три .css-файла с описаниями классов стилей. Под Opera, Mozilla и Internet Explorer. Классы одинаковые, а параметры разные, «заточенные». Теперь наша задача — при загрузке страницы определить, какой у пользователя браузер, и сообразно этому использовать нужный .css-файл. Для этого в блок head вставляем следующий скрипт:
Как видим, все очень просто. Делаются три проверки имени браузера (navigator.appName). Если, например, Mozilla, то функцией write записываем в документ (текущую web-страницу) конструкцию, указывающую на использование файла mozilla.css в качестве файла с описанием стилей. Очень логично и надежно. Хотя мне известны случаи, когда люди делали по три разных (!!!) дизайна для каждого браузера и динамически их подгружали. Зачем такая морока? Употребляйте CSS!
Теперь добавим в свой арсенал «чистильщика» под названием HTML-Tidy (http://tidy.sourceforge.net). Это мощнейшая утилита для чистки и конвертирования HTML-кода. Плюсы — ничего не стоит, весит всего 150 кило, работает практически на всех платформах: Linux, Windows, FreeBSD, OS/2, BeOS, MacOS, Atari, Amiga, MSDOS, RISC OS и прочих. Интеграция с Tidy реализована во многих редакторах HTML-кода, таких как HTML-Kit, Tea, 1st Page 2000. Вот краткий перечень того, что умеет Tidy:
конвертировать HTML в XHTML и XML;
чистить HTML-код, сохраненный в продуктах из состава Microsoft Office и MS Word в частности;
убивать «опальные» тэги шрифтов и CENTER;
исправлять неправильные комментарии;
изменять регистр тэгов и параметров;
заменять шестнадцатеричные значения цветов на соответствующие названия (white, red и так далее);
форматировать текст отступами, табуляцией и тому подобными средствами;
делать жесткое форматирование текста по заданной в символах границе;
конвертировать из одной кодировки в другую;
заменять FONT, NOBR и CENTER на автоматически генерируемые для этого CSS'ы;
Сама по себе Tidy — это консольная программа, то бишь управляется из командной строки. Скачать стабильную версию Tidy под Windows можно отсюда: http://tidy.sourceforge.net/other/ tidy04aug00.exe, а на самом сайте возьмите документацию и/или текущую разрабатываемую версию.
Передавать в командной строке все параметры неудобно, поэтому Tidy при запуске можно скармливать файл конфигурации. Строка запуска при этом выглядит примерно так:
tidy -config config.txt file.html
Здесь config.txt — файл с опциями, а file.html — файл, который нужно пропустить через Tidy для обработки. Все команды, допустимые в файле конфигурации, подробно описаны в документации. Вот пример конфига, который конвертирует обычный HTML в XHTML (включена опция output-xhtml), а заодно убивает все пустые параграфы (включена drop-empty-paras):
write-back: yes
drop-empty-paras: yes
char-encoding: raw
output-xhtml: yes
Параметр char-encoding: raw нужен для того, чтобы Tidy не искажал кодировку, заменяя русские буквы на так называемые entities. А write-back нужен, дабы результат записывался в оригинальный файл. То же достигается опцией командной строки -m.
Вот еще некоторые полезные опции Tidy (тоже прописываются в конфиге):
word-2000 yes/no — если включена, то из документа удаляются специфичные тэги, вставленные при сохранении страницы в MS Word;
logical-emphasis on/off — можно включить, чтобы все тэги I и B заменялись на более правильные по спецификации HTML тэги EM и STRONG;
output-xml — если включить, то на выходе вы получите документ в формате XML;
Хотя Tidy умеет проверять документ на корректность, я могу посоветовать другую утилиту проверки, можно сказать, официальную — от консорциума W3C. Сервис называется HTML Validation Service и расположен на http://validator.w3.org. Да, полный онлайн :-). В поле Address вводите ссылку на свой сайт, в Character Encoding выбираете его кодировку (поддерживаются и все русские), а в списке Document Type — тип документа (разные версии HTML и XHTML). Затем нажимаете кнопку Validate this page и ждете результат. Надо сказать, что он появляется через пару секунд. Если хотите, то загрузите для проверки свои файлы с локального диска — это делается на странице http://validator.w3.org/file-upload.html. В случае успешной проверки можете нацепить на сайт вкусный баннер от «валидатора».
И Tidy, и сервис HTML Validation бесплатны и надежны, так что пользуйтесь ими. Это поможет придерживаться стандартов и создавать документы, отображающиеся в любых браузерах. Кстати, этой проблеме посвящено целое движение — кампания Viewable in any browser (http://www.anybrowser.org, русский перевод находится по адресу http://www.geocities.com/SiliconValley/ Way/1592/anykoi.htm). Здесь вы можете найти полезные ссылки с советами о теме сайта, а также богатейший выбор из сотен баннеров и слоганов Best viewed with any browser, причем на разных языках. Что до русского, то имеется баннер от Артемия Лебедева. Разумеется, все фриварно.
Речь зашла о баннерах, что дает нам повод обратиться к другой проблеме сайтостроения. Это
Оптимизация графики
Думаете, для этого нужен целый арсенал утилит редкой породы? Вот и нет. Обойдемся Фотошопом или Гимпом. Кстати, а что подразумевается под оптимизацией графики? Уменьшение «веса» файлов с изображениями при наименьших потерях качества. В куче всякого рода пособий вроде «Твоя первая web-страница» (название случайно и непреднамеренно) вам будут советовать для сжатия фотографий использовать JPEG, а для всего остального, то бишь логотипов, баннеров и т.д. — GIF.
Что до JPEG'а, тут я согласен полностью. Причем, JPEG лучше компрессировать в Photoshop, начиная с его седьмой версии. Почему? А он поддерживает так называемую weighted optimization, то бишь «взвешенную оптимизацию». Сюжет в том, что вы можете разные участки картинки сжимать с разной степенью. Например, имея фотографию человека, лицо «делаем» с большим качеством, остальное — с меньшим, пусть расплывется и затуманится :-). Как этого достичь?
Нам понадобятся Photoshop и ImageReady — они идут в одном комплекте. Запускаем Photoshop, открываем нужную картинку, создаем альфа-канал для той области изображения, которую мы хотим компрессировать с иной степенью, нежели остальное. Как сделать альфа-канал? Самый быстрый метод:
1. Выделяем область.
2. В палитре Channels нажимаем кнопку Save selection as channel (вторая слева, внизу).
3. Все, таким образом мы получили альфа-канал из выделенной области.
Теперь идем в Image Ready. Здесь в палитре Optimize давим до упора на безымянную, смахивающую на белый шарик кнопку рядом с опцией quality. Появляется окно Modify quality settings. В нем есть опция Channels, где в списке отображены доступные альфа-каналы, в том числе и созданный нами на основе выделенной области. Для каждого отдельно взятого канала можно выставить степень компрессии. И потом сохраняем оптимизированный файл.
Теперь о GIF'е. На мой взгляд, польза от него исчерпывается анимированными баннерами. А плакатного типа изображения и логотипы лучше представлять в формате PNG (произносится как «пинг»). Несколько слов о PNG. Зачем он нужен, если существует GIF? Во-первых, PNG обеспечивает степень компрессии на 5-25% плотнее, чем GIF, а при работе с маленькими картинками иногда даже на 40-50%! PNG поддерживает как индексированные (с палитрой) изображения, так и полноцветные 24- и 48-битные. Если в GIF используется обычная прозрачность по одному конкретному цвету, то PNG умеет обращаться с целым альфа-каналом, т.е. степень прозрачности для каждого отдельно взятого пиксела может с помощью альфа-канала варьироваться от 0 до 255. Подробнее о фишках этого формата вы можете прочесть на его главном сайте — http://www.libpng.org/pub/png/. Кстати, библиотека для работы с PNG распространяется в исходниках, потому что PNG — полностью открытый формат, свободный от лицензирования (в отличие от GIF). Сегодня PNG понимают все брэндовые браузеры (Mozilla, IE, Opera, Konqueror), офисные пакеты (KOffice, Microsoft Office, OpenOffice и т.д.), все нормальные графические редакторы и смотрелки. PNG — наиболее часто используемый формат растровой графики в Linux.
PNG не поддерживает анимацию, что дает GIF'у немалую фору. Но! Медленно, однако верно в моду входит формат MNG (смотрите инфу на том же http://www.libpng.org). Последний покамест не так популярен, как PNG. MNG поддерживает JPEG-компрессию, включая ее вариант JNG (это JPEG с прозрачностью). Особо пропагандировать MNG не буду, потому что из популярных браузеров с ним дружат только Mozilla и Konqueror, а для IE нужно ставить какой-то OCX-компонент. Короче говоря, просто возьмите себе на заметку, что MNG — формат будущего, и его распространение напрямую завит от того, как скоро в некоторых браузерах появится его поддержка. Список программ, которые уже сейчас работают с MNG, лежит на официальном сайте.
Полезнейшим средством при разработке сайта может стать браузер Mozilla (http://www.mozilla.org). Дело в том, что Mozilla укомплектована, помимо визуального HTMl-редактора, рядом нужных каждому web-дизайнеру утилит. Dom Inspector отображает структуру документа в виде древообразного списка. В упорядоченном виде вам предстают свойства всех объектов, тэгов и так далее. Вещь незаменимая, если у вас в документе царит хаос и анархия. JavaScripts Debugger — отладчик JavaScript, который позволит вам пошагово выполнять скрипты, наблюдая при этом в отдельных окнах за значениями переменных. Можно устанавливать точки останова (breakpoints), отлавливать возникающие ошибки. Короче, все как в профессиональных отладчиках для языков высокого уровня. И третья утилита — JavaScript Console. Это окно, в которое выводятся все ошибки, возникающие в запускаемых документами жава-скриптах. Сразу выдается номер строки, в которой произошла ошибка, поэтому можно будет легко найти это место, если вам захочется исправить ошибку с помощью дебаггера.
На этом все. Надеюсь, материал оказался вам полезен.