Новые инструменты в сфере веб-дизайна

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

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

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

Среди недостатков — слишком большой размер файлов с простыми изображениями, при этом не существует возможности идеального масштабирования. Растровый рисунок не отредактируешь по слоям, как это можно было бы сделать в векторной графике.

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

Векторные графические редакторы, позволяют выполнять целый ряд операций. Среди них — вращение, перемещение, отражение, растягивание, скашивание, изменение порядка слоев и создание более сложных объектов путем комбинирования примитивов, а также объединение, дополнение, пересечение замкнутых фигур.
Векторная графика идеальна для простых или составных рисунков, которые не нуждаются в фотореализме. К примеру, модель векторной графики используют PostScript и PDF.
Вектор и растр не существует обособленно друг от друга. Их можно комбинировать, получая при этом интересные дизайнерские решения.

А что же было в прошлом

Возможность внедрения в веб-разработку векторной графики существовала и ранее.

Создание векторной графики для веба уходит корнями в 1994-1995 года. Именно тогда была разработана и предложена сначала спецификация, а вскоре и плагины к браузерам для SVF (Simple Vector Format), VRML (Virtual Reality Markup Language).

19 августа 1998 года мир увидел альтернативу для CGM (Computer Graphic Metafile) — Web CGM. Эта разработка должна была способствовать расширению сферы применения данного формата.

Из всех представленных аналогов выжил только VRML. Его сначала утвердили в рамках стандарта VRML97, а в 2004 году преобразовали в X3D .

В 1998 году Sun, IBM и Adobe, знакомят нас с PGML, который должен был использоваться для представления данных в векторном формате в вебе. Примерно в то же время Microsoft и несколько других крупных компаний представляют нашему вниманию альтернативное решение — стандарт VML.

PGML (Precision Graphics Markup Language) —язык разметки, основанный на XML. С его помощью векторную графику на веб-страницах можно описывать в виде текста в формате XML. PGML использует схожую с PDF и PostScript модель построения изображения.

После выхода в свет язык вытеснили технологии SVG и VML. На данный момент PGML почти не имеет сферы применения, а среди поддерживающих формат программ только в ArgoUML можно выполнять экспорт в PGML.

VML (Vector Markup Language) описывает изображения внутри страницы HTML в виде текста, по тем же синтаксическим правилам, что и HTML с CSS. Основой для VML также является XML, разработанный на базе HTML, что существенно расширяет его возможности. В том числе VML опирается и на другие, утвержденные W3C открытые стандарты, среди которых HTML 4.0, XML 1.0 и CSS 2.

Google Maps использует VML для визуализации векторов на IE.

Многие считали, что эта технология станет окном в 3D Интернет, однако вскоре VML уступил свое место открытым стандартам SVG. Сейчас VML нельзя назвать актуальной технологией. Формат поддерживается только браузером Internet Explorer и Microsoft Office.

Пару лет назад Microsoft предложила плагин Silverlight для воспроизведения на веб-странице анимации и медийных приложений, и в том числе отображения векторной графики. Данное событие стало завершением истории VML, также как и направленность разработчиков браузеров на поддержку SVG. Сейчас Silverlight находиться в стадии своего дальнейшего развития. Многое говориться о возможном светлом и не очень будущем этой разработки, но чем все закончится, мы узнаем, только спустя некоторое время.

О флеше

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

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

Существует адаптированная под КПК и другие мобильные устройства «облегчённая» версия платформы Flash Lite. Функциональность разработки пришлось немного ограничить, чтобы она соответствовала возможностям мобильных устройств и их операционных систем.

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

Если брать за критерий воспроизведение анимации, то по производительности Flash Player в несколько раз превосходит виртуальную машину Javascript в браузерах, где есть поддержка предварительного стандарта HTML5, хотя приложения, работающие вообще без использования виртуальных машин, находятся вне конкуренции.

Языком программирования Flash является ActionScript, основанный на ECMAScript.

У Flash есть несколько существенных недостатков, главный из которых состоит, пожалуй, в том, что центральный процессор подвергается чрезмерной нагрузке, которая связана с неэффективностью виртуальной машины Flash Player. Но в некоторых случаях flash-приложения просто недостаточно оптимизированы их разработчиками, часто также используются так называемые «генераторы» flash-приложений.

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

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

Этот недостаток ставит под сомнение универсальность технологии Flash, ограничивая её применение в критически важных веб-приложениях.

Когда Flash используется для размещения текстовой информации, она не индексируется поисковыми системами. И хотя в 2008 году Google и Yahoo презентовали некоторую систему индексирования текста внутри swf-файлов, но до сих пор лишь небольшой процент разработчиков использует Flash для создания всего сайта.

Также в Flash приложениях нельзя использовать правую кнопку мыши, так как ее зарезервировали сами разработчики браузеров для настроек Flash.

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

В браузерах отдельные части Flash могут быть заменены посредством HTML 5, JavaScript (и AJAX), SVG.

«Какие перспективы все же рисует будущее?» или «альтернатива Флешу»

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

HTML5 предлагает использовать более «чистый», простой и последовательный код, а также позволяет избавиться от неудобств, связанных с ограничениями, которые накладывает использование сторонних плагинов, в том числе, Adobe Flash.

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

WebGL, пожалуй, одно из самых главных и интересных нововведений. Эта технология позволяет браузеру отображать интерактивные трехмерные сцены, просчитываемые на видеокарте. В скором будущем эта технология будет доступна в любом современном браузере без установки дополнительных плагинов, а также поддерживаться устройствами на базе iOS и Android.

Мы привыкли, что разработчики браузеров полностью свободны в способах обработки ошибок. С приходом HTML5 эта тенденция измениться. Теперь спецификация будет указывать браузерам, как им отображать соответствующую стандартам верстку, а также определять пути работы с ней.

Используя «Canvas» в HTML5, пользователи смогут обрабатывать графику и изображениях еще быстрее и эффективнее, опять-таки, без необходимости применения сторонних плагинов.

Забудьте о куках. Теперь для «Оффлайн» хранения данных в браузере будет использоваться веб-хранилище. Многие согласятся, что куки давно устарели т совершенно не подходят для хранения массивов данных на стороне веб-браузера. Технология WebStorage лишена недостатков, которыми обладают куки. HTML5 дает нам возможность использовать два хранилища вида «ключ-значение» на стороне веб-браузера с доступом из JavaScript, которые поддерживаются Firefox 3.5, Safari 4.0, IE8, Google Chrome, Opera 10.50.:

localStorage — для долговременного хранения данных;
sessionStorage — для сессионного применения.

Используйте мощный API, чтобы быстро создавать рисунки на растровых 2D-поверхностях. Здесь нет каких-либо файловых форматов, Вы можете рисовать, используя только скрипты, при этом не применяются узлы DOM — все состоит из пикселей. Эта характеристика позволит больше сконцентрироваться на рисовании, не задаваясь вопросами о сложности изображения.

Система междокументных сообщений (Cross Domain Messaging) — это возможность обмениваться данными документам, размещенным на разных доменах безопасным способом. Функцию поддерживают браузеры Firefox и Google Chrome.

Также одними из самых важных характеристик HTML5 можно назвать

«Drag-and-drop»-функционал;
Работа с сетью с помощью веб-сокетов;
Определение местоположения (Geolocation);
Новые типы полей форм.

За языком разметки HTML5 — будущее Интернета. Пока он находится в процессе разработки, но с каждым днем все больше его возможностей реализуются в популярных веб-браузерах.

Canvas — это элемент HTML 5 для создания растрового изображения при помощи JavaScript.

История Canvas сильно отличается от вышеупомянутых векторных стандартов. Началом всего стала внедренная Apple еще в 2005 году техника Canvas, созданная для того, чтобы попиксельно изменять изображения внутри определенной области холста. Идея поддержала Mozilla, которая интегрировала ее в Gecko 1.8 (Firefox 1.5 и выше), после чего вышла девятая версия Opera с поддержкой Canvas.

Затем Canvas, как часть стандарта Web Applications 1.0, вошел в HTML5.

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

Работа Mozilla Foundation над Canvas 3D проходит в направлении добавления низкоуровневой поддержки графических ускорителей для отображения трёхмерных изображений через HTML элемент Canvas.

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

Использование Canvas способно делать работу с Web-документами еще проще.

Множество ярких примеров использования технологии можно посмотреть на www.canvasdemos.com.

Хотя Canvas и появился относительно недавно, он уже успел заручиться поддержкой большинства браузеров. Его возможности даже реализуемы в IE, с помощью дополнительной Javascript-библиотеки.

Canvas в данный момент стремительно набирает популярность. Как только он станет более «открытым» для доступа извне, можно будете говорить о надежном закреплении его позиций.

Этот элемент — не единственный API для генерации динамических изображений. Для описания тех же фигур, что и Canvas, можно использовать SVG.

SVG (Scalable Vector Graphics ) – это язык разметки масштабируемой векторной графики, разработанный Консорциумом Всемирной паутины (W3C). Он входит в подмножество расширяемого языка разметки XML, и создан для описания двумерной векторной и смешанной векторно/растровой графики в формате XML. SVG поддерживает как анимированную и интерактивную графику, так и неподвижную, другими словами — декларативную и скриптовую. Основой открытого стандарта SVG стали упомянутые выше языки разметки VML и PGML.

Возможности SVG достаточно широки. Здесь любая фигура задается компактной строкой, которая описывает путь от начальной точки до конечной через любые промежуточные координаты. К фигурам и путям можно применять окраску, скругление углов, прозрачность и другие эффекты.

Еще одна положительная черта SVG – это интерактивность. Она позволяет повесить обработчик событий, как на каждый отдельный элемент, так и на целое изображение, чтобы позволить пользователю управлять рисунком, перемещая мышкой некоторые элементы или выполняя другие действия.

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

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

Благодаря тому, что SVG – формат векторный, Вы можете увеличивать любую часть изображения без потери качества. Также к элементам SVG документа можно применять фильтры для создания эффектов, таких как при работе с растровыми изображениями – это размытие, выдавливание, сложные системы трансформации и др. В тексте SVG-кода фильтры описываются тегами, визуализировать которые позволяют средства просмотра. Это не сказывается на размере исходного файла, создавая при этом изображения с необходимой иллюстративной выразительностью.

В SVG документах доступно использование растровой графики. Можно импортировать элементы с изображениями форматов PNG, GIF или JPG.

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

Динамичную и интерактивную графику в SVG можно создавать, используя скрипты и анимацию. Формат обеспечивает событийную модель, при которой отслеживаются такие события, как события мыши, клавиатуры, загрузка страницы, изменение ее параметров, и др. Что придаёт графике интерактивность, так это возможность запуска анимации по определенному событию (например «onclick» или «onmouseover»), К событиям каждого элемента можно привязывать отдельные скрипты.

SVG — открытый стандарт и не является чьей-либо собственностью. Документы SVG легко интегрируются с HTML и XHTML документами. Большой плюс разработки также состоит в совместимости с CSS.

SVG оставляет за собой все преимущества XML:

Возможность работы в различных средах.
Интернационализация (поддержка Юникода).
Широкая доступность для различных приложений.
Простая модификация через стандартные API.
Несложное преобразование таблицами стилей XSLT.

Чтобы уменьшить размер кода SVG, была разработана «обёртка» SVGZ. Файл SVG сжимают с помощью gzip, и получается файл с расширением «SVGZ». Эта операция происходит довольно просто и результативно, так как это текстовый XML-документ с регулярной структурой.

На сегодняшний день не существует идеальной среды работы с форматом, но вполне реально использовать возможности, которые предлагают следующие программы:

Inkscape — свободный векторный графический пакет для работы с SVG.
OpenOffice.org Draw умеет экспортировать графику в файлы формата SVG.
sK1 — свободный векторный графический редактор.
MetaPost — язык программирования, используемый для создания графических иллюстраций.
Adobe Illustrator версии от 10.0.
Adobe GoLive версии от CS2.
CorelDRAW векторный графический редактор.
Visio векторный графический редактор от Microsoft.
librsvg — библиотека, используемая в Mediawiki для работы с SVG.
Batik — Java библиотека для генерации, отрисовки и различных манипуляций изображениями в SVG формате и основанный на этой библиотеке SVG-браузер — Squiggle.

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

Сейчас SVG уже поддерживается почти всеми современными браузерами, исключение составляет IE, для которого нужна эмуляция всех методов через VML

Как в возможном будущем будет выглядеть веб-сайт

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

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

На данный момент не существует полностью специализированной среды разработки для данных сайтов. Но есть программы, которые уже сегодня применяются для работы с векторной графикой. Это Adobe Illustrator, CorelDraw, Inkscape, Macromedia FreeHand, а также некоторые другие, которые уже упоминались в этой статье.

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

А тем временем компания Google выпустила онлайн книгу «20 Things I Learned About Browsers & The Web». Книга позволяет каждому перелистывать страницы и оставлять закладки. Для ее создания использовалась технология HTML5. Благодаря этому каждая страница книги это html страница, и текст книги легко индексируется поисковыми системами.

http://www.20thingsilearned.com/home

Кроме различных демо-версий и он-лайн экспериментов, существует некоторое количество рабочих сайтов, написанных на HTML5.

Один из них www.elladesign.com. Это действительно красивый сайт с современным дизайном. Теплая пастельная цветовая гамма, привлекательный клипарт и продуманная интерактивность заставляют каждого гостя чувствовать здесь себя как дома.

Визуальные эффекты, которые мы встретили на сайте www.jayarajpr.com, обладают всеми преимуществами Flash-анимации, но лишены ее недостатков. Сайт очень стильный и информативный. Весьма привлекательное цветовое решение.

Дизайн сайта www.pixelbender.ca отлично передает его суть. Небрежность и гранж дополняют чувство уюта.

Интернет-ресурс eyestylesllc.com радует глаз хорошей выдержанной палитрой. Нельзя не отметить отлично продуманное юзабилити, реализованное с помощью HTML5.

www.kingscooty.com — еще один сайт, который мы предлагаем Вашему вниманию. Первые характеристики, которые приходят на ум, когда попадаешь на этот ресурс это — контраст, четкость и информативность.

Выводы

Использование HTML5, SVG и Canvas в ближайшем будущем может носить глобальный характер и, следуя из вышеизложенного, в этом нет ничего удивительного. Возможности, которые предлагают нам HTML5 в связке с языком программирования Java Script и другими современными инструментами мало чем уступают Flash технологиям, более того, перед разработчиками появляются новые возможности, о которых они ранее могли и не мечтать. Большинство новинок, о которых мы говорили, успешно внедряются в сферу веб-разработки, а браузеры выбирают направленность на их поддержку. Как говорит глава маркетингового отдела W3C Ian Jacobs: «Разработчики могут использовать HTML5 уже сегодня, и мы призываем их делать это». Поэтому будущее Флэша в качестве инструмента для интернет-анимации выглядит несколько туманным.

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

Заказать сайт сейчас!

Ваш будущий сайт слишком хорош, чтобы принадлежать кому-то другому