Создание фиксированных и гибких Web-страниц

При создании профессиональной графики для Web используется текст со сглаженными краями. Сглаживание–это легкая размытость на неровных краях, сглаживающая переходы между цветами. Не сглаженные края, напротив, выглядят зазубренными и ступенчатыми. Исключением из этого общего правила является текст очень малого размера, (10 пунктов и меньше), применение сглаживания делает его практически неразличимым. Текст малых размеров будет выглядеть намного лучше без сглаживания. Два комплекта шрифтов. При разработке Web-страницы средствами базового HTML есть два комплекта шрифтов; пропорциональный и шрифт фиксированной ширины. Проблема заключается лишь в том, что неизвестно, какой из них и какого размера будет использован при отображении.

Пропорциональный шрифт –иначе "шрифт переменной ширины" для каждого символа выделяет разное количество места в зависимости от его начертания. Например, в пропорциональном шрифте заглавная "W" занимает больше места в строке по горизонтали, чем прописная "I". Такие гаринитуры, как: Times, Helvetica и Arial являются примерами пропорциональных шрифтов.

Web-браузеры для большинства  текстов на Web-странице, включая основной  текст, заголовки, списки, цитаты и  т. д. , используют пропорциональные шрифты. Как правило, большие отрывки основного текста удобнее читать, когда они напечатаны пропорциональными шрифтами. Поскольку большинство пользователей не имеют времени заменить шрифты, установленные по умолчанию, с большой вероятностью можно предположить, что текст на вашей странице будет отображен шрифтом Times размером 10 или 12 пунктов (по умолчанию в Netscape) или Helvetica (по умолчанию в Microsoft Internet Explorer). Но это всего лишь общее правило. Шрифт с фиксированной шириной предоставляет одинаковое место для всех символов шрифта. Заглавная "W" занимает не больше места, чем прописная "I". Примерами шрифтов фиксированной ширины являются гарнитуры Courier и Monaco. В Web-браузерах шрифты фиксированной ширины используются для отображения любого текста внутри следующих HTML-тегов: , , , , , . Поскольку многие люди не меняют настройку шрифтов, установленную по умолчанию, текст, находящийся в указанных тегах, будет выведен одним из шрифтов типа Courier.

Текст в изображениях. Дизайнеры быстро поняли, что самый верный способ абсолютного контроля над шрифтами–поместить текст в изображение. Можно часто видеть заголовки, подзаголовки и объявления, выполненные в виде файлов GIF. Многие Web-страницы представлены исключительно в графике, которая содержит внутри себя весь текст страницы. Преимущества использования графики вместо HTML-текста абсолютно очевидны: –можно определять тип шрифта, размер, интерлиньяж, промежуток между буквами, цвет и выравнивание– все атрибуты, которые вызывают сложности только в HTML; – ваша страница будет одинакова при выводе во всех графических браузерах. Но у этого метода имеется ряд недостатков:

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

–информацию, находящуюся в изображении, нельзя индексировать или организовать ее поиск. В результате исключаются из документа важные части информации. Размер шрифта. Обычно размер шрифта определяется в пунктах (72 пункта (пт) = 1 дюйм высоты шрифта) но, к сожалению, эти размеры не достаточно точно переводятся между платформами. Отчасти это происходит потому, что их операционные системы управляют дисплеями с различными разрешениями. Обычно Windows использует разрешение экрана 96 точек/дюйм, a MacOS– 72 точек/дюйм. Мониторы MultiScan допускай более высокое разрешение. Шрифт на экране дисплея Масintosh имеет точно такой же размер, как и при печати (например, 12 пт Times на экране выглядит так же, как 12 пт Times на бумаге). Для шрифтов Microsoft подобное соглашение не выполняется, и размер шрифта при выводе на экран больше, что облегчает чтение с дисплея. В результате шрифт размером 12 пт на Windows больше похож на печатный шрифт в 16 пунктов. Чтобы получить на Windows печатный размер 12 пт, вам нужно выбрать размер шрифта 9 пунктов (но тогда пользователи компьютеров Масintosh увидят текст почти неразборчивым, так как он будет отображен шрифтом размером всего 6, 75 пт). 1. 5. Представление графики на Web-страницах

На данный момент почти все изображения в Web, представлены в двух форматах: GIF и JPEG. Третий соперник, заслуживающий упоминания, формат PNG, борется за поддержку и внимание браузеров. Далее–краткий обзор "большой тройки" онлайновых графических форматов. Более подробная информация представлена в главах, посвященных каждому из форматов. GIF. GIF –Grafic Interchange Format можно назвать традиционным форматом файлов Web. Он был первым форматом файлов, который поддерживался Web-браузерами, и по сей день продолжает оставаться основным графическим форматом Web. Его свойства состоят в следующем:

– поддерживает не более 256 цветов (меньше можно и часто нужно); – использует палитру цветов;

–использует сжатие без потери информации по методу LZW (который подобен применяемому в архиваторе PKZIP, и, следовательно, GIF-файлы в дальнейшем практически не сжимаются); – поддерживает чересстрочную развертку;

– является поточным форматом, т. е. показ картинки начинается во время перекачки; –позволяет назначить одному из цветов в палитре атрибут прозрачный, что применяется при создании так называемых прозрачных GIFов;

–имеет возможность сохранения в одном файле нескольких изображений, что находит свое применение при изготовлении анимированных GIFов;

–поддерживает возможность вставки в файл управляющих блоков, которые позволяют вставлять комментарии в файл (например, об авторских правах), осуществлять задержку между показами изображений и т. д.

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

JPEG. Вторым наиболее популярным  графическим форматом в Web является JPEG –Joint Photographic Experts Group. Он содержит 24-разрядную информацию о цвете. Это 16, 77 млн цветов в отличие от 256 цветов формата GIF. В JPEG используется так называемое сжатие с потерями. Это означает, что некоторая информация об изображениях в процессе сжатия отбрасывается, но в большинстве случаев ухудшение качества изображения не наносит вреда и часто даже не заметно.

Фотографии или любые изображения с плавными градациями цветов лучше всего сохранять в JPEG-формате, потому что он предлагает более высокое качество изображений, умещающихся в файл меньшего объема. Тем не менее, JPEG не является лучшим решением для графических изображений с одноцветными областями, поскольку этот формат имеет тенденцию испещрять цвета крапинками и конечный файл, как правило, будет несколько больше, чем GIF-файл для того же изображения. PNG. Есть еще третий графический формат, конкурирующий за постоянное использование в Web. Это формат PNG–Portable Network Graphic, который, несмотря на некоторые достоинства, с 1994 г. находится более или менее в тени. Только недавно браузеры начали поддерживать PNG как встроенную графику, но PNG имеет все шансы стать очень популярным форматом в Web. Именно поэтому он включен здесь в "большую тройку". PNG может поддерживать 8-разрядные индексированные цвета, 16-разрядные полутона или 24-разрядные полноцветные изображения, используя схему сжатия без потерь. Это обеспечивает более высокое качество изображений, а иногда и меньший объем файлов по сравнению с форматом GIF. Кроме того, файлы PNG имеют некоторые замечательные функции, например, встроенное управление коэффициентом гамма, и изменяемые уровни прозрачности (это позволяет показывать рисунок фона сквозь отбрасываемые мягкие тени).

Разрешение и размер файла изображений. Поскольку изображения Web существуют только на экране дисплея, будет технически правильно измерять их разрешение в пикселах на дюйм (ppi– pixels per inch). Другая единица измерения разрешения – количество точек на дюйм (dpi –dots per inch) относится к разрешению печатных изображений и зависит от разрешения печатающего устройства.

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

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

Например, многие пользователи по-прежнему используют 14-дюймо-вые дисплеи с разрешением 640x480 пикселов. Чтобы гарантировать заполнение графической заставкой всего пространства экрана, лучше сделать его шириной не более 600 пикселов (учитывая, что часть пикселов справа и слева будет использована для окна и для полосы прокрутки). Размер остальных кнопок и изображений на странице следует измерять в пикселах относительно банеpa, имеющего ширину 600 пикселов. Размер файла. Без сомнения, именно графика сделала Web таким, каким мы его видим сегодня, но как дизайнер вы должны знать, что многие пользователи испытывают к графике в Web чувство на грани любви и ненависти. Не стоит забывать, что графика увеличивает время, необходимое Web-странице для передачи по сети; большой объем графики означает существенное время загрузки, которое испытывает терпение читателя, особенно если он дозванивается с использованием стандартного модемного соединения.

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

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

Сервер –это любое управляющее компьютером программное обеспечение, которое дает ему возможность выполнять запросы на документы или другие данные. Программы, которые запрашивают и отображают документы (такие как браузер), называются клиентами. Термины "на стороне сервера" и "на стороне клиента", используемые, например, при работе с картами-изображениями, относятся к той машине, которая руководит процессом. Функции на стороне клиента выполняются на машине пользователя, функции на стороне сервера– на удаленной машине. Web-серверы отвечают на запросы браузеров (клиентских программ), находят заданные файлы (или выполняют сценарий CGI) и возвращают документ или результаты сценария. Web-браузеры и серверы общаются по протоколу Hypertext Transfer Protocol (HTTP, протокол передачи гипертекста). Программное обеспечение серверов. Большинство серверов работают на платформе Unix. Именно поэтому в мире Web по-прежнему используется терминология системы Unix. В процессе работы понадобится выучить несколько Unix-команд. Однако процент серверов Windows NT, Windows 95 и даже MacOS постоянно увеличивается. Некоторые серверные пакеты предлагают графический интерфейс в качестве альтернативы управлению из командной строки Unix.

Вот некоторые известные серверы: NCSA Server, Apache, CERN, Netscape Servers, Internet Information Server (IIS). Сегодня большинство серверов (приблизительно 70%) работают на Apache или его предшественнике NCSA. Конкретный тип сервера не влияет на большую часть того, что делает дизайнер, например, на создание графики или разработку базовых HTML-файлов. Конечно, он будет влиять на более совершенные методы создания Web-сайтов, такие как Server Side Includes (серверные включения), добавление типов MIME и Web-страницы, управляемые базами данных.

Корневой каталог. Когда браузер запрашивает документ, сервер определяет местонахождение документа, начиная с корневого каталога документа. Это каталог, который был сконфигурирован для хранения всех документов, совместно используемых посредством Web. Он не обязательно появляется в URL, который указывает на документ, поэтому важно знать, какой каталог является корневым при загрузке файлов.

Индексные файлы. Прямой слэш (/) в конце URL означает, что URL обращается к каталогу, а не к файлу. По умолчанию серверы отображают содержание каталога, указанного в URL. Большинство серверов, однако, сконфигурированы так, чтобы отображать особый файл вместо списка каталога, этот файл называется индексным. Индексные файлы обычно имеют имя index. html, но на некоторых серверах они могут называться welcome. html или default. html.

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

Заголовки отклика HTTP. Как только сервер определяет месторасположение файла, он посылает содержимое этого файла обратно браузеру вместе с некоторыми заголовками отклика HTTP (response headers). Эти заголовки обеспечивают браузер информацией о прибывающем файле, включая его тип данных (также известный как "тип содержимого" или "тип MIME"). Обычно сервер определяет формат по расширению файла; например, файл с расширением . gif распознается как файл изображения. Браузер читает информацию в заголовке и определяет, что делать с файлом. Он может отобразить файл в окне либо запустить соответствующее вспомогательное или встраиваемое приложение (plug-ins).

Сценарии CGI. Вместо того чтобы обращаться к файлам HTML, URL может потребовать запустить программу CGI. CGI расшифровывается как Common Gateway Interface (общий шлюзовой интерфейс). Он позволяет Web-серверу общаться с другими программами (сценариями CGI), которые работают на сервере. Сценарии CGI обычно пишут на языках Perl, С или C++.

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