Песня акына. Брожу по Сети. Вижу сайты. Много сайтов. И думаю. Если бы у их создателей была в нужный момент нужная информация, то сайты выглядели бы еще лучше, чем сейчас. Известно, что любую вещь можно сделать просто так, а можно и оптимально. Это касается и сайтов. Сначала я расскажу о такой штуке как...
Оптимизация кода
Многие озабочены оптимизацией 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 при запуске можно скармливать файл конфигурации. Строка запуска при этом выглядит примерно так:
Здесь config.txt — файл с опциями, а file.html — файл, который нужно пропустить через Tidy для обработки. Все команды, допустимые в файле конфигурации, подробно описаны в документации. Вот пример конфига, который конвертирует обычный HTML в XHTML (включена опция output-xhtml), а заодно убивает все пустые параграфы (включена drop-empty-paras):
Параметр 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, открываем нужную картинку, создаем альфа-канал для той области изображения, которую мы хотим компрессировать с иной степенью, нежели остальное. Как сделать альфа-канал? Самый быстрый метод:
- Выделяем область.
- В палитре Channels нажимаем кнопку Save selection as channel (вторая слева, внизу).
- Все, таким образом мы получили альфа-канал из выделенной области.
Теперь идем в 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. Это окно, в которое выводятся все ошибки, возникающие в запускаемых документами Java-скриптах. Сразу выдается номер строки, в которой произошла ошибка, поэтому можно будет легко найти это место, если вам захочется исправить ошибку с помощью д ебаггера.
