Існує думка, що інтернет в наш час майже повністю складається з растрової графіки. Виняток становить лише Флеш. Але сьогоднішній стан речей дає нам привід замислитися над тим, що, можливо, зовсім скоро, сфера веб-розробки буде піддана глобальним змінам. Давайте розглянемо, які існують можливості в веб-дизайні, щоб простежити тенденції, які готує нам майбутнє. Всі ми чули про те, що з метою розробки веб-сайтів можна використовувати векторну або растрову графіку.Растрова графіка на даний момент є найпоширенішою в інтернеті. З її допомогою можна відтворити будь-який малюнок або фотографію, точно передавши ефект переходу від одного кольору до іншого, що в векторній графіці призведе до втрат в розмірі файлу. Зображення в растрі зберігають високу реалістичність, до них можна застосовувати різноманітні ефекти.

Серед недоліків - занадто великий розмір файлів з простими зображеннями, при цьому не існує можливості ідеального масштабування. Растровий малюнок не отредактіруешь по верствам, як це можна було б зробити в векторній графіці. Набирає обертів зростання популярності векторної графіки. На відміну від растра, тут розмір не залежить від реальної величини об'єкта. Навіть дуже деталізовані векторні малюнки, що складаються з 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 також успадковує деякі недоліки XML. Це великий розмір файлу, який можна компенсувати існуванням стисненого формату SVGZ і великою швидкістю інтернету. Також SVG не ефективний для роботи з великими картографічними додатками, так як для правильного відображення невеликої частини зображення необхідно прочитати повністю весь документ. Щоб зменшити розмір коду 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 вже сьогодні, і ми закликаємо їх робити це». Тому майбутнє Флеша в якості інструменту для інтернет-анімації виглядає дещо туманним. Можна припустити, що ці технологічні нововведення стануть початком переходу на новий рівень розвитку можливостей веб-розробки.