«Создание сайта «Графика в интернете»

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

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

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

Предмет исследования – использование графических объектов при создании web-приложений

Цель исследования - создание сайта на тему «Графика в интернете»

В соответствии с поставленной целью в данной работе нами были решены следующие задачи:

1) изучение форматов записи графики в интернет страницах;

2) изучение Internet-технологий;

3) планирование сайта;

4) Разработка сайта с использованием технологий: html, css, JavaScript;

5) тестирование, публикация и дальнейшее продвижение сайта.

Данная работа состоит из трех частей.

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

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

В техническом задании определяются точные технические и программные характеристики, общие сведения, назначения и цели создания сайта, характеристика сайта, требования к системе и сайту;

Третья глава описывает этапы разработки web-сайта, рассматривается реализация бета-версии сайта, проводится тестирование и публикация сайта.

Графика, записанная в формате GIF, компрессируется с использованием алгоритмов LZW (Lempel-Ziv-Welch). Этот алгоритм безутратной компрессии (сжатия), основанный на устранении избыточности информации, поэтому картинка отображается на 100% в соответствии с оригиналом. Компрессия заключается в отыскании повторяющихся последовательностей точек и записи информации о размерах этой последовательности и месте её начала. Этот способ позволяет значительно снизить размер файлов при записи изображений, имеющих довольно большие одноцветные участки.

GIF 89а состоит: из заголовка и блоков данных. В заголовке отображаются: версия формата GIF, предпочтительные параметры картинки – высота, ширина, размер палитры, разрешение, цвет фона. Отдельные байты содержат информацию о глобальной цветовой палитре – каждый цвет это 3-байтовое значение, которым задаётся цветовое сочетание RGB. За заголовком следуют контрольные блоки, блоки изображения и дополнительные блоки.

1) В контрольном блоке находится информация о продолжительности экспозиции (времени показа на экране) и способе перехода от картинки к картинке. Формат GIF 89а позволяет записывать много изображений в одном файле и задавать значения экспозиции и цикличности анимации.

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

3) Дополнительный блок содержит данные, которые не отображаются, например комментарий, связанный с данной картинкой.

Ограничением формата GIF является размер цветовой палитры – максимум 256 цветов, то есть цветовая палитра может иметь размер от 21 по 28, или 2, 4, 8, 16, 32, 64, 128 и 256 цветов. На практике это означает, что если на картинке появляется 7 цветов, то при использовании палитры размером 16 цветов часть полей палитры остаётся не задействованными. В этом случае редукция цветовой палитры до величины 8 не приведёт к потере качества, но позволит уменьшить размер файла записи картинки. Операция сужения цветовой палитры – обычная опция записи файла в формате GIF.

Кодировка LZW позволяет воспроизвести компрессированное изображение точно таким, каким оно было до компрессии. Подобные алгоритмы компрессии называются «безутратными», в отличие от «утратных» алгоритмов, которые предполагают потерю части информации об изображении. Сжатие LZW уменьшает размер файла GIF так эффективно, что на практике становится невыгодной дополнительная архивация и компрессия файлов этого типа программами ZIP, ARJ и т.п. сжатием изображения занимаются графические программы.

JPEG

В 1990 году Объединенной группой экспертов в области фотографии (JointPhotographicExpertGroup, JPEG) была предложена схема сжатия, которая впоследствии завоевала всеобщее признание, как стандартный метод обработки неподвижных изображений. JPEG – это алгоритм сжатия изображений. Но общепринятым стало применение названия JPEG к файлам, записанным в формате JFIF (JPEGFileInterchangeFormat). JPEG (или JFIF) – это формат записи изображений, применяемых как на Интернет-сайтах, так и для типографской печати, а также в цифровой фотографии.

Процесс компрессии изображения в формате JPEG идет в несколько этапов:

1) Если нужно, то сначала происходит конвертация данных о точках изображения из системы RGB в систему YCbCr, которая аналогична HSL, позволяет выразить яркость цвета.

2) Уменьшение в два раза ширины шкалы Cb и Cr (свойства цвета) при сохранении оригинальной шкалы яркости Y. Сужение шкалы происходит путём усреднения значений Cb и Cr соседних пикселей.

3) Анализ блоков изображения: 8*8 пикселей. С помощью дискретного косинусного преобразования (ДКП) производится округление значений изменения яркости цвета.

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

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

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

BMP

Формат BMP (Bitmap, Битовая карта) является очень простым способом записи графики для применения в системе Windows.

Вообще, этот формат в Интернете не применяется. BMP – это внутренняя графическая система Windows. В частности, в этом формате записываются «копии экрана». Достаточно нажать клавиши , чтобы в системном буфере оказалось изображение, в данный момент находящееся на экране. В формате BMP не предполагается компрессия данных, вернее, могут быть скопрессированы только элементы 4- и 8-битовой графики. В таких случаях архивация данных происходит по принципу групповой компрессии – оттискивания соседних точек одинакового цвета и замещение последовательности идентичных данных парой значений, представляющих индекс цвета на палитре и количество пикселей данного цвета в последовательности. При отсутствии компрессии размер файлов, записанных в этом формате, очень велик. К тому же этот формат не поддерживается многими браузерами, а это значит, что часть пользователей не увидит у себя на экране картинки, записанной в формате BMP. Этот формат конкретно поддерживает InternetExplorer. Существенный недостаток формата BMP – слишком большой размер создаваемых файлов.

PNG

PNG (PortableNetworkGraphics – Переносимая сетевая графика) – универсальный формат записи неподвижных (статичных) изображений. Он с успехом применяется в отношении, как фотоснимков, так и небольших рисунков. По глубине отображения цвета формат PNG превосходит GIF и JPEG, так как цвет каждого пикселя здесь может быть определён с помощью 48 битов. PNG применяет алгоритм компрессии без потерь, а прозрачность фона может иметь достаточно много (до 256) степеней. Изображения, записанные в формате PNG, корректно отображаются всеми браузерами. Сам формат был разработан в 1996 году как альтернатива GIF, но пока не получил большой популярности. Одной из причин этого стало то обстоятельство, что форма PNG не позволяет записывать анимацию, которую так любят использовать создатели Интернет-сайтов.

SVG

Формат SVG (ScalableVectorGraphics – Масштабируемая векторная графика) представляет собой стандарт, разработанный организацией WorldWideWebConsortium (W3C) для записи векторной графики языком XML. В отличие от форматов, описанных выше, SVG дает возможность записи векторной графики, а это значит, что масштабирование изображения будет происходить без потери качества.

ICO

Иконки, сопровождающеелюбой программный продукт и любой файл в системе Windows, также являются графическими файлами. Хотя эти маленькие рисунки очень часто бывают включены в файлы *.exe или *.dll, они могут быть также записаны на диске в независимых файлах с расширением *.ico. Формат ICO позволяет сохранять элементы 4 битовой графики размером 32*32 пикселя. Иконки системы Windows могут принимать один прозрачный цвет (аналогично GIF), иногда называемый цветом экрана, а также цвет, обратный цвету экрана.

PDF

(PortableDocumentFormat - Переносимый формат документа) разработан фирмой AdobeSystems. Файлы, записанные в данном формате, имеют расширение *.pdf.

 Формат PDF - один из форматов для передачи электронных документов через Интернет.

 Документ, открытый в формате PDF полностью сохраняет внешний вид и структуру оригинала (макет, шрифты, графика) независимо от того, на какой платформе (Win, Mac, Unix) был создан, и каким приложением был открыт файл.

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

 В PDF-документ могут встраиваться интерактивные элементы - гиперссылки, видео- и аудиофайлы, кнопки и поля для ввода текста.

 Для просмотра или печати необходима программа AdobeAcrobatReader, которая распространяется бесплатно и может быть скачена с сервера фирмы-разработчика w*w.adobe.com. Данную программу часто можно найти на большинстве дисков с драйверами, на любом диске программного обеспечения компании AdobeSystems, а также при покупке нового компьютера.

Безопасная цветовая палитра

Безопасная цветовая палитра – это набор из 216 цветов, общих для всех инструментальных платформ. Каждый из них может быть задан однобайтовым кодом. Их 216 потому, что 8 битовое определение позволяет задать 256 цветов (28). Однако принято, чтобы поле в 40 и цветов было зарезервировано для операционной системы, тогда 216 цветов остаются для применения в прикладных программах пользователей. Картинки, отображаемые на мониторах компьютеров, способных правильно передать 256 цветов (8-битовая графика), отображаются правильно (и предсказуемо) и при условии применения 216 безопасных цветов. Остальные краски передаются как смесь компонентов из безопасной палитры.

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

Цвета

RGB

В настоящее время RGB является самым популярным способом задания цвета и практически в каждой графической программе существует возможность описания цвета этим форматом. Комбинация трёх однобайтовых значений (24 бита) позволяет определить 16,7 млн. цветов (точнее 224).

HSL

HSL (Hue, Saturation, Luminance, т.е. оттенок, насыщение, яркость) – это палитра красок, определяемых сочетанием не основных цветов (как это имеет место для RGB), а оттенка, насыщения и яркости. Этот условный способ описания цвета намного более интуитивен и близок естественному восприятию цветов человеком. Значительно легче изменить оранжевый цвет на жёлтый, изменяя оттенок, насыщение и яркость, чем подбирать нужное сочетание красного, зелёного и синего.

CMY, CMYK

Палитра CMY (Cyan, Magenta, Yellow, т.е. сине-зелёный, пурпурный, жёлтый) – ещё один способ определения цвета. Он составляет альтернативу RGB. Палитра CMY, расширенная черным цветом, обозначается CMYK и повсеместно применяется печатающими устройствами.

Типовые графические элементы Web страниц

Фон

Желая изменить применяемый по умолчанию фон HTML документа или его фрагмента (например, ячеек таблицы), автор страницы может произвольно задать цвет фона или указать, какой графический файл был использован для «обивки» окна браузера. Файл фоновой графики не должен быть большим. Если предлагается однотонный фон, то лучше предусмотреть задание цвета фона в кодах HTML. Лучше всего выглядят страницы с фоном в пастельных тонах, элементы которого сливаются в однородно окрашенную поверхность. При использовании тёмного фона шрифт должен быть ярким.

Пример:

Фон жёлтого цвета.

Фондокументаизфайла.

Иллюстрация, фотоснимок

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

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

2) Анимация на Web страницах служит чаще всего для украшения. Иногда анимация применяется для поэтапного представления информации – в отдельных кадрах последовательно отображается слова какой-нибудь надписи или открывается все больший фрагмент изображения. Этот эффект привлекает и удерживает внимание наблюдателя. Типовым форматом записи анимации для Web страниц является GIF.

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

4) Рассечение картинки. Часто получается так, что компрессия графических файлов приносит намного лучшие результаты (увеличение степени сжатия), если сжимать маленькие картинки, а не большие изображения. Большие изображения рекомендуется рассекать на меньшие фрагменты. Сохранение каждого фрагмента в своём файле иногда позволяет значительно уменьшить количество байтов, которые пользователь будет вынужден загружать с Web сервере для просмотра картинки в оригинальном размере. Восстановление изображения, происходит по принципам загрузки отдельных фрагментов в ячейки таблицы.

Клавиша, кнопка

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

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

Рекламный баннер

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

Чаще всего баннеры бываю следующих размеров: 400*50, 468*60 пикселей, или более мелкие – 120*40 пикселей и т.д. Очень важно, чтобы размер файла, в котором записан баннер, не был большим. Считается, что хороший баннер (т.е. такой, который быстро загружается в браузер) не должен быть больше 10–15 кбайт. На практике же строгих ограничений не существует.

Глава 2

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

2.1. Планирование сайта

2.1.1.Назначение и цель создания системы

Цель написания Web-сайта «графика в интернете» – создание Internet-сайта как средства ознакомления с форматами изображений, которые используемых в web-страницах, типовые графические элементах на web-страницах.

2.1.2. Обсуждение аудитории.

Web-сайт «графика в интернете», привлекает пользователей, которые заинтересованы технологией Web-дизайна. Содержит в себе обширную информацию в области графики.

Типичные пользователи приблизительно делятся на три большие стереотипные категории:

 неопытные пользователи;

 пользователи с определенным опытом посещения Web-сайтов, не посещающие сайт часто;

 опытные пользователи, хорошо представляющие структуру сайта, которые могут заходить на сайт многократно.

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

2.1.3. Схемы поведения пользователей сайта.

Начнем с того, как пользователь попадает на сайт.

Схема 1 пользователь попадает на стартовую страницу «главная» и просматривает этот информационный блок.

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

Схема 3. Пользователь попадает на стартовую страницу «главная», затем переходит по ссылке «графические форматы, используемые в WEB-приложениях». Далее обращается к информационному блоку «GIF».

Схема 4. Пользователь попадает на стартовую страницу «главная», затем переходит по ссылке «графические форматы, используемые в WEB-приложениях». Далее обращается к информационному блоку «JPEG».

Схема 5.Пользователь попадает на стартовую страницу «главная», затем переходит по ссылке «графические форматы, используемые в WEB-приложениях». Далее обращается к информационному блоку «BMP».

Схема 6. Пользователь попадает на стартовую страницу «главная», затем переходит по ссылке «графические форматы, используемые в WEB-приложениях». Далее обращается к информационному блоку «PNG».

Схема 7. Пользователь попадает на стартовую страницу «главная», затем переходит по ссылке «графические форматы, используемые в WEB-приложениях». Далее обращается к информационному блоку «SVG».

Схема 8. Пользователь попадает на стартовую страницу «главная», затем переходит по ссылке «графические форматы, используемые в WEB-приложениях». Далее обращается к информационному блоку «ICO».

Схема 9. пользователь попадает на стартовую страницу «главная», далее просматривает информационный блок «Безопасная цветовая палитра».

Схема 10. пользователь попадает на стартовую страницу «главная», далее просматривает информационный блок «Цвета».

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

Схема 12. пользователь попадает на стартовую страницу «главная», далее просматривает информационный блок «Типовые графические элементы Web-страниц». Далее обращается к информационному блоку «Фон».

Схема 13. пользователь попадает на стартовую страницу «главная», далее просматривает информационный блок «Типовые графические элементы Web-страниц». Далее обращается к информационному блоку «Иллюстрация, фотоснимок».

Схема 14. пользователь попадает на стартовую страницу «главная», далее просматривает информационный блок «Типовые графические элементы Web-страниц». Далее обращается к информационному блоку «Клавиша, кнопка».

Схема 15. пользователь попадает на стартовую страницу «главная», далее просматривает информационный блок «Типовые графические элементы Web-страниц». Далее обращается к информационному блоку «Рекламный баннер».