CFA LogoCFA Logo Computer
Загрузка поиска
Новости Компьютеры Прайс-лист [Новое] Прайс-лист [Б/У] Для ноутбуков Конфигуратор ПК Заказ, Оплата, Доставка Сервис объявления Драйвера Статьи Как нас найти Контакты
Новости
RSS канал новостей
Компания MSI заявляет о выпуске серии настольных систем MSI Trident 3, которые благодаря обновленной ...
Американская компания Hewlett-Packard в прошлом году представила линейку продуктов рассчитанных ...
В рамках выставки CES 2017 компания Dell, известная во всем мире своими отличными моделями мониторов, ...
В Сети уже появлялась информация о том, что компания Gigabyte Technology готовит к выходу новую ...
Тайваньская компания ASUStek познакомила мировую общественность с линейкой новейших материнских ...
Самое интересное
Программаторы 25 SPI FLASH Адаптеры Optibay HDD Caddy Драйвера nVidia GeForce Драйвера AMD Radeon HD Игры на DVD Сравнение видеокарт Сравнение процессоров

АРХИВ СТАТЕЙ ЖУРНАЛА «МОЙ КОМПЬЮТЕР» ЗА 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. Это окно, в которое выводятся все ошибки, возникающие в запускаемых документами жава-скриптах. Сразу выдается номер строки, в которой произошла ошибка, поэтому можно будет легко найти это место, если вам захочется исправить ошибку с помощью дебаггера.

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

Рекомендуем ещё прочитать:






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

Ваше имя:
Ваша почта:

RSS
Комментарий:
Введите символы: *
captcha
Обновить






Рейтинг@Mail.ru
Хостинг на серверах в Украине, США и Германии. © www.sector.biz.ua 2006-2015 design by Vadim Popov