Аппаратная конфигурация компьютера

То, что описано ниже, предполагает, что Вы хотите сделать красивый и стильный сайт полностью своими руками, т.е. сами рисуете все графические элементы, сами пишете странички, сами сканируете и доводите фотографии...

Итак, какова же аппаратная оснащенность web-дизайнера? Для начала нужно сразу сказать, что Вам потребуется не самый слабый компьютер. Он должен поддерживать разрешение от 800x600 точек при глубине цвета TrueColor, иметь как минимум 32-64M памяти, быть оснащенным CD-ROMом, очень желательно, чтобы были также сканер и звуковая карта. А теперь по порядку: зачем все это нужно.

Хорошая видеокарта

с разрешением от 800x600 и глубиной цвета True Color (это карты с объемом памяти больше или равным 2M), хорошо чтобы и с акселератором - эти требования основаны на том факте, что большинство людей имеют 14' и 15'- дюймовые мониторы и, как правило, на них оптимальным разрешением является именно 800x600. Какое отношение это имеет к WEB-мастерингу? Самое непосредственное, так как в 99% случаях WEB-странички смотрят в окне, раскрытом на весь экран. И в трудных случаях верстки Вам нужно будет представить, как это будет выглядеть в таком режиме. Цветовая глубина True Color нужна для обработки фотографий без искажений, так как не очень легко проводить коррекцию фотографий, если Ваш монитор поддерживает разрешение в 256 цветов. Графический ускоритель нужен для ускорения прорисовки Вашего экрана - при работе с изображениями (особенно в векторной графике) перерисовка занимает значительную часть ресурсов компьютера. И, в конечном итоге, время, сэкономленное на ожидании прорисовки, Вы сможете использовать более продуктивным способом.

Объем памяти => 32M

очень желателен, так как при изготовлении WEB-страничек Вы будете держать открытыми, в среднем, около 7-8 программ и из них пару монстров типа CorelDraw 7.0-8.0 или PhotoShop 4.0-5.0. Дело в том, что любая многозадачная операционная система в случае нехватки ей оперативной памяти будет использовать так называемую виртуальную, которая, в конечном счете, - просто файл на диске. Система будет скидывать на диск сегменты памяти программы, которая не использовалась дольше других, с целью предоставления памяти текущей задаче. А в случае обратного переключения на нужную задачу - восстановление с диска сегментов памяти. Скорости доступа к физической и виртуальной памяти отличаются на три порядка, поэтому для продуктивной работы желательно иметь памяти побольше. Отсюда, в принципе, идет и следствие - процессор помощнее.

CD-ROM

для работы Вам понадобится использовать клипарты и профессиональные фотографии, а они, в основном, распространяются на компакт-дисках. Кроме этого, он пригодится и в том случае, если Вы захотите использовать на своих страничках звук.

Звуковая карта

мир не стоит на месте, и уже появились технологии вещания через web в прямом эфире. Последние версии броузеров позволяют встраивать на странички фоновый звук и т.д. Так что если Вы всерьез решите использовать эти технологии, то Вам без звуковой карты не обойтись.

Сканер

желательно иметь планшетный, с достаточной разрешающей способностью и цветовой глубиной не менее 24bpp. В основном, материалы, которые Вы желаете поместить на WEB, будут находиться в состоянии, далеком от электронного. Как правило, все фотографии приходится сканировать - без этого, абсолютно точно, не обойтись. Много текстовой информации приходит в виде напечатанных документов, электронные версии которых давно потерялись или их вовсе не было. В этом случае большую помощь окажут программы по распознаванию текста, а им тоже нужен сканер.

Так что, как видите, компьютер по мощности нужен не ниже тех, которые применяют в полиграфии. Вышеперечисленные параметры обеспечат Вам комфортную работу, но если Ваш компьютер не оснащен всем перечисленным - не беда. Изготовить профессиональную WEB-страничку можно и на более слабом компьютере, просто это займет гораздо больше времени. Если есть желание, то Вы сделаете Вашу страничку самой лучшей в мире. :)

Назад | Содержание | Вперед

www.citforum.ru


Броузеры, которые мы выбираем

Теперь давайте поговорим о броузерах. А что о них говорить, скажете Вы, и так все ясно - это программа, при помощи которой мы смотрим Web-странички. Ну что же, это правильно, основное их предназначение заключается в этом - просмотре Web-страничек. Но почему же в мире тогда так много броузеров? И почему они показывают странички по-разному?

Давайте вспомним. Что лежит в основе Web-страничек? Верно, язык HTML, и определятся он как текст в формате ASCII со вставкой специальных разметочных кодов (или тэгов). И когда броузер отображает страничку, то он находит эти коды и выполняет соответствующие им действия (например, встречая тэг <b> начинает вывод последующего текста полужирным шрифтом, а встречая </b> - прекращает это делать). Полный набор таких тэгов называется спецификацией и поддерживается WWW-консорциумом, в который входят все основные компании, разрабатывающие программное обеспечение для Internet (в том числе, и Microsoft с Netscape). В идеале, все броузеры должны удовлетворять данным спецификациям, но, к сожалению, реальная жизнь и конкуренция между ведущими производителями броузеров вносят свои коррективы.

Напомню, что первоначально HTML позиционировался как язык логической разметки текста, независимый от устройства вывода. То есть тэги воспринимались как указание к выделению части текста некоторым образом. Отсюда в языке имеется множество т.н. логических тэгов типа <strong>, <em>, : , к сожалению, редко применяющихся. Фраза "независимый от устройства вывода" обозначает, что результат интерпретации HTML-кода может быть выведен не только на экран, но и, к примеру, на звуковую карту (когда компьютер сам будет читать Вам содержимое HTML-странички) или на специальное устройство, воспроизводящее содержимое странички кодом Брайля. Но получилось так, что язык HTML, в конце концов, превратился в язык описания страниц на экране компьютера.

В настоящий момент имеются два броузера, особенности которых должен учитывать web-дизайнер при изготовлении страничек. Это "Netscape Navigator" и "Microsoft Internet Explorer" (а вдруг кто не знает :) На самом деле броузеров гораздо больше, но они все вместе занимают всего около 1% рынка и, как правило, стремятся к совместимости с одним из двух лидеров. Между собой лидирующие броузеры делят рынок в соотношении примерно 75/25 (на данный момент лидирует Internet Explorer). Так что, в дальнейшем будут рассматриваться только эти программы.

Первое правило профессионального web-дизайна

Для чего же мы должны учитывать то, как смотрятся наши странички в обоих броузерах, если имеется стандарт языка HTML, и все они обязаны правильно просматривать код? А в том-то и дело, что интерпретируют они код по-разному (иногда очень по-разному), причем не только версии разных броузеров, но и разные версии одного и того же броузера. Причиной этого явилась конкуренция компаний, когда они вводили новые тэги для повышения конкурентоспособности своих продуктов. И как следствие любой закрытой программы, они по разному понимают значение тех или иных тэгов.

Отсюда, первое правило - профессиональный web-дизайнер просто обязан знать, как просматриваются его странички во всех популярных броузерах и их различных версиях.

Второе правило профессионального web-дизайна

Кроме этого, приходится также учитывать тот факт, что пользователи имеют компьютеры с различной аппаратной конфигурацией. Я не имею ввиду, что кто-то ходит по Web на 286 машине (а вдруг правда? :), но есть много вполне современных компьютеров, которые обладают низкой разрешающей способностью. За примерами далеко ходить не надо - ноутбук. Большое их количество выпускается с черно-белым экраном, а цветные ноутбуки чаще всего ограничены палитрой в 256 цветов. Или, например, палмтопы (становящиеся популярными карманные компьютеры) под управлением Windows CE - они изначально были черно-белыми.

Вот, добрались и до второго правила - профессиональный Web-дизайнер должен просматривать странички при различном количестве цветов. И в случае необходимости делать странички с использованием только безопасной палитры.

Третье правило профессионального web-дизайна

Все странички принадлежат одной большой объединенной сети (WWW называется :), и в этой сети находятся совершенно разные компьютеры: IBM PC-совместимые, Apple Macintosh, различные версии UNIX, Amiga, : Да и все что угодно. И все эти платформы, так скажем, немного отличаются при выводе графики на экран. Вряд ли шрифт в Linux будет точно таким же, как в Windows, да и палитра цветов по умолчанию может отличаться, и алгоритм дизеринга при выводе на экран, и : В общем, если сайт важный и представляет интерес для широкого круга пользователей, то обязательно протестируйте сайт на разных платформах и под разными операционными системами. Это было третье правило профессионального Web-дизайнера :)

И не забывайте про текстовые броузеры, самым известным представителем которых является Lynx. Сайт может быть сколь угодно красив, но что от этого толку, если его не увидят! Поэтому всегда думайте о том, как сайт будет выглядеть в текстовом варианте. Навигация должна оставаться простой и понятной. И достигается это простыми способами: если у вас меню в виде картинки, то не поленитесь снабдить все картинки подписями, а если не получается, то продублируйте меню текстовыми ссылками внизу страницы. Владельцы текстовых броузеров будут счастливы :) И заметьте, что ни один из текстовых броузеров не отображает таблицы, а текст внутри ячеек выводит сплошным потоком (слева направо и сверху вниз). То же самое с фреймами.

В общем, не все ладно в мире броузеров. Придут времена и все они будут показывать странички так, как описано в спецификации, но сейчас : Сейчас нам приходится учитывать все нюансы и особенности броузеров при изготовлении Web-страниц.


Зачем нам нужен SSI?

А! Так Вы даже и не знаете, что это такое? И, тем более, не понимаете, зачем он Вам нужен? Что же, значит, Вы пришли, куда надо. Сегодня здесь всем объясняют - зачем им нужен SSI :-)

Как все нормальные люди, вначале расшифруем аббревиатуру SSI - Server Side Includes или, по-русски, - включения на стороне сервера. Понятно? Нет? Ну, тогда расскажу поподробнее:

SSI - это директивы, вставляемые прямо в HTML-код и служащие для передачи указаний Wев-серверу. Встречая такие директивы, которые, кстати, называются SSI-вставками, Web-сервер интерпретирует их и выполняет соответствующие действия. Какие, спросите Вы? А вот, например: вставка HTML-фрагмента из другого файла, динамическое формирование страничек в зависимости от некоторых переменных (например, типа броузера) и другие не менее приятные вещи.

Преимущества SSI проявляются, когда нам нужно поддерживать достаточно большой по объему сайт, имеющий определенную структуру и повторяющиеся элементы кода на всех страничках. Вообще, при применении серверных включений сайт удобно рассматривать как состоящий из отдельных блоков, каждый из которых отвечает за свою часть странички. Эти блоки практически неизменны и повторяются от страницы к странице. В эти блоки можно вынести такие элементы странички как: главное меню, рекламные вставки, повторяющиеся элементы оформления страничек и т.д. Физически эти блоки представляют собой просто HTML-файлы, содержащие часть кода, нужную для выполнения их задачи.

Для того, чтобы сервер знал, что страничка не обычная, а содержит SSI-директивы, она имеет специальное расширение: *.shtml или *.shtm, наличие которого и заставляет web-сервер предварительно обрабатывать странички. Вообще-то, расширение может быть любое - в зависимости от конфигурации web-сервера, но в основном применяется именно *.shtml.

Полная страничка формируется web-сервером на лету, собирая код странички из таких вот блоков. Для того, чтобы указать серверу, какой блок нужно вставить и в каком месте странички, используется специальная форма записи в виде комментария. Вот такая:

<!--#command param="value" -->
где # - признак начала SSI-вставки;
command - SSI-команда;
param - параметры SSI-команды.

SSI-команд насчитывается около десятка, но я расскажу только о самых употребимых. Самая популярная команда - это команда включения содержимого одного файла в другой:

<!--#include virtual="/path/file.ssi" -->
где include - команда вставки;
virtual - параметр, определяющий, как трактовать путь - как абсолютный (file) или как относительный (virtual);
"/path/file.ssi" - путь к включаемому файлу.

Результатом ее выполнения будет вставка содержимого файла file.ssi в месте появления данной директивы. При просмотре сформированного исходника HTML-файла мы не увидим никаких признаков SSI, т.к. данный механизм действует абсолютно прозрачно для броузеров, они получают исключительно корректный HTML-код.

Следующая команда - это команда установки значения переменной:

<!--#set var="pic" value="picture.gif" -->
где var - команда установки значения переменной;
pic - имя переменной;
picture.gif - значение переменной.

В данном случае мы определили переменную с именем pic и присвоили ей строковое значение "picture.gif". Значение переменной pic теперь доступно внутри SSI-вставки, и мы можем его использовать по нашему усмотрению. Например, используя одну и ту же SSI-вставку, но с разными значениями определенной в ней переменной, мы получим различные результаты. Перед тем, как показать реальный пример использования переменных в SSI-включениях, я расскажу о некоторых командах, применяемых при работе с переменными. Во-первых, это команда печати значения переменной:

<!--#echo var="pic" -->

Ее выполнение приведет к тому, что в месте появления команды напечатается значение переменной pic, т.е. "picture.gif".

Переменная может участвовать в выражениях, в этом случае перед ней ставится знак '$', показывающий, что это именно переменная, а не просто текст. Вот пример:

<!--#set var="A" value="123" -->
<!--#set var="B" value="$A456" -->

После такого присвоения переменная B будет содержать строку "123456". Если же в текст понадобится просто вставить знак '$' или какой-нибудь из других специальных знаков, то его нужно предварить слешем, вот так: '\$'. В некоторых случаях для избежания двусмысленности значение переменной может быть заключено в фигурные скобки: "${A}".

Более сложное применение переменных возможно с использованием условных операторов, имеющих следующую форму написания:

<!--#if expr="condition" -->
<!--#elif expr="condition" -->
<!--#else -->
<!--#endif -->
где condition - условие для сравнения.

В зависимости от результатов проверки мы можем подставить тот или иной фрагмент кода. Допустим, мы можем проанализировать тип броузера пользователя и в зависимости от этого выдать либо код для Netscape Navigator-а, либо Internet Explorer-а. Это может оказаться полезным в некоторых случаях, когда невозможно сделать страничку, которая корректно отображалась бы в обоих броузерах. Вот пример использования условного оператора:

<!--#set var="Monday" -->
<!--#if expr="$Monday " -->
<p>Сегодня понедельник.</p>
<!--#else -->
<p>Что угодно, но не понедельник.</p>
<!--#endif -->

В данном случае условием проверки является существование переменной $Monday и, в зависимости от этого, подстановка того или иного HTML-кода.

Теперь давайте рассмотрим реальный пример применения SSI для формирования сложного документа из нескольких SSI-вставок. Вначале напишем текст основного HTML-документа, полагая, что SSI-вставки находятся в каталоге /ssi:

index.shtml

<!--#set var="title" value="Что такое SSI?" -->
<!--#set var="keywords" value="SSI, SHTML, CGI, Apache" -->
<!--#set var="description" value="Пример использования SSI." -->
<!--#include virtual="ssi/_header.shtml" -->
Здесь находится текст нашей странички.
<!--#include virtual="ssi/_footer.shtml" -->

Теперь напишем код для этих SSI-вставок:

_header.shtml

<html>
<head>
<title><!--#echo var="title" --></title>
<meta name="keywords" content="<!--#echo var="keywords" -->">
<meta name="description" content="<!--#echo var="description" -->">
</head>
<body>

_footer.shtml

</body>
</html>

Как видите, основной документ предельно упрощен и состоит из директив, устанавливающих значения переменных title, keywords и description, которые и будут подставлены в код странички при обработке SSI-вставок, определяющих код для верхней и нижней частей странички. Реальный код SSI-вставок обычно гораздо сложнее и может включать в себя большее количество определяемых переменных и сложных условий, формирующих окончательный вид странички.

Первое преимущество SSI с точки зрения дизайнера заключается в том, что при таком подходе web-мастеру, занимающимуся поддержкой сайта, можно не бояться случайно испортить дизайн. Элементы сложной верстки скрыты за счет использования SSI, и поддержка содержимого страничек становится гораздо более легким и приятным делом.

Второе, не менее важное преимущество, - это возможность мгновенной замены дизайна сайта, не требующая переделывания страничек с информационным содержанием сайта. Для смены дизайна достаточно переписать SSI-вставки, формирующие внешний вид сайта. В нашем случае это файлы _header.shtml и _footer.shtml.

Вот, вкратце то, что можно рассказать о SSI. Если Вас это заинтересовало, то возможно Вам будет интересно прочитать статью на сайте web-клуба, где об этом написано более подробно и приведен полный список SSI-директив с примерами.


Интерактивность! Что? И как?

Первоначально была сеть, потом появилась электронная почта, и люди стали переписываться. Им захотелось рассказать о себе, поделиться информацией - появилась всемирная паутина (WWW). Но статические странички - это всего навсего статические странички... и тогда появилась интерактивность!

Сначала определимся с терминологией. Под интерактивными страничками я понимаю такие, в которых реализован интерфейс с какой-либо программой, выполняемой на стороне сервера. Форма на web-страничке принимает от пользователя некие данные, и броузер передает их web-серверу, который и запускает нужную программу. Программа после того, как отработала запрос, возвращает web-серверу результат, а уж он формирует на лету HTML-страничку и отсылает ее обратно броузеру.

Итак, что же мы можем сделать, используя интерактивность? Самое известное, что приходит в голову - это счетчики, гостевые книги, формоотправители, он-лайн магазины, интерфейсы к базам данных. Практически, можно сделать все, что угодно. Все зависит только от умения программиста.

Как это осуществляется технически? А вот как - на стороне сервера мы размещаем нужные программы, базы данных,.. и конфигурируем web-сервер таким образом, чтобы он смог передавать запросы пользователей из сети обрабатывающей программе и получать от нее результат. Делается это посредством протокола CGI - Common Gateway Interface (что по-русски звучит как "общий шлюзовый интерфейс"). CGI - это набор правил, по которым сервер передает запрос программе. Любая программа, написанная таким образом, чтобы удовлетворять этим требованиям, сможет использоваться на Web-сервере.

Язык программирования, на котором пишется программа, большого значения не имеет, и может быть использован любой. Наиболее популярным языком программирования, используемым для написания несложных программ, следует признать PERL - язык, первоначально разработанный для написания отчетов и идеально подошедший для несложных CGI-программ. Текст языка на PERL принято называть скриптом (не путать с JavaScript - программа на PERL выполняется на стороне сервера, в то время как JavaScript - на стороне клиента). Язык является интерпретирующим, то есть анализирующим текст программы в процессе выполнения. Для работы PERL на web-сервере должен быть установлен и правильно сконфигурирован соответствующий интерпретатор.

Таким образом, интерактивные странички можно разделить на две части: форма и программа. В форме нам нужно правильно описать все элементы интерфейса и указать путь к выполняемой программе. Как видите, все не так уж сложно. А что делать, если Вы не программист, а Вам нужна несложная программа? В этом случае можно воспользоваться архивом готовых скриптов, большинство из которых бесплатны. Все типичные задачи давно уже решены и отлажены. Это гостевые книги, счетчики, листы рассылок и т.п. Нужно просто найти нужную и внимательно прочитать описание к ней. После этого остается только правильно разместить элементы в форме и указать специфические параметры для данного скрипта. Более сложные программы уже приходится писать программистам, имеющим достаточный опыт для этого.

Отправка формы по почте

Давайте разберем типичный пример - отправку формы по почте. Для этого мы воспользуемся готовой программой из архива Matt Wright, предназначенной для отсылки содержимого формы по почте - FormMail. Этот скрипт нужно сконфигурировать и разместить на web-сервере в специальном каталоге, где располагаются CGI-программы. Обычно он называется cgi-bin (для уверенности проконсультируйтесь с вашим провайдером - предоставляет ли он услуги по размещению CGI-скриптов, и как называется каталог для размещения скриптов). А на страничке - описать форму. Таким образом, нам нужно подготовить два файла: создать HTML-форму и сконфигурировать Perl-скрипт под наши нужды.

Создание формы

Начнем, пожалуй, с формы. Описание формы будет заключаться между тэгами <form> и </form> и содержать внутри себя элементы формы. Мы сделаем самый минималистический вариант формоотправителя, который будет содержать следующие поля: имя, электронный адрес, текст сообщения. HTML-код нашей странички выглядит следующим образом:

<html>
<head><title>Форма для отправки по почте</title></head>
<body>

<form name="Request" action="/cgi-bin/formmail.pl" method="post">
<input type=hidden name="recipient" value="yourmail@domain.com">
<input type=hidden name="subject" value="Запрос информации">
Ваше Имя: <br>
<input type=text name="Имя"><br>
E-mail: <br>
<input type=text name="E-mail"><br>
Сообщение: <br>
<textarea name="Сообщение"></textarea><br><br>
<input type=submit value="Отослать">
<input type=reset value="Очистить">
</form>

</body>
</html>

Немного разъяснений по вышеприведенному коду. Обратите внимание на параметр action в тэге <form> - он определяет адрес нашего скрипта (.pl - стандартное расширение для программ, написанных на PERL). Первые элементы в форме - это специальные скрытые поля для передачи информации скрипту: поле recipient определяет e-mail, на который мы хотим отослать содержимое формы, а поле subject - строку, которая будет появляться как "тема письма". Далее идет уже описание непосредственно полей формы. Их может быть сколько угодно, но каждое из них должно иметь имя (параметр name в тэге <input>), т.к. результатом работы скрипта будет письмо, в котором каждая строка состоит из пары значений: имени поля и его содержимого. И заканчивается форма двумя кнопками, служащими для отправки сообщения (submit) и очистки формы до начального состояния (reset).

Конфигурирование скрипта

Теперь сконфигурируем скрипт. Опуская несущественные для нас детали, листинг нашего скрипта можно представить так:

#!/usr/bin/perl

$mailprog = '/usr/lib/sendmail';
@referers = ('www.cherry-design.spb.ru','195.5.155.48');

# Здесь располагается код скрипта.

В данном случае вся конфигурация сведется к установке IP-адреса компьютера, на котором расположен web-сервер, и конфигурирования путей для программ perl и sendmail. Первая - непосредственно интерпретатор языка PERL, а вторая - это программа, к которой обращается скрипт, и которая осуществляет посылку сообщения по почте. Адрес расположения PERL-интерпретатора всегда задается первой строкой в скрипте, и в данном случае программа доступна по адресу /usr/bin/perl. Расположение программы sendmail задается второй строчкой в нашем листинге. И, наконец, третья строчка задает имя и IP-адрес web-сервера (для примера я указал параметры моего сайта).

Вот, практически, и все. Наш скрипт осталось только переписать в каталог. Но тут есть одна тонкость - дело в том, что скрипт будет располагаться на UNIX-машине, а текст в UNIX-формате имеет одно отличие от Windows: конец строки в UNIX обозначается символом возврата каретки <CR>, а в Windows - парой символов: перевод строки <LF> и возврат каретки <CR>. Если переписать такой файл по FTP в режиме BINARY, то скрипт работать не будет!!! При копировании скрипта на web-сервер нужно установить режим ASCII, который автоматически преобразует концы строк к UNIX-формату.

У скрипта FormMail есть много дополнительных и очень удобных возможностей. Например - переадресация странички с подтверждением отправки сообщения или проверка правильности заполнения полей. Если Вас это заинтересует, то сходите на страничку Мэтта, и там Вы найдете не только описание FormMail, но и много других полезных скриптов. В этой статье я хотел просто показать, как применять готовые скрипты для нужд своего сайта, и поэтому опустил все несущественные детали и остановился на рассмотрении практических вопросов.


Информация - вот основа Internet!

Информация - вот, что в первую очередь привлекает посетителя на Ваш сайт. Все остальное лишь помогает сориентироваться в ней и облегчает доступ. И с этой точки зрения, самый первый вопрос, который можно предъявить WEB-сайту - для чего ты, собственно, нужен? Что ты можешь сказать мне такого, чего я не знаю? Чем ты лучше других?

На какой круг людей рассчитан WEB-сайт?

Спросите себя об этом. На тинэйджеров или на профессоров-медиков? - от этого вопроса напрямую зависит и дизайн сайта, и та информация, которую следует размещать на сайте. Исходя из контингента предполагаемых посетителей попытайтесь встать на их точку зрения и расставьте пункты меню Вашего сайта в порядке привлекательности для посетителя (а не для web-мастера) - это может оказаться достаточно трудно, но можно уже после запуска сайта проверить статистику посещаемости разделов и, исходя из этого, скорректировать меню. В качестве примера можно привести, допустим, некий предполагаемый web-сайт некой предполагаемой фирмы ;-), специализирующейся на предоставлении финансовой информации. А теперь вопрос: какая самая интересная информация для пользователя? История фирмы? НЕТ. Штат сотрудников? НЕТ. Услуги? НЕ совсем. Курс доллара? ДА-ДА-ДА. И эта информация должна быть доступна на первой странице, а не в каких-то там меню, закопанных в дебрях сайта.

Что собой представляет информация?

On-line публикацию статьи или статистические данные, полемику по горячему вопросу или интервью со звездой?

Давайте начнем с публикации в Internet книги. Книги рассчитаны на чтение от начала до конца (исключая справочники и словари) - мы к этому привыкли, поэтому и в Internet мы должны поместить ее таким образом, чтобы ее можно было читать от начала и до конца. Гипертекст позволяет организовать оглавление в виде удобных гиперссылок и перейти сразу к нужному разделу; но если человек читает все подряд, то в конце каждого раздела мы должны сделать ссылку на следующий, не заставляя человека пробираться назад в поисках оглавления. Кроме этого, в отличие от обычной книги, в которой то и дело появляются сноски, в HTML-документе такую сноску можно и должно оформить как переход к глоссарию или отдельной страничке, на которой эта сноска объясняется.

В случае опубликования какой-нибудь научной статьи или горячего материала появляются, как правило, отклики и рецензии. Их нужно оформлять как отдельные документы, но в конце рецензируемого документа нужно сделать ссылку на рецензию - это позволит читателю ознакомиться со всеми "за и против".

Теперь рассмотрим случай, когда у нас статистические данные. Как представляется статистика? Правильно - в виде таблиц. А теперь вопрос: Вы любите длиннющие таблицы, в которых можно найти все что угодно через каких-нибудь полчаса после начала исследования? Я - нет. Поэтому надо позаботиться о пользователе и дать ему ту информацию, которая ему интересна (и не обязательно публиковать в Internet всю базу данных). В случае, если информация не помещается в окне броузера и требует скроллирования по горизонтали (О ужас! Они сами смотрят на свои таблицы?), разделите одну большую таблицу на несколько маленьких и легко понятных, а затем свяжите их перекрестными ссылками (на то он и гипертекст :). А если у Вас все же получается длинная таблица, то визуально отделяйте, допустим, каждую пятую строку при помощи изменения цвета ячейки (все современные броузеры это поддерживают).

И в случае, если Ваша статья или таблица занимает больше пяти экранов, разместите в начале краткий список подразделов и от них локальные ссылки в пределах статьи.


Как создать привлекательный web-сайт?

Итак, Вы желаете сделать полезный, красивый и удобный сайт. Что же для этого нужно? Какие факторы влияют на популярность web-сайта? С чего лучше всего начать создание собственного сайта? И какие ошибки могут подстерегать на этом пути?

Я попробовал выделить основные причины, которые, по моему личному мнению, влияют на популярность сайта:

  • Содержание или контент - является одной из самых важных составляющих. Если на сайте нет полезной информации, способной заинтересовать определенный круг людей, то можно ставить вопрос о необходимости существования сайта как такового. Вспомните, как много полезных страничек Вы видели в последнее время по сравнению с общим количеством посещенных Вами мест?
  • Дизайн - вторая по важности составляющая хорошего сайта. От дизайна зависит, насколько привлекательны будут странички, т.е. в конечном счете, сколько людей дополнительно захотят прийти и посмотреть на Ваш сайт. Ведь если Вам очень понравился дизайн сайта, то Вы, наверняка, расскажете о нем своим друзьям. Не забывайте, что встречают-то по одежке.

    Для того, чтобы сделать хороший сайт, не обязательно даже использовать графику. Есть полезные сайты с минимумом графики (или даже без оной) и масса бесполезных, забитых мегабайтными картинками. Для web-сайта, как впрочем, и для других дизайнерских проектов, очень важным является стиль сайта, придающий ему собственное лицо и узнаваемость. В последующих статьях я опишу основы и принципы создания стильных web-страничек.

  • Скорость загрузки Ваших страничек - НИ ОДИН НОРМАЛЬНЫЙ ЧЕЛОВЕК НЕ БУДЕТ ЖДАТЬ ЗАГРУЗКИ ВАШИХ СТРАНИЧЕК В ТЕЧЕНИЕ ЧАСА. Отсюда следует вывод - странички нужно оптимизировать для получения наименьшего их размера (разумеется, в пределах разумного). Давайте посчитаем максимально допустимый объем средней WEB-странички.

    Принимая к рассмотрению тот факт, что подавляющее число людей (и небольших организаций) имеют доступ к Internet через коммутируемую связь, т.е. по телефону (и, к тому же, немаловажный факт - за повременную оплату) и средняя скорость доступа по модему в России составляет 14400 бит/c, можно посчитать время, затрачиваемое на перекачку одного килобайта (это без учета того факта, что большинство людей держат открытыми одновременно 2-3 или более копий броузера - в этом случае просто разделите среднюю скорость доступа на количество открытых броузеров).

    Следовательно, средняя скорость перекачки равна 14400 бит/с / 8 =1800 байт/с - это в идеальном случае, на самом деле немного меньше из-за повторных передач ошибочно принятых блоков. Поэтому примем среднюю скорость равную 1200-1500 байт/с. Только не путайте данную скорость, которая является скоростью до провайдера, со скоростью перекачивания Вашей странички, она может оказаться намного меньше, так как информация, достигшая Вашего компьютера, проходит через несколько компьютеров (как правило, 10-15), и скорость определяется самым узким звеном в цепи.

    Допустим, днем загруженность маршрутизаторов (компьютеров, передающих информацию из одной сети в другую) больше, чем ночью. Кроме этого, если Ваш сервер находится на компьютере, который соединен с провайдером по коммутируемой (или выделенной) линии на скорости 14400 бит/с, то человек, сидящей по другую сторону Internet, ни за что не добьется скорости выше этой (я исключаю случаи с Proxy-сервером, т.к. на них, в основном, хранится часто запрашиваемая информация - например, странички поисковых систем). Я принимаю допустимым время загрузки одной странички не более 40 секунд (эта величина взялась из личного опыта :), отсюда - 40*1200= 48Кб - это и будет тот максимальный объем, который может иметь страничка вместе со всей графикой, находящейся на ней. Если Вам требуется разместить информацию большего размера, то предупредите об этом пользователя или распределите информацию по нескольким страничкам.

  • Раскрутка web-сайта - включает в себя не только регистрацию Вашего сервера во всех возможных Поисковых системах мира, но и такие средства, как размещение информации в средствах массовой информации (URL - в газете), а также упоминание о Вашем сайте на визитках, рекламках, в газетных и журнальных статьях и т.д. Кроме этого, на web-сайте обязательно должен быть упомянут E-mail для связи с Вами или, в случае его отсутствия, хотя бы номер телефона.
  • Ясная и логическая структура размещения информации на Вашем сервере - ничто так не утомляет при поиске нужной информации, как плохо структурированные сервера.
  • Отсутствие орфографических и грамматических ошибок - этот пункт я включаю сюда ввиду громадного количества ошибок на свежепоявляющихся web-сайтах. Ведь это просто - набивайте текст в редакторе с проверкой орфографии и перечитывайте то, что Вы написали перед выставлением Вашего сервера на всемирное обозрение.

Вот, пожалуй, и все основные принципы, соблюдение которых гарантирует успех Вашему WEB-сайту, а через него - и благополучие, и расширение известности Вас, Вашей фирмы, клуба, движения.

В качестве упражнения попробуйте пройтись в WEB и посчитать время на загрузку различных страничек, а также обоснованность их загрузки (исходя из содержания). Посмотрите, насколько понятна структура сервера и удобство пользования им.

Содержание | Вперед


Оптимизация изображений в формате GIF

Формат GIF сильно отличается от JPG и использует совершенно другие методы оптимизации. Он предназначен для хранения изображений с количеством цветов не более 256, поддерживает палитру и использует сжатие без потерь по методу LZW.

Методы оптимизации можно разделить на следующие типы (исключая оптимизацию анимированных GIFов):

  • уменьшение количества цветов
  • оптимизация палитры изображения
  • стилизация изображения
  • искажение размеров изображения
  • фрагментарная оптимизация
  • оптимизация "прозрачных" изображений
  • использование чересстрочной развертки

Теперь разберемся по порядку с этими методами и приемами оптимизации.

Уменьшение количества цветов

Для большинства изображений, не являющихся фотографиями, количество необходимых для воспроизведения цветов часто меньше 256. Лишние цвета можно убрать из изображения, тем самым уменьшив его размер. Это возможно потому, что GIF поддерживает размер палитры меньше 256 цветов. Теоретически, мы можем задать любое число цветов палитры в диапазоне 2-256, например, 37 цветов или 101. Практически же, количество цветов в изображении выбирается из ряда: 2, 4, 8, 16, 32, 64, 128, 256. Это связано с тем, что для представления цвета используется всегда целое число бит, а приведенный выше ряд является рядом максимального количества цветов при использовании от 1 до 8 бит на пиксель (1bpp-8bpp). В случае, если мы используем, допустим, только 101 цвет в рисунке, для сохранения пикселя все равно будет использовано 7 бит. Поэтому при оптимизации количества цветов нужно ориентироваться на приведенный выше ряд. Это позволит получить более качественную картинку. Сравните два изображения - они не очень-то и отличаются, но левое использует полную палитру в 256 цветов, а правое - палитру, состоящую только из 32 цветов. И, соответственно, различаются размеры файлов (примерно в 2 раза).

www.citforum.ru

Полная палитра (256 цветов) - 7.88KB Оптимизированная палитра (32 цвета) - 3.28KB

Оптимизация палитры изображения

Преобразование полноцветного изображения в индексное (т.е. - с использованием палитры) является важной операцией, и тут нужно сказать несколько слов о том, как это делается современными графическими пакетами.

Палитра конечного изображения может быть либо фиксированной, либо оптимизированной. В первом случае графический редактор просматривает каждую точку изображения и подбирает ей ближайшую по цвету из палитры. Этот способ дает самые худшие результаты с точки зрения верности воспроизведения цветов. Попробуйте, например, преобразовать фотографию красной розы в индексное изображение, используя палитру, содержащую оттенки зеленого ;) Это, конечно, крайний случай, но это даст Вам возможность оценить качество преобразования с использованием фиксированной палитры. Тем не менее, данный способ применяется - в основном для того, чтобы изображения приемлемо выглядели на мониторах с малым количеством цветов (16, 256). Обычно в этом случае пользуются т.н. палитрой Netscape (или безопасной палитрой), состоящей из набора часто используемых цветов и их оттенков. Палитра Netscape гарантирует, что изображения, использующие эту палитру, будут одинаково показаны всеми броузерами. Для иллюстрации - посмотрите на два изображения: левое использует оптимизированную палитру, а правое - фиксированную палитру Netscape.
Оптимизированная палитра (256 цветов) Фиксированная палитра Netscape (256 цветов)

Во втором случае, когда используется оптимизированная палитра, графический редактор вначале анализирует рисунок и составляет список всех используемых в изображении цветов. Далее, на основании частоты появления цветов, составляется палитра, которая называется оптимизированной. После этого, уже обычным способом, просматривается рисунок, и цвет пикселя изменяется на ближайший из палитры. Этот способ дает гораздо лучшие результаты (см. рисунок выше), и именно его следует применять, если у Вас нет иных причин для использования фиксированной палитры.

При оптимизации конкретного изображения задача состоит в том, чтобы выбрать наиболее оптимальное количество цветов в палитре. Тут уместно сказать о способе увеличения количества используемых цветов при их недостатке, т.н. дизеринг (Dithering). Например, у нас есть 16 стандартных чистых цветов, а нам нужен отсутствующий оранжевый цвет. В таком случае, мы можем составить его из красных и желтых точек, разместив их в шахматном порядке. Издалека нашим глазам покажется, что это сплошной оранжевый цвет. Это классический пример дизеринга; его использование при преобразовании изображений может дать очень хорошие результаты. Но с точки зрения оптимизации размеров файла происходит совсем обратное. Дизеринг может увеличить размер файла, причем довольно существенно (он может стать больше, чем до оптимизации :). А все дело в методе хранения изображения форматом GIF. Изображение перед сохранением на диске подвергается сжатию методом LZW, а основная особенность этого метода заключается в том, что сжатию лучше всего поддаются области, заполненные однородным цветом, и хуже всего - области, состоящие из набора разноцветных точек. Дизеринг же как раз и основан на том, что получает недостающие цвета путем "перемешивания" точек разных цветов. Поэтому к оптимизации при помощи дизеринга нужно относиться очень аккуратно и по возможности не использовать. Ниже приведены две картинки: обе используют фиксированную палитру, но к правой применен дизеринг, а к левой - нет. Посмотрите, как изменилось изображение, а заодно обратите внимание на размеры файлов.
Фиксированная палитра Netscape (256 цветов) - 3.58KB Фиксированная палитра Netscape (256 цветов) + дизеринг - 4.77KB

Стилизация изображения

Для уменьшения количества используемых цветов в изображениях, содержащих фотографические сюжеты, возможно применение стилизации фотографии. Для этого можно воспользоваться такими приемами, как тонирование изображения и применение художественных фильтров, имитирующих рисунки. Фотографии, обработанные таким способом, будут сжиматься лучше и требовать палитру, содержащую менее 256 цветов.

Искажение размеров изображения

Следующий метод оптимизации основан на искажении размеров рисунка. Его нельзя применять к обычным рисункам, но он очень хорошо подходит для рисунков, состоящих из элементов типа линий и однородных областей. Допустим, нам понадобился рисунок, представляющий из себя черный квадрат (Малевича ;) размером 100x100 пикселей. Для уменьшения размера файла сделаем т.н. однопиксельный (т.е. размером 1x1 пиксель) GIF черного цвета. Как обычно, вставим его в HTML-файл, но размеры картинки укажем те, что нужны нам (100x100). Броузер сам растянет наш пиксель до нужных размеров, а мы получим большую экономию :). Подобным же образом можно использовать однопиксельные GIFы других цветов, но наибольшую пользу может принести прозрачный однопиксельный GIF. При помощи него удобно задавать пустышки на страницах, абзацные отступы, фиксировать минимальную ширину (высоту) таблицы и делать другие полезные вещи.

Методом искажения очень удобно создавать графические разделительные линии. Достаточно нарисовать ее сечение шириной (высотой) в один пиксель, а в HTML-документе указать нужную ширину линии (или высоту, если линия вертикальная). Линия, расположенная под абзацем, сделана именно таким способом.

Эта линия создана с применением искажения размера (63 байта)

Фрагментарная оптимизация

Фрагментарная оптимизация применяется в случае, если у нас есть некоторое большое изображение, содержащее сильно отличающиеся по количеству цветов области. В этом случае изображение можно разрезать на фрагменты и поместить их в таблицу, тогда в броузере оно будет выглядеть как единое целое. Теперь каждый фрагмент исходного рисунка мы оптимизируем отдельно. Для фрагментов, содержащих мало цветов, вполне может хватить палитры в 8 или 16 цветов, а для богатых цветами фрагментов можно использовать полную палитру в 256 цветов или сохранить в формате JPG. Этот способ позволяет уменьшить объем, занимаемый исходным файлом, примерно раза в 2-3 (в зависимости от конкретного изображения); кроме того, изображение будет загружаться более равномерно, т.к. все фрагменты будут качаться параллельно. Хотя, если количество фрагментов превысит 10, то возможного выигрыша и не получится, т.к. каждый фрагмент должен будет хранить свою копию палитры и служебной информации.

Оптимизация "прозрачных" изображений

Формат GIF позволяет сохранять т.н. "прозрачные" изображения. На самом деле, GIF не поддерживает прозрачность в изображениях (т.н. альфа-канал), он лишь позволяет назначить одному любому цвету в палитре атрибут прозрачности. Когда броузер рисует на экране такой GIF, то, встречая "прозрачный" пиксель, он просто игнорирует его и не печатает на экране. Само по себе это хорошо, но в случае использования метода сглаживания краев изображения (anti-aliasing) и последующего сохранения в формате GIF, возникает проблема появления ореола вокруг прозрачного изображения в случае, если GIF показывается на фоне, отличном от того, на котором происходил anti-aliasing. Это прямое следствие отсутствия поддержки канала прозрачности форматом GIF. Единственным способом уменьшения проявления этого эффекта является назначение прозрачным пиксела по цвету, близкому к фону, на котором будет использоваться GIF, и проведение anti-aliasing'а на этом же фоне. Ниже приведены два изображения: на левом anti-aliasing проведен на белом фоне, и поэтому ореол не заметен, а на правом - на контрастном синем, и ореол хорошо виден.
Anti-Aliasing проведен на белом фоне Anti-Aliasing проведен на синем фоне

Использование чересстрочной развертки

И, наконец, еще об одной особенности формата. Версия GIF89a позволяет сохранять файлы с использованием чересстрочной развертки. При использовании этого способа строчки, составляющие изображение, перемежаются, и при загрузке броузер вначале показывает каждую 8-ую строчку, потом каждую 4-ую, каждую 2-ую, и, наконец, загружается полное изображение. Это немножко похоже на жалюзи :). При этом посетитель вашей странички сможет понять, что же нарисовано на данной картинке, не дожидаясь ее полной загрузки, что очень удобно. Так что, если у Вас нет на то иных причин, записывайте все GIF-файлы с использованием чересстрочной развертки. Приведенные ниже изображения показывают разницу при загрузке нормальных (слева) и чересстрочных (справа) изображений.
Обычная развертка Чересстрочная развертка


Оптимизация изображений в формате JPG

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

Данный формат хранит изображения c цветовой глубиной 24bpp (TrueColor) и использует сжатие с потерей информации. У него не так уж много способов оптимизации, точнее сказать, - один: выбрать оптимальный коэффициент сжатия.

Для осуществления такой оптимизации нужен графический пакет или утилита, которые позволяют нам регулировать степень сжатия изображения. К сожалению, PhotoShop в базовой конфигурации не позволяет нам свободно регулировать степень сжатия (он предлагает несколько фиксированных значений). Правда, для него можно найти модули, специально подключаемые для осуществления данной операции. Для оптимизации графики лучше воспользоваться программами типа PhotoPaint или PaintShopPro. В этих программах возможно регулирование степени сжатия либо заданием процента потерь, либо заданием значения качества от 0 до 255.

Как определить оптимальную степень сжатия?

Для этого нужно сохранить фотографию при нескольких значениях коэффициента сжатия, а затем внимательно рассмотреть ее. Критерием потери качества будут так называемые "дрожащие контуры", наиболее заметные в местах контрастных переходов, и появление пятен в областях с плавными переходами (см. рисунок). Тот коэффициент сжатия, при котором искажения еще не видны, но с увеличением его (коэффициента) на одну ступеньку становятся заметными, и будет оптимальным. Размер файла при таком разрешении будет минимальным и без потери качества.

Если такую операцию проводить с каждой фотографией, то это может занять слишком много времени. Но есть выход - все фотографии можно подразделить на некоторые подтипы (например: черно-белые фотографии, тонированные фотографии, пейзажи и т.д.) и к каждому подтипу подобрать свой оптимальный коэффициент. Впоследствии можно просто применять ранее найденный коэффициент ко всем подобным фотографиям. Ниже представлены две одинаковые фотографии, но только с разной степенью коэффициента сжатия JPG. Слева - фотография, записанная в PhotoShop 5.0 со степенью сжатия 3 (не оптимизированная), а правая оптимизирована при помощи Ulead SmartSaver Pro. Обратите внимание на размеры фотографий: они различаются в три раза (при одинаковом качестве изображения).

www.citforum.ru

Использование прогрессивной развертки

И еще один небольшой метод оптимизации JPG - использование прогрессивной развертки. Это не сказывается на размере фотографии, но заметно при загрузке. В случае записи изображения в стандартном формате вывод на экран осуществляется горизонтальными полосками, и до загрузки всего изображения мы не сможем определить его смысл. Напротив, при записи файла в прогрессивном формате изображение появляется сразу целиком, но в грубой форме, и постепенно улучшается. Это дает посетителям возможность сразу же оценить фотографию и решить, стоит ли ожидать ее докачки, что позволит сэкономить немного времени при просмотре Ваших страничек. Ниже, на рисунках, представлены две фотографии: левая записана со стандартной разверткой, а правая - с прогрессивной. В момент загрузки страничек посмотрите на то, как загружаются два этих изображения, и Вам все станет понятно.

Прогрессивная развертка JPG поддерживается всеми броузерами, но не каждый графический пакет может записывать в этом формате. Поэтому проверьте свои программы на возможность сохранять файлы с прогрессивной разверткой. Последние версии PhotoShop и PaintShopPro умеют это делать.


Программы, используемые в web-мастеринге

Для изготовления профессиональных страничек Вам придется профессионально изучить несколько профессиональных программ :).

Итак, какие же программы Вам понадобятся? Ниже я буду приводить конкретные категории программ с объяснениями - для чего они нужны.

Программа обработки растровой графики

одна из важнейших программ, которую Вам придется освоить. Она Вам поможет при сканировании фотографий и их коррекции. При помощи этой программы вы сможете создавать те невообразимые эффекты, которые Вы видите в Internet, рекламах и т.д. По моему мнению, обязательными являются следующие умения для этого класса программ:

  • Сканирование фотографий;
  • Коррекция отсканированных и готовых фотографий, в том числе - тоновая и цветовая коррекция;
  • Ретушь фотографий;
  • Умение кадрировать;
  • Понимание различий в форматах графических файлов;
  • Грамотное использование фильтров;
  • Работа со слоями.

В качестве конкретных программ можно привести следующие:

  • Adobe PhotoShop 3.0-5.0 - данная программа является лидером в области графических программ такого рода, но она требует и соответствующих ресурсов от Вашего компьютера.
  • Paint Shop Pro 4.0-5.0 - по моему мнению, лучшая shareware-программа, которая, к тому же, поддерживает фильтры от Adobe PhotoShop и очень быстро работает с объемными (>20M) фотографиями. Может импортировать и экспортировать изображения в 40-50 разных форматов.

Некоторые работы Вам придется делать, используя разные редакторы. Идеальных редакторов нет, некоторые лучше делают одно, некоторые - другое.

Программа обработки векторной графики

еще одна из важных для дизайнера программ. Позволяет создавать с нуля или с использованием клипарта различные логотипы, кнопки, эффектные надписи и т.п. вещи. Принципы векторных редакторов сильно отличаются от растровых, поэтому осваивать их придется отдельно; зато, освоив их, Вы заодно сможете изготавливать для себя фирменные визитки, бланки, брошюры (как побочный эффект :). Вам потребуются следующие навыки:

  • Умение работать с графическими объектами (группировка, наложение, получение нестандартных объектов);
  • Умение работать с кривыми и узлами кривых;
  • Умение работать с направляющими и сеткой;
  • Умение разбираться в цветовых моделях (RGB, CMYK, HSB);
  • Работа с текстом - умение разместить его на любой кривой;
  • Грамотное использование градиентов и заливок (включая фрактальные);
  • Грамотное использование эффектов.

Типичными представителями данного класса являются Corel DRAW 7.0-8.0 и Adobe Illustrator - они обе являются лидерами в своих областях и, соответственно, располагают самыми последними достижениями в области векторной графики. В противовес этим тяжеловесам можно порекомендовать симпатичную и быструю программку Corel Xara!; пусть Вас не вводит в заблуждение слово Corel - данная программа разработана фирмой XARA, которая была куплена корпорацией, как один из конкурентов. Сейчас доступна уже ее вторая версия. Данная программа, в отличие от двух предыдущих, очень быстрая и маленькая, но некоторые эффекты и команды, доступные в других программах, в ней сделать или трудно, или вообще невозможно.

Программы просмотра web-страничек

или броузеры - в настоящее время имеется только два броузера, заслуживающих упоминания - это "Microsoft Internet Explorer" и "Netscape Navigator". Сейчас приближаются уже пятые версии данных программ, но, по статистике, наиболее используемыми являются их 4-ые версии. Поэтому для контроля внешнего вида Ваших страничек Вам придется использовать их. Причем на компьютере должны стоять обе версии. Хорошая WEB-страничка должна одинаково выглядеть в любом из этих броузеров. Я не отговариваю Вас от использования последних расширений стандарта HTML и JAVA-скрипты, но позаботьтесь о том, чтобы владельцы броузеров, не поддерживающих эти расширения, могли все же прочитать Вашу страничку.

Простой текстовый редактор

понадобится для ручного исправления и добавления HTML-кода, т.к. существующие визуальные редакторы не могут полностью контролировать процесс создания web-странички (а если Вы делаете страничку со сложным дизайном, то, возможно, Вам придется весь код писать в редакторе ;). В качестве примера подойдет обычный "Блокнот" из стандартной поставки Windows или один HTML-редакторов, которые имеют встроенные команды на проверку правильности тэгов и структуры документов, например, HoTMetaL.

Визуальные редакторы

позволяют быстро разрабатывать несложные web-странички и корректировать уже написанные, но с ними нужно быть осторожными, т.к., благодаря именно им, Ваша страничка может плохо глядеться в другом броузере.

Наиболее известные кандидаты - это "Microsoft Front Page" и "Netscape Composer" (или в ранней версии - редактор, встроенный в поставку "Netscape Navigator Gold"). Используйте из них тот, который Вам больше нравится. Иногда Вам придется вручную исправлять код, сгенерированный данными программами.

Текстовый процессор

с возможностью проверки орфографии - очень полезен для набора текста и исправления ошибок в распознанных текстах. Как пример - обычный "Microsoft Word".

Программы распознавания текста

могут Вам сэкономить массу времени, избавляя от ручного набора напечатанных текстов. Программ по распознаванию русского языка всего две - это CuneiForm и FineReader. Используйте по возможности последние версии. По качеству распознавания они примерно одинаковы, но мне больше нравится FineReader.

Некоторые специальные программы

эти программы позволят Вам выполнить некоторые эффекты и справиться с такими задачами, которые другими способами трудновыполнимы или не выполнимы вообще. Ниже перечислены некоторые из этих программ:

  • Ulead GIF Animator - программа, позволяющая Вам создавать анимированные GIFы. Обеспечивает полный контроль над выходным файлом. Обладает очень мощными средствами оптимизации.
  • Фильтры для Adobe PhotoShop - их количество просто огромно, но реально понадобится немного. Они способны существенно повысить работоспособность и двумя-тремя нажатиями создать впечатляющие эффекты. Но только не переборщите с ними - во всем нужна мера :)
  • Macromedia Flash! - практически стандарт для использования в web векторных изображений. Обладает собственной средой разработки и позволяет создавать впечатляющую векторную анимацию.
  • Программы для создания VRML-миров или 3D-программы, позволяющие экспортировать в данный формат. В качестве примера могу порекомендовать неплохую программу создания VRML-миров Internet3D Space Builder.
  • Программы для обработки звука - могут понадобиться, если того требует Ваша страничка. Это программы вообще отдельного класса, но для простой обработки звука, например, подойдет CoolEdit.

Пожалуй, это более-менее полный список программ для создания WEB-страничек. Не все из них, конечно, нужно сразу же иметь, чтобы начать писать свои странички. Для начала достаточно какого-нибудь броузера и визуального редактора, а уже по мере накопления опыта Вы освоите и другие программы.


Рисунок сотен слов дороже нам

Теперь поговорим о графике на Web-страничках, ведь именно благодаря ей WWW стала самым популярным сервисом Internet, именно ей мы обязаны всему этому многообразию страничек.

Что особенного в графике, применяемой на web-страничках?

А то, что она имеет свои определенные ограничения, с которыми мы должны считаться и извлекать из этого выгоду.

Для использования в Web применяется два основных формата файлов - GIF и JPG. Сейчас продвигается новый формат для web-графики под названием PNG (произносится "пинг"), но он пока еще мало распространен, и не все броузеры его понимают, поэтому с этим форматом мы пока разбираться не будем.

Итак, приступим к разбору форматов GIF и JPG, опишем их основные свойства и особенности.

Формат GIF

  • Поддерживает не более 256 цветов (меньше можно и часто нужно :);
  • Использует палитру цветов;
  • Использует сжатие без потери информации по методу LZW (который подобен применяемому в архиваторе PKZIP, и, следовательно, GIF-файлы практически не сжимаются);
  • Поддерживает чересстрочную развертку;
  • Является поточным форматом, т.е. показ картинки начинается во время перекачки;
  • Позволяет назначить одному из цветов в палитре атрибут прозрачный, что применяется при создании так называемых прозрачных GIFов;
  • Имеет возможность сохранения в одном файле нескольких изображений, что находит свое применение при изготовлении анимированных GIFов;
  • Поддерживает возможность вставки в файл управляющих блоков, которые позволяют вставлять комментарии в файл (например, об авторских правах :), осуществлять задержку между показами изображений и т.д.

А теперь немножко разъяснений - к чему эти свойства могут привести. Как Вы прочитали, GIF поддерживает не больше 256 цветов, а это значит, что все изображения, которые мы сохраняем в GIF-формате, явно или неявно уменьшают количество цветов, чтобы уложиться в этот лимит (разные программы с разным успехом). А отсюда вывод - если у Вас красивая фотография с плавными переходами и едва уловимыми оттенками цвета, то после преобразования все будет гораздо хуже - оттенки перестанут быть неуловимыми, и вся фотография приобретет неестественный, нереалистичный вид. Поэтому, если Вы хотите все-таки сохранить фотографию в формате GIF и передать все оттенки, то приходится идти на хитрости. Например, к фотографии можно применить какой-нибудь художественный фильтр и превратить ее в рисунок или применить тонирование. Зато нет никаких проблем с сохранением рисунков и чертежей в этом формате, они, как правило, хорошо сжимаются и не содержат много цветов.

А теперь рассмотрим свойства и особенности второго популярнейшего формата в сети.

Формат JPEG

  • Позволяет сохранять полноцветные изображения с количеством цветов 16,7 млн. цветов (или 24bpp), причем, если в рисунке меньше цветов, то перед сохранением файла он все равно преобразуется в полноцветное изображение;
  • Использует сжатие с потерями информации, за счет чего достигает диких степеней сжатия файлов;
  • Поддерживает прогрессивную развертку, т.е. изображение появляется вначале с плохим качеством, и в процессе загрузки постепенно улучшается.

Пожалуй, это все преимущества формата JPG, и основное его предназначение - хранение изображений фотографического качества.

Всю работу по обработке графики делайте в промежуточном формате

Ну вот, с форматами разобрались, теперь рассмотрим некоторые особенности работы с графикой. Несмотря на то, что мы сохраняем изображения в GIF-файле с поддержкой 256 цветов или в JPG-файле с 16,7 млн. цветов, работать с изображением нужно в каком-нибудь промежуточном формате, который позволяет сохранять картинку без искажений и без потери глубины цвета (например, TIFF и внутренние форматы редакторов типа PSD). Дело в том, что в процессе работы Вам понадобится многократно изменять или искажать изображение, что, в конце концов, приводит к многократной перезаписи файла. Многократная запись в формате GIF приведет к тому, что потеряются оттенки изображения, а в формате JPG - каждая новая перезапись файла будет вносить новые искажения, и через некоторое время фотография будет выглядеть ужасно. Поэтому всю работу по обработке графики делайте в промежуточном формате (и не смущайтесь огромными размерами файла) и только на самом последнем этапе преобразуйте изображение в нужный формат (часто - одновременно с оптимизацией размера файла).

Оптимизация графики

Для web-страниц очень важным является вопрос размера фотографии. Какого размера их делать? Не будут ли они слишком долго грузиться? При оптимизации можно уменьшить размер файла, но вряд ли стоит оптимизировать фотографию, не несущую смысловой нагрузки. Самый первый этап оптимизации - выделение в фотографии главного (с отбрасыванием всего остального) и акцентирование на иллюстрируемом элементе. Это достигается при помощи операции кадрирования и нахождения наиболее выразительной части, передающей смысл фотографии. После этой операции уже можно оптимизировать изображение, и в этом случае оно действительно будет иметь наименьший размер.

А с размерами фотографий нужно придерживаться определенного компромисса - не делайте их слишком мелкими, на которых даже под лупой ничего не разглядишь, и не делайте их слишком огромными, чтобы время не растянулось в вечность. Хотя, разумеется, есть исключения: правильно оптимизированная большая фотография может занимать время пересылки, эквивалентное времени пересылки обычной фотографии и, наоборот, дурно оптимизированный маленький рисунок будет грузиться до конца дней. Под обычной фотографией я понимаю фотографию размером примерно 250x300 пикселей и занимающую порядка 6-10 килобайт. Это не значит, что все Ваши фотографии должны иметь такие размеры, но площадь фотографии должна быть ей эквивалентна. Эти рекомендации относятся к "иллюстрирующим" текст фотографиям и не относятся к рисункам, выполняющим функции элементов навигации.

В этой статье приведены некоторые базовые сведения по применению графики на web-страницах. А в последующих статьях я опишу различные аспекты изготовления и оптимизации графики.


Слуга двух господ (Часть I)

Да, это - бедный web-дизайнер, которому приходится тратить уйму сил для укрощения и дрессировки страничек, чтобы на них было приятно смотреть и при помощи Internet Explorer, и при помощи Netscape Navigator.

Общее правило при написании совместимых страничек звучит так: есть некоторый набор вещей, который можно сделать как в и IE, так и в NN, но только при помощи разных тэгов или разных параметров одного и того же тэга. Причина, по которой мы можем писать совместимые странички, заключается в том, что непонятные для себя тэги и параметры броузер игнорирует.

Установка отступов на страничке

Для примера разберемся с установкой отступов в тэге <body>. Если мы откроем руководство по HTML, которое нам предлагает Microsoft, то прочитаем там, что задать отступы на страничке можно при помощи следующих атрибутов:

    leftmargin - отступ слева
    rightmargin - отступ справа
    topmargin - отступ сверху
    bottom margin - отступ снизу

Будем последовательны и откроем теперь руководство по HTML со стороны Netscape, где прочитаем, что атрибуты для задания отступов выглядят следующим образом:

    marginwidth - отступ слева и справа
    marginheight - отступ сверху и снизу

А теперь мы напишем код, который задает отступы слева и сверху и корректно показывается как в IE, так и в NN. Вы уже наверно догадались, что он должен выглядеть следующим образом:

<body leftmargin="0", topmargin="0", marginwidth="0" marginheight="0">

Вуа-ля! Все нормально работает. IE видит только свои атрибуты, а NN свои, и всем хорошо :).

Сколько же всего таких хитростей? Неужели их нужно все помнить? Вовсе нет, нужно просто запомнить несколько наиболее употребимых и уже на стадии проектирования web-сайта отбрасывать возможности, которые невозможно реализовать в обоих броузерах. Да, это конечно немного обидно, но лучше уж мы немного пожертвуем каким-нибудь эффектом, чем оставим огромную часть посетителей за бортом своего сайта. Не правда ли?

Эти возможности лучше не использовать

Вот список возможностей, предоставляемых тем или иным броузером, но которые желательно не использовать (как минимум до появления аналогичного свойства у другого броузера).

  • Использование атрибута bgproperties=fixed в тэге <body>. Его появление заставляет фоновое изображение оставаться неподвижным, но, к сожалению, данный атрибут поддерживается только IE, начиная с версии 2.
  • Использование языка VBScript на динамических страничках. Почему? Потому что он абсолютно не поддерживается NN и, по всей видимости, никогда не будет. Да это и не нужно, так как есть JavaScript, предоставляющий те же самые возможности (и даже больше), что и VBScript, но поддерживающийся обоими броузерами.
  • Использование ActiveX компонентов. Такие странички будут работать исключительно на Windows-платформах.
  • Использование тэга <iframe> для создания плавающих фреймов - поддерживается исключительно IE4 и выше.
  • Использование тэга <blink> - мигающий текст. Во-первых, он применим только в IE, начиная с 3-ей версии, а во-вторых, его применение не несет ничего, кроме раздражения и желания моментально уйти со странички.
  • Использование тэга <marquee> - нежелательно точно по тем же причинам, что и у тэга <blink>.
  • Применение специфического для NN тэга <multicol>;, выводящего текст на странице в несколько вертикальных колонок, наподобие газетных. В настоящее время для этой цели следует пользоваться таблицами.
  • Указание ширины и высоты изображений в процентах - поддерживается только IE.

Этот список, конечно, не полон, но это основные ошибки. Все, что описано, касается сайта, выставляемого в Internet. Если же Вы делаете сайт для внутренней сети (intranet), то можете использовать все, что Вам заблагорассудится :).


Слуга двух господ (Часть II)

Ну, хорошо, с тем, что не нужно делать, мы уже оэнакомились. А что же все-таки можно делать? На какие моменты следует обратить внимание при изготовлении совместимых web-страничек? Какие уловки при этом используются?

Если с самого начала соблюдать некоторые правила при написании страничек, то количество возможных ошибок можно сразу снизить на порядок. Так что, я, пожалуй, начну со списка этих правил, которые следует научиться соблюдать автоматически, если хочется, чтобы странички любо-дорого смотрелись в любом из броузеров:

  • Обязательно закрывайте все тэги (кроме одиночных).
  • Внимательно смотрите за вложенностью тэгов - они не должны пересекаться. Не допускайте такой ситуации, когда внешний тэг закрывается раньше, чем внутренний:
    <b><i>правильно</i></b>
<b><i>неправильно</b></i>
  • В тэге <body> нужно обязательно прописывать все цвета: фон странички, текст, цвет ссылок, цвет посещенных ссылок, цвет активных ссылок или не прописывать никаких. В противном случае может возникнуть такая ситуация, что какой-нибудь из неописанных цветов и, следовательно, взятый из настроек пользователя, совпадет с цветом фона и станет нечитаемым.
  • Значения атрибутов, содержащих пробелы и другие специальные символы, должны обязательно заключаться в кавычки. При желании Вы можете заключать в кавычки все параметры, но это не является обязательным.
  • Для всех изображений, помещаемых в HTML-код, обязательно указывайте ширину, высоту и толщину рамки, которую нужно установить в ноль, если у изображения не должно быть рамки. Отсутствие значений ширины и высоты хотя бы у одной картинки при табличной верстке приведет к тому, что загрузка страницы визуально сильно увеличится, т.к. в этом случае страничка начнется прорисовываться только после полной загрузки всех нужных изображений.
  • Для всех изображений, несущих некоторую смысловую нагрузку, нужно прописывать параметр alt тэга <img>. Причем текстовое описание должно выражать смысл изображения, это позволит просматривать Ваши странички при отключенной графике и все же понять смысл иллюстраций.
  • Рассматривайте web-страничку, как состоящую из нескольких смысловых блоков (верхняя шапка, меню, основной текст, рекламный блок и т.д.) и наиболее важные из них отмечайте комментариями начала и конца. Это позволит Вам легко ориентироваться в сложных страничках и при правильном построении структуры сайта легко изменить дизайн страниц в будущем.
  • Регистр букв в именах файлов и ссылках на них должен совпадать. Это особенно важно при размещении сайта на web-сервере под UNIX, иначе Вы вдруг обнаружите, что прекрасно работающий локальный вариант сайта на Вашей машине вдруг оказывается неработоспособным при помещении его на web-сервер. Проще всего названия файлов и ссылки писать всегда в нижнем регистре.
  • Для ссылок на внутренние страницы используйте по возможности относительные адреса. В будущем, при переносе или реорганизации сайта, Вам понадобится гораздо меньше усилий.
  • При использовании формы на страничке внимательно смотрите за тем, чтобы все элементы, составляющие форму (<input>, <select>, <textarea>, и т.д.), находились между тэгами <form></form>. Иначе у Вас неминуемо возникнут проблемы с Netscape Navigator-ом.
  • Если у Вас возникет сомнение в том, что некоторый код будет корректно обрабатываться одним из броузеров, то лучше сразу проверить это, написав тестовую страничку. Это сбережет Вам массу времени и нервов при отладке страничек.
  • При использовании JavaScript всегда обращайте внимание на регистр букв в ваших переменных и функциях, т.к. язык различает регистр и для него переменные MyVar и myvar совершенно разные. При придумывании имен для переменных и функций помните о том, что в языке есть зарезервированные имена и встроенные функции. При совпадении названия Вашей функции со встроенной Вы можете потерять кучу времени для установления этого факта.

Бытует мнение, что под IE, странички писать легче, чем под NN. Это верно, но только отчасти. Такое мнение сложилось из-за того, что NN неправильный код не обрабатывает и, соответственно, показывает страничку как есть, т.е. с ошибками. IE поступает по-другому - при обработке неправильного кода он пытается предугадать недостающие тэги или пропущенные параметры.

Например, в большинстве случаев незакрытый парный тэг будет обработан Explorer-ом так, как будто он есть, и не вызовет ошибки, хотя сам код, тем не менее, останется некорректным. Лучше учиться писать корректный код, и тогда нареканий в адрес NN будет гораздо меньше.

Но все же следует признать, что некоторые механизмы рендеринга в Navigatore действительно работают не совсем логично (иногда даже совсем не логично :) и абсолютно не так, как в Explorer-е. В этих случаях приходится просто запоминать глюки и особенности NN, как, впрочем, и IE :)

Особенно много усилий прикладывается при написании совместимых страничек, использующих табличную верстку. Особенностей и приемов здесь вагон и маленькая тележка. Вот об этом мы и поговорим в следующей статье.

Продолжение следует...

Назад | Содержание


Статьи по web-дизайну

Mike Melnikov (cherry-design@mail.ru)
Web-studio "Cherry-Design"

Ниже приведены некоторые статьи, написанные мною с целью помочь начинающим WEB-дизайнерам. Статьи основаны на информации, распыленной в различных источниках (начиная с книг и кончая Internet, или наоборот :), а также на личном опыте.

  1. Как создать привлекательный web-сайт - некоторые общие размышления, которые, тем не менее, имеют под собой твердую почву.
  2. Аппаратная конфигурация компьютера - для того, чтобы начать творить, нужно иметь хороший и надежный инструмент.
  3. Программы, используемые в web-мастеринге - хороший инструмент иметь мало - нужно его еще и освоить.
  4. Информация - вот основа Internet! - самый первый вопрос, который можно предъявить web-сайту - для чего ты, собственно, нужен?
  5. Что такое стильный web-сайт? - почему на одни странички ходить приятно, а с других хочется уйти почти сразу?
  6. Рисунок сотен слов дороже нам - провожают по уму, а встречают - все же по одежке. Её величество Графика :-)
  7. Оптимизация изображений в формате JPG - у Вас есть красивая фотография, а если она еще и быстро пересылается, то и все остальные смогут ее оценить.
  8. Оптимизация изображений в формате GIF - у Вас есть красивая фотография в формате GIF ;), а если она еще и быстро пересылается, то и все остальные смогут ее оценить.
  9. Броузеры, которые мы выбираем - как это влияет на нас и наших посетителей? И почему некоторым из них не нравится Ваш дизайн (как одна из возможных причин :)?
  10. Интерактивность! Что? И как? - как сделать так, чтобы посетители Ваших страничек могли отправить Вам сообщение? Краткое руководство по созданию формы на Вашей страничке и ее отсылки по почте с использованием готового CGI-скрипта.
  11. Зачем нам нужен SSI? - краткое и понятное объяснение о применении включений на стороне сервера и получаемых от этого преимуществ.
  12. Слуга двух господ (часть I) - нет-нет, это не комедия Карло Гольдони, и Труффальдино здесь ни при чем. Это... несчастный web-дизайнер, прилагающий массу усилий, чтобы угодить и приверженцам Microsoft Internet Explorer, и приверженцам Netscape Navigator.
  13. Слуга двух господ (часть II) - продолжаем наш практикум по написанию совместимых страничек. И на этот раз остановимся на правилах, применение которых позволяет резко уменьшить количество проблем с совместимостью.


Что такое стильный web-сайт?

Стильный web-сайт - это когда каждая страничка Вашей публикации имеет ярко выраженную принадлежность ко всему web-сайту. Когда легко ориентироваться и поиск информации не сопряжен с опасностью заблудиться и потерять время. Когда странички загружаются менее, чем за минуту. Когда...

Стильность web-сайта достигается несколькими приемами. Можно выделить следующие элементы, участвующие в создании стиля:

  • шрифт - в пределах публикации он должен иметь одинаковые характеристики - такие, как гарнитура (начертание), кегль (высота), цвет.
  • абзац - желательно, чтобы преобладал какой-нибудь один из видов выравнивания на страничке, например, публикация сделана с отступом от левого края и выравниванием влево.
  • цветовая схема web-сайта - она начинается с выбора тех трех цветов страницы, которые используются для представления обычного текста, ссылок и посещенных ссылок. Все эти параметры указываются в тэге <body>. Ниже, для примера, приведена строчка, задающая цвета на этих страничках: <body bgcolor="#669900" text="#333333" link="#669900" vlink="#666666" alink="#000000">

    Цветовая схема должна повторяться на всех страничках публикации, это создаст у посетителя ощущение связности сайта. Цвета ссылок старайтесь выбирать таким образом, чтобы, с одной стороны, читатель видел, что это ссылка, а с другой стороны, она бы не мешала ему читать основной текст. По поводу ссылок есть два полезных замечания: первое - как бы Вам не хотелось сделать цвета ссылок и посещенных ссылок одинаковыми (без веских на то причин), постарайтесь перебороть себя и придать им немного различия, для этого просто сделайте цвета уже посещенных ссылок чуть темнее; и второе - так уж получилось, что подчеркнутый текст в Web символизирует ссылку, поэтому поборите искушение использовать подчеркнутый текст в публикации, воспользуйтесь другим способом выделения. Вы ведь знаете, что очень неприятно, если, допустим, Ваша рука потянулась к ссылке с целью прочитать подробности, а мышка на нее ноль внимания :(.

  • графическое оформление сайта - во-первых, оно должно укладываться в общую цветовую схему; во-вторых, Вы должны продумать общую концепцию графического оформления. Все графические элементы можно разделить на два больших класса: рисованные и фотореалистические. Постарайтесь не смешивать эти два типа в оформлении. Кроме этого, в случае, если Вы используете на сайте фотографии в качестве иллюстраций, то перед использованием обработайте их - сделайте в случае необходимости тоновую и цветовую коррекцию, кадрирование, выберите примерный размер фотографий в публикации, найдите способ обработать края фотографии. А потом используйте данное оформление по всей публикации. И всегда пишите пояснения к фотографиям в параметре ALT тэга IMG - это будет восприниматься как подпись к фотографии и, кроме того, избавит пользователя от ожидания в случае, если его не интересует данная страничка.
  • навигация по сайту - именно она не дает посетителю запутаться в дебрях Вашего сайта. Всегда оставляйте для посетителя возможность перехода на главную страничку публикации. Кроме этого, не забывайте, что очень много людей попадают на Ваши странички через поисковые системы, т.е. не на первую страницу, и хороший сайт должен позволить читателю перейти на первую страничку; попросту говоря, дублируйте навигационную систему на всех страничках или сделайте так, чтобы они, по крайней мере, имели переход на основную страницу. В случае, если Вы выполняете навигационную панель графическими средствами, то обязательно сделайте ее текстовую копию и поместите где-нибудь снизу (текст в любом случае загружается быстрее графики :).

Возможно, я упустил некоторые элементы, участвующие в создании стиля, но основные перечислил. Соблюдение этих нехитрых правил позволит придать Вашим страничкам профессиональный вид и сделать информацию на Вашем сайте легкодоступной и быстронаходимой :).