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

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

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

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

Набирає обертів популярність векторної графіки. На відміну від растра, тут розмір не залежить від реальної величини об’єкта. Навіть дуже деталізовані векторні малюнки, що складаються з тисяч об’єктів, рідко перевищують кілька сотень кілобайт. Інформація про них зберігається в описовій формі, тому можна нескінченно збільшувати графічні примітиви та змінювати параметри об’єктів.

Це означає, що переміщення, масштабування, обертання, заповнення та виконання інших операцій не погіршує якості малюнка. Що стосується товщини ліній, то при збільшенні або зменшенні об’єктів вона залишається стабільною, оскільки задана постійною величиною.

Векторна графіка дає можливість редагувати малюнок по шарах, а також накладати один об’єкт на інший, виключаючи будь-яку взаємодію між ними. Проте використання векторної графіки для створення зображень, які потребують високої реалістичності, може бути неефективним.

Векторні графічні редактори дозволяють виконувати цілий ряд операцій: обертання, переміщення, відображення, розтягування, скошування, зміну порядку шарів і створення складніших об’єктів шляхом комбінування примітивів, а також об’єднання, доповнення та перетин замкнених фігур.

Векторна графіка ідеальна для простих або складених малюнків, які не потребують фотореалізму. Наприклад, модель векторної графіки використовують PostScript і PDF. Вектор і растр не існують відокремлено один від одного — їх можна комбінувати, отримуючи цікаві дизайнерські рішення.

А що ж було в минулому?

Можливість впровадження у веброзробку векторної графіки існувала і раніше. Її історія бере початок у 1994–1995 роках. Саме тоді була розроблена специфікація та з’явилися плагіни для браузерів для SVF (Simple Vector Format) і VRML (Virtual Reality Markup Language).

19 серпня 1998 року з’явилася альтернатива для CGM (Computer Graphic Metafile) — WebCGM. Ця розробка мала сприяти розширенню сфери застосування формату. Із усіх представлених рішень вижив лише VRML, який спочатку був затверджений як стандарт VRML97, а у 2004 році перетворений на X3D.

У 1998 році компанії Sun, IBM і Adobe представили PGML, який мав використовуватися для представлення векторної графіки в інтернеті. Приблизно в той самий час Microsoft і низка інших компаній представили альтернативу — стандарт VML.

PGML (Precision Graphics Markup Language) — це мова розмітки на основі XML. З її допомогою векторну графіку можна було описувати у вигляді тексту у форматі XML. PGML використовує модель побудови зображень, схожу на PDF і PostScript. Після появи SVG і VML ця технологія втратила актуальність.

VML (Vector Markup Language) описує зображення всередині HTML-сторінки у вигляді тексту, використовуючи синтаксис, подібний до HTML і CSS. Основою VML також є XML. Ця технологія спирається на відкриті стандарти W3C, такі як HTML 4.0, XML 1.0 і CSS 2.

Google Maps використовував VML для відображення векторів у браузері Internet Explorer. Проте згодом VML поступився місцем SVG і наразі вважається застарілим.

Пізніше Microsoft запропонувала плагін Silverlight для відтворення анімації та мультимедійного контенту, включно з векторною графікою. Це фактично стало завершенням історії VML.
 

Про Flash

Під час створення сайтів або їх окремих елементів часто використовували Flash. Це мультимедійна платформа, яку застосовували для розробки вебдодатків і презентацій.

Flash використовувався для створення банерів, анімацій, ігор, а також для відтворення відео й аудіо. Він підтримував векторну, растрову та частково тривимірну графіку.

Однак Flash мав суттєві недоліки:

• велике навантаження на процесор;
• нестабільність роботи;
• проблеми з безпекою;
• відсутність індексації пошуковими системами;
• залежність від плагінів.

Через це технологія поступово втратила популярність.

«Що буде далі?» або альтернатива Flash

Дуже ймовірно, що HTML5 зможе суттєво розширити можливості веброзробки. Це новий етап розвитку HTML, який змінює підхід до створення вебсторінок.

HTML5 дозволяє використовувати більш чистий і логічний код, а також позбутися залежності від сторонніх плагінів.

Однією з ключових технологій є WebGL — інструмент для відображення 3D-графіки у браузері.

Також HTML5 включає:

• Canvas для роботи з графікою;
• Web Storage замість cookies;
• drag-and-drop;
• WebSockets;
• геолокацію;
• нові типи форм.

Canvas і SVG

Canvas — це елемент HTML5 для створення растрової графіки за допомогою JavaScript. Він дозволяє динамічно змінювати зображення та створювати інтерактивні елементи.

SVG (Scalable Vector Graphics) — це мова розмітки для опису векторної графіки на основі XML. Вона підтримує масштабування, анімацію та інтерактивність.

SVG-файли легко редагуються, добре стискаються та індексуються пошуковими системами.
 

Як у майбутньому виглядатиме вебсайт

Сучасні технології дозволяють створювати сайти, що поєднують векторну і растрову графіку. Це відкриває нові можливості для дизайну та продуктивності.

HTML5, SVG і Canvas уже сьогодні активно використовуються у веброзробці.

Висновки

Використання HTML5, SVG і Canvas найближчим часом стане глобальним стандартом. Їхні можливості не поступаються Flash, а в багатьох випадках перевершують його.

Браузери активно підтримують ці технології, а розробники дедалі частіше використовують їх у своїх проєктах.

Майбутнє вебдизайну — за відкритими стандартами, продуктивністю та інтерактивністю.