Библиотека программиста

Все, что необходимо начинающему и опытному программисту

Урок 3. Что еще нужно дизайнеру

Под операционной системой Windows нужно обязательно проверять сайт в браузерах Internet Explorer (на момент написания книги последней версией является седьмая, а наиболее популярной шестая, обе обнаруживают достаточные отличия в интерпретации веб-страниц от пятой и тем более шестой версии; изредка посетители заходят на сайт из-под третьего Internet Explorer), Mozilla Firefox (1, 1.5 и 2 версии), просто Mozilla (и других браузерах на основе механизма Gecko, например, KMeleon), Netscape (3 и 4 версии работали на одном «движке», а начиная с 6 — на основе того же Gecko, различия в отображении страниц гигантские) и в браузере Opera (последние и наиболее корректно интерпретирующие код версии — 8 и 9; глобальные различия в прорисовке страниц есть с шестой версией).

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

Например, Internet Explorer 5 для Windows и Internet Explorer 5 для MacOS — это два разных браузера. Firefox и Opera, правда, дают не столь различающиеся результаты. Для MacOS (начиная с 10 версии) характерно наличие еще двух браузеров — Safari (браузер по умолчанию, версии 12, и планируется третья) и Camino.

Safari базируется на том же коде, что и браузер Konqueror для семейства операционных систем Linux, стремительно набирающих популярность (однако «линуксоиды» реже пользуются им, чем браузером Firefox). Безусловно, вне студийных условий трудно тестировать сайт на разных системах, но для этого существуют онлайновые сервисы (список в конце книги прилагается).

Для работы с языками серверных сценариев (ЯСС) необходимы серверы. Серверы — это не только металлические ящики с дисковыми массивами, но и программы, определенным образом организующие работу с данными для многих пользователей и имеющие средства интерпретации ЯСС.

Например, для работы с сайтами на PHP (а именно на этом языке работает очень много готовых веб-архитектур, или «движков») требуется сервер Apache (как наиболее подходящий), сам PHP (ведь язык — это тоже программа) и — желательно — база данных, например, MySQL.

А для работы с БД существует удобное средство, написанное на языке PHP — программа PHPMyAdmin. Все это нужно держать под рукой и правильно настроить. А для языка ASP (точнее, это не язык, а средство разработки, поскольку включает сценарии на других языках) больше подходит сервер IIS.
Правда, есть мощные отладочные пакеты, например, «Денвер» от российских программистов. Компактный дистрибутив (работающий под Windows, тогда как традиционно Apache ставится на Linux или другую Unixподробную систему) включает собственно сервер Apache с большинством необходимых модулей, поддержку языков PHP, Perl и Parser (последний не в основном дистрибутиве) и базы данных MySQL с инструментом PHPMyAdmin, что делает его незаменимым отладочным средством: кусочек Linux’а в системе Windows.

Тем не менее, если требуются специфические настройки сервера, особые расширения, а также тест дополнительных программ, которые будут запускаться на сервере, то стоит не просто установить сервер, язык и БД по отдельности, но и воссоздать условия их функционирования на рабочем сервере, где будет располагаться сайт, — нужная операционная система нужной версии, утилиты, модули и т. п.

Для написания кода на ЯСС пригодятся специализированные текстовые редакторы (в том числе из перечислявшихся выше). Например, для PHP подойдут PHP Expert Editor, HTML Expert, CatsHtml KissCool. А редакторы EditPlus Text Editor, PHP Edit, Aditor, Web Development Studio и некоторые другие позволяют работать с языками HTML, ASP, PHP, Perl, Java, JavaScript, VBScript, CSS, XML, C/C++, Python, WML, qBasic, Pascal, Lisp, ActionScript, ColdFusion, Parser, и их можно «научить» работать и с остальными языками.
Растровая графика — один из важнейших компонентов веб-страниц.

Сложно (но все-таки возможно) встретить современный сайт, где разработчики обошлись без картинок в форматах JPG, GIF или PNG. (Замечу в скобках, в чем коренное различие этих форматов. JPG пригоден для фотоизображений и обеспечивает весьма разнообразные степени сжатия; GIF предпочтителен для изображений с большими однородными областями одного цвета, поддерживает прозрачные области и анимацию; PNG обеспечивает хорошее сжатие данных и также поддерживает прозрачные области и даже полупрозрачность, но не во всех браузерах корректно, а в старых браузерах — например, в Netscape 4 — изображения формата PNG вообще игнорируются.)

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

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

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

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

«Простые» графические редакторы (например, разные варианты ACDSee, i.Mage, Photo Razor, Image Enhance, Image Explorer, NeoPaint и другие) являются одновременно программами просмотра и основного редактирования: позволяют кадрировать изображения, изменять их размер и иногда степень сжатия, применять простейшие фильтры и изменять яркость, контрастность и насыщенность цветов.

Некоторые из них умеют создавать уменьшенные копии изображения (thumbnails в принятой англоязычной терминологии). Такая обработка достаточно удобна, если требуется быстро обработать одну или несколько фотографий для размещения в виртуальной фотогалерее в короткий срок. Очевидно, что для веб-дизайна такие программы могут пригождаться ограниченно: они вряд ли помогут в создании коллажей или оригинальной графики, и их ценность сводится к быстрому редактированию и пакетной обработке (удобно реализовано в Photo Razor).

Более мощные редакторы (полноценные с огромным количеством функций — Adobe PhotoShop, Corel PhotoPaint, Macromedia Fireworks, Ulead PhotoImpact, The Gimp, Jasc Paint Shop Pro — и более ограниченные в возможностях Photobie, PhotoFiltre, Pixia, Project Dogwaffle, VCW VicMan’s Photo Editor и другие), во-первых, поддерживают технологии слоев и работу с множеством объектов на рабочем поле, что позволяет комбинировать изображения, а во-вторых, обладают большим арсеналом инструментов (кисти, фигуры, инструменты клонирования, выделение и редактирование фрагментов, наборы фильтров и эффектов и т.п.), что дает возможность создавать изображения с нуля.

А эти два факта в сочетании с богатыми возможностями коррекции уже существующих изображений позволяют подготавливать графику для веб-страниц без каких-либо ограничений. Из указанных редакторов Adobe Photoshop наиболее сильно сжимает изображения при подготовке для веб-страниц без существенной потери качества. В остальных редакторах нужно вручную проставлять нужное разрешение (72 dpi вместо 300), нужный размер изображения и степень сжатия, а после этого еще использовать утилиты вроде JPGCleaner или PureJPG для того, чтобы из изображения была вычищена вспомогательная информация.

Нужно добавить, что есть совсем уж узкоспециализированные программы: например, MicroArt предназначена только для создания иконок для сайтов и программ в формате .ico, а программы Zx Color Spy или EyeDropper нужны только для выбора нужного цвета и определения его кодов в разных цветовых моделях.

Создание анимации в формате GIF поддерживают далеко не все редакторы. Удобные инструменты для этого — программы Adobe ImageReady и Ulead Gif Animator. Сохраняя графику в рабочем формате, они способны на выходе давать оптимизированное для веба изображение с поддержкой анимации. Кроме того, создавать анимированные изображения позволяют программы Atani, Babarosa Gif Animator, Pivot Stickfigure Animator.

В процессе подготовки изображений не стоит недооценивать и роль векторных редакторов (из которых наиболее популярны Adobe Illustrator, CorelDraw и Macromedia Freehand, а менее известными, но не менее функциональными аналогами со своими особенностями являются Xara и Creature House Expression, новые версии которой ныне выпускаются компанией Microsoft). Дело в том, что для свободного рисования линиями, для создания нефотореалистичной графики они подходят даже больше, чем растровые, и при этом все умеют экспортировать изображение в большинство популярных растровых форматов, в том числе пригодных и для публикации на веб-страницах.

Векторная графика на сайтах пока используется ограниченно, и, несмотря на то, что стандарт SVG для описания векторных фигур появился достаточно давно, он не поддерживается большинством браузеров без дополнительных модулей. Единственный векторный формат, используемый на вебе — это Flash (файлы в формате .swf), дитя компании Macromedia, ныне принадлежащий Adobe. Он позволяет создавать анимированные интерактивные ролики, которые используются как встраиваемая графика, как меню и прочие элементы на веб-страницах, но которые также могут являться практически самостоятельными сайтами (практически — потому что для помещения ролика на страницу нужен небольшой HTMLкод).
В последнем случае ролик включает навигацию, способен подгружать вспомогательные ролики, текстовые файлы, сценарии, изображения и аудиофайлы. Подробнее о таком подходе будет рассказано далее.

Основная и наиболее удобная программа, использующаяся для создания флэшроликов, — Macromedia Flash (ныне Adobe Flash). Кроме этого, работать с флэшем позволяют программа Corel R.A.V.E. и последние версии Adobe PhotoShop.

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

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

Еще один класс программ, без которого не обойдется разработчик сайта, — менеджеры файлов, поддерживающие FTPдоступ к сайту. Есть файловые менеджеры общего назначения с таким доступом (например, Total Commander), есть специализированные FTP-менеджеры (FTP Commander, Core FTP и другие), есть технология SVN (с помощью которой можно организовать совместную работу с файлами сайта на различных компьютерах), а можно написать файл-менеджер самому на одном из серверных языков программирования.

<< Назад         В начало         Далее >>

Библиотека программиста. 2009.
Администратор: admin@programmer-lib.ru