RTFM! статьи, советы, скрипты
::Заработок с помощью сайта ::JScript по-русски! ::Все русские мануалы::
МЕНЮ
О САЙТЕ
НОВОСТИ
СТАТЬИ
КНИГИ
АППЛЕТЫ
СВЯЗЬ

СЧЕТЧИКИ
Rambler's Top100
Рейтинг@Mail.ru
Яндекс цитирования

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

Автор: Roxton Сайт: http://www.mycomp.com.ua/     Рейтинг: N/A из 7       <<НАЗАД
   
   Оптимизация кода
   
   Многие озабочены оптимизацией HTML-кода. Для этих целей существует тьма тьмущая разных утилит. Одни из них устраивают настоящий геноцид «опальных» тэгов, другие производят странные действия над пробелами и форматированием, превращая код в малопонятный для человека, однако не браузера набор символов, третьи вообще снабжают документ распаковщиком на JavaScript, а контент документа архивируют. Стоит ли умственных и физических затрат получаемый таким вот образом результат? Нет. Во-первых, нужно писать изначально оптимальный код. Во-вторых, если использовать утилиту оптимизации, то лишь такую, которая не делает код менее читабельным.
   
   Тезис — лучше всего код оптимизируется головой и руками. Примером тому служит разумная заточка страницы под конкретные браузеры с помощью стилей CSS. Сюжет таков. Заготавливаем три .css-файла с описаниями классов стилей. Под Opera, Mozilla и Internet Explorer. Классы одинаковые, а параметры разные, «заточенные». Теперь наша задача — при загрузке страницы определить, какой у пользователя браузер, и сообразно этому использовать нужный .css-файл. Для этого в блок head вставляем следующий скрипт:
   
   <script language="javascript">
   
   if (navigator.appName == 'Netscape')
    document.write('<link rel="stylesheet" href="mozilla.css" type="text/css">')
   if (navigator.appName == 'Opera')
    document.write('<link rel="stylesheet" href="opera.css" type="text/css">')
   if (navigator.appName == 'Microsoft Internet Explorer')
    document.write('<link rel="stylesheet" href="ie.css" type="text/css">')
   
   </script>
   
   
   Как видим, все очень просто. Делаются три проверки имени браузера (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. Это окно, в которое выводятся все ошибки, возникающие в запускаемых документами жава-скриптах. Сразу выдается номер строки, в которой произошла ошибка, поэтому можно будет легко найти это место, если вам захочется исправить ошибку с помощью дебаггера.
   
   На этом все. Надеюсь, материал оказался вам полезен.
   
   


<<НАЗАД      ОЦЕНИТЬ СТАТЬЮ    ВЕРСИЯ ДЛЯ ПЕЧАТИ>>
Статья прочитана :  раз.




пейкюлю



 
 
 
 
 
pauk ©® 2000-2015. All rights reserved.
При перепечатке ссылка на сайт и указание обязательны.
Мнение администрации сайта не всегда совпадает с мнением автора.
Орфография и пунктуация - авторские.
Администрация не несет никакой ответственности за использование материалов.
.
Protected by Copyscape DMCA Takedown Notice Infringement Search Tool