Разработка информационного web-сайта типографии ООО "Абсолют Принт"

Достойный уважения Web-дизайн включает разработку страниц, доступных для пользователей с ограниченными возможностями, в частности по зрению и слуху. Консорциум World Wide Web объявил об инициативе Web Accessibility Initiative (WAI), которая ставит целью сделать Web более доступным для всех пользователей.

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

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

Представление графики на 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-страницы и без использования графики - при помощи шрифтов, скриптов и таблиц стилей (CSS) - и это будет красиво и стильно. Но ведь окончательный вид документа зависит от большого числа различных факторов, таких как: ширина окна браузера, предварительные настройки браузера, принятые по умолчанию размер шрифта, его имя и цвет. К тому же не все скрипты и стили поддерживаются всеми браузерами. Если же будет использована графика, то посетитель вашей страницы увидит ее точно такой, какой сделали и видите ее вы. Основная сложность работы с Web-графикой состоит в том, что пропускная способность каналов Интернета, в большинстве случаев, очень низкая и перед вами сразу встанут проблемы - как сделать графический файл небольшой по объему, но хорошего качества, какие программы и приемы использовать при его оптимизации. Именно этому посвящен раздел о векторные и растровые графических редакторах, которые являются мощным инструментом обработки изображения в умелых руках.

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

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

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

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

Графические пакеты (редакторы) тоже делятся на два типа: растровые и векторные.

Давайте теперь рассмотрим наиболее популярные из них.

Редакторы растровой графики.

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

Пакет предлагает, например, средства для восстановления поврежденных изображений, ретуширования фотографий или создания самых фантастических коллажей, которые только может позволить себе наше воображение. В общем, потенциал этого пакета по истине огромен. Начиная с версии 5.5 в пакет включена программа Adobe ImageReady, предоставляющие огромные возможности по обработке графики под WEB (оптимизация изображений, создание анимированных gif, "разрезание" картинок на более мелкие и т. д.). Девиз разработчиков Adobe Photoshop - "Camera of your mind" - предполагает не только техническое совершенство, но и полную свободу творчества, на которую человек, работающий с этой программой, просто обречен.

PhotoPaint - еще один не менее известный  графический редактор (из пакета Corel Draw) для обработки растровой  графики, конкурирующий с Adobe Photoshop. Здесь также имеются все необходимые  инструменты для обработки графики, разнообразные фильтры, текстуры. Разница  лишь в удобстве работы, интерфейсе  и скорости наложения фильтров - наложение происходит немного  медленнее.

Painter - редактор предоставляет великолепные  возможности для эмуляции реальных  инструментов рисования: графит, мел, масло и т. д. Также позволяет имитировать фактуру поверхности материалов, живопись, создавать анимацию.

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

Существует еще ряд редакторов (Microsoft Photo Editor, Microsoft Photo DRAW), также позволяющих реализовать простейшие задачи, но не удовлетворяющих запросам профессионалов.

Редакторы векторной графики.

Adobe Illustrator - пакет позволяет создавать, обрабатывать и редактировать  векторную графику.

По своей мощности он эквивалентен растровому редактору Adobe Photoshop: имеет аналогичный интерфейс, позволяет подключать различные фильтры и эффекты, понимает многие графические форматы, даже такие как *.cdr (Corel Draw) и *.swf (Flash).

CorelDraw - безусловно, такой известный  графический пакет не мог обойтись  без средств для обработки  векторной графики. Пакет по своей  мощности практически не уступает  графическим редакторам Adobe Photoshop и Adobe Illustrator. Помимо обработки векторной  графики, в этом пакете существует  обработчик растровой графики (Photo Paint), трассировщик изображений, редактор  шрифтов, подготовки текстур и  создания штрих кодов, а также  огромные коллекции с изображениями (CorelGallery).

Редактор гипертекстовых страниц.

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

 

 

2. Практическая часть

 

Прежде чем начать разрабатывать информационный web сайт необходимо знать этапы создания Интернет сайта.

Разработка сайта, как правило, имеет следующие этапы:

Концепция.

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

Проектирование.

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

"Разработка проекта структуры  и разделов сервера. Для многоуровневых  сайтов необходима разработка  проекта в электронном виде  для визуального представления  основных разделов и гипертекстовых  ссылок. (без дизайна).

Разработка технического задания.

Представление клиенту первичных дизайн эскизов (2-3 эскиза).