АРХИВ СТАТЕЙ ЖУРНАЛА «МОЙ КОМПЬЮТЕР» ЗА 2003 ГОД

Оптимально о web-дизайне

• Все журналы \ Номер 12/235 `2003 от 24.03.2003 \ Оптимально о web-дизайне

(c)Петр 'Roxton' СЕМИЛЕТОВ

Песня акына. Брожу по Сети. Вижу сайты. Много сайтов. И думаю. Если бы у их создателей была в нужный момент нужная информация, то сайты выглядели бы еще лучше, чем сейчас. Известно, что любую вещь можно сделать просто так, а можно и оптимально. Это касается и сайтов. Сначала я расскажу о такой штуке как...

Оптимизация кода

Многие озабочены оптимизацией 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, открываем нужную картинку, создаем альфа-канал для той области изображения, которую мы хотим компрессировать с иной степенью, нежели остальное. Как сделать альфа-канал? Самый быстрый метод:

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. Это окно, в которое выводятся все ошибки, возникающие в запускаемых документами жава-скриптах. Сразу выдается номер строки, в которой произошла ошибка, поэтому можно будет легко найти это место, если вам захочется исправить ошибку с помощью дебаггера.

На этом все. Надеюсь, материал оказался вам полезен.

Идёт загрузка...

Данную страницу никто не комментировал. Вы можете стать первым.

Ваше имя:
Ваша почта:
Комментарий:
Введите символы или вычислите пример: * Обновить