Разработка информационного web-сайта типографии ООО Камчатпресс

1.2.3.4. Графические редакторы

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

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

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

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

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

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

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

Графические пакеты (редакторы) тоже делятся на два типа: растровые и векторные. Давайте теперь рассмотрим наиболее популярные из них.

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

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

есть возможность подключать инструменты независимых производителей.

Рис.1.6. 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), также позволяющих реализовать простейшие задачи, но не удовлетворяющих запросам профессионалов.

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

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

Рис. 1.7. Adobe Illustrator

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

Рис. 1.8. CorelDraw

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

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

Рис. 1.9. Namo Web Editor

2. ПРАКТИЧЕСКАЯ ЧАСТЬ. РАЗРАБОТКА ИНФОРМАЦИОННОГО WEB-САЙТА ДЛЯ ТИПОГРАФИИ ООО «КАМЧАТПРЕСС»

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

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

Концепция

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

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

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

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

" Заключение договора. Если клиент объявляет тендер на разработку сайта, то

до заключения договора представляются несколько дизайн-эскизов.

Разработка

       Получение всех информационных материалов (тексты и фотографии) в

электронном виде или на твердых копиях от Заказчика.

" Уточнение требований к дизайну и информационному наполнению (фирменная цветовая гамма, образы, слоган и т.д.). Требования к верстке.
" Согласование дизайн-проекта. Визуальное представление первой страницы и

2-3 уровней сайта без верстки.
" HTML-верстка и программирование (CGI, CSS, JavaScript и т.д.)
Тестирование
" Открытие тестового домена на сервере Narod.ru или другом сервере по указанию Заказчика.
" Размещение beta-версии корпоративного сайта на сервере. Представление Заказчику.
" Тестирование, исправление замечаний.
Размещение
Регистрация домена и открытие официального сайта. Сдача работ.
Сопровождение
Клиентам предлагается передать функции управления и продвижения сайта , заключив договор с агентством на постоянное сервисное обслуживание, в которое может входить:
" Анонсирование ресурса на поисковых системах в Internet.
" Периодическое обновление информации на сайте (в течение 24-48 часов после получения информации).
" Актуализация информации и расширение информационного наполнения, добавление новых разделов и информации. Сканирование и замена фотоизображений.
" Разработка баннеров и рекламных кнопок.
" Организация баннерной рекламы в различных системах.

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

2.1.Разработка меню навигации информационного web сайта

Меню навигации

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

Понятие системы навигации

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

Типы навигации

Существует несколько типов организации навигации по Web-сайту. Рассмотрим основные.

Текст

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

Однако 90-е гг. XX века породили тенденцию к эстетизации составных эле­ментов электронных документов в Сети, которая выражалась в стремитель­ном повышении пользовательских требований к визуальному оформлению сайта, в том числе к его навигации. Несмотря на растущий интерес к табли­цам стилей С88, позволяющим несколько преобразить и приукрасить стан­дартный вид шрифтов, текстовая навигация в конце концов уступила "место под солнцем" своему графическому аналогу.

Рис. 2.1. текстовая система навигации

Графика

Графический вариант представления системы навигации (рис.2.2.) является, пожалуй, наиболее распространенным в Интернете. Оно и понятно: совре­менные графические редакторы вкупе со всевозможными надстройками (plug-ins), эффектами и фильтрами способны создавать потрясающие образцы оформительских решений. Применение фотографических изображений, ри­сунков, а также анимации привлекло огромное количество Web-дизайнеров, которые предпочли визуальную привлекательность аскетичному тексту.

Рис. 2.2. графическая система навигации.

Требования к системе навигации

При разработке системы навигации необходимо следовать некоторым обяза­тельным требованиям, соблюдение которых поможет создать простую и удобную в обращении, интуитивно понятную любому пользователю навига­ционную структуру. Эти требования могут несущественно варьироваться в зависимости от особенностей Web-сайта, представленной на нем инфор­мации, а также некоторых субъективных факторов разработчика. Однако раз­рабатываемая система навигации должна в конечном итоге соответст­вовать ряду критериев удобства пользования навигацией, называемому usability.Таких как: расположение, идентифицируемость, иерархия и наименования, доступность.