Nowe narzędzia w dziedzinie projektowania stron internetowych

Panuje przekonanie, że współczesny internet składa się niemal wyłącznie z grafiki rastrowej. Jedynym wyjątkiem był Flash. Jednak obecny stan rzeczy skłania nas do refleksji, że być może już wkrótce branża tworzenia stron internetowych ulegnie globalnym zmianom. Przyjrzyjmy się możliwościom projektowania stron internetowych, aby prześledzić trendy, jakie szykuje nam przyszłość.

Wszyscy słyszeliśmy, że do tworzenia stron internetowych można używać grafiki wektorowej lub rastrowej. Grafika rastrowa jest obecnie najpopularniejsza w Internecie. Za jej pomocą można odtworzyć dowolny rysunek lub zdjęcie, dokładnie oddając efekt przejścia od jednego koloru do drugiego, co w grafice wektorowej spowodowałoby zwiększenie rozmiaru pliku. Obrazy rastrowe zachowują wysoki poziom realizmu, można do nich stosować różnorodne efekty.

Wśród wad — zbyt duży rozmiar plików nawet dla prostych obrazów, a także brak możliwości idealnego skalowania. Obrazu rastrowego nie można edytować warstwowo, tak jak można to zrobić w grafice wektorowej.

Coraz większą popularność zyskuje grafika wektorowa. W przeciwieństwie do grafiki rastrowej, rozmiar nie zależy tutaj od rzeczywistej wielkości obiektu. Nawet bardzo szczegółowe rysunki wektorowe, składające się z tysięcy obiektów, rzadko przekraczają kilkaset kilobajtów. Informacje o nich są przechowywane w formie opisowej, dzięki czemu można w nieskończoność powiększać elementy graficzne i zmieniać parametry obiektów.

Oznacza to, że przesuwanie, skalowanie, obracanie, wypełnianie i wykonywanie innych operacji nie pogarsza jakości rysunku. Jeśli chodzi o grubość linii, to przy powiększaniu lub zmniejszaniu obiektów pozostaje ona stabilna, ponieważ jest ustawiona jako stała wartość.

Grafika wektorowa umożliwia edycję rysunku warstwowo, a także nakładanie jednego obiektu na drugi, wykluczając jakąkolwiek interakcję między nimi. Jednak wykorzystanie grafiki wektorowej do tworzenia obrazów wymagających wysokiego poziomu realizmu może być nieefektywne.

Edytory grafiki wektorowej pozwalają na wykonywanie szeregu operacji: obracanie, przesuwanie, odbijanie, rozciąganie, ścięcie, zmianę kolejności warstw oraz tworzenie bardziej złożonych obiektów poprzez łączenie elementów podstawowych, a także łączenie, uzupełnianie i przecinanie zamkniętych figur.

Grafika wektorowa jest idealna do prostych lub złożonych rysunków, które nie wymagają fotorealizmu. Na przykład model grafiki wektorowej wykorzystują PostScript i PDF. Wektor i raster nie istnieją oddzielnie od siebie — można je łączyć, uzyskując ciekawe rozwiązania projektowe.

A jak wyglądała sytuacja w przeszłości?

Możliwość wykorzystania grafiki wektorowej w tworzeniu stron internetowych istniała już wcześniej. Jej historia sięga lat 1994–1995. Właśnie wtedy opracowano specyfikację i pojawiły się wtyczki do przeglądarek obsługujące formaty SVF (Simple Vector Format) oraz VRML (Virtual Reality Markup Language).

19 sierpnia 1998 roku pojawiła się alternatywa dla CGM (Computer Graphic Metafile) — WebCGM. Opracowanie to miało przyczynić się do rozszerzenia zakresu zastosowania formatu. Spośród wszystkich przedstawionych rozwiązań przetrwał jedynie VRML, który początkowo został zatwierdzony jako standard VRML97, a w 2004 roku przekształcony w X3D.

W 1998 roku firmy Sun, IBM i Adobe przedstawiły PGML, który miał służyć do prezentacji grafiki wektorowej w Internecie. Mniej więcej w tym samym czasie Microsoft i szereg innych firm zaprezentowały alternatywę — standard VML.

PGML (Precision Graphics Markup Language) to język znaczników oparty na XML. Za jego pomocą grafikę wektorową można było opisywać w postaci tekstu w formacie XML. PGML wykorzystuje model tworzenia obrazów podobny do PDF i PostScript. Po pojawieniu się SVG i VML technologia ta straciła na aktualności.

VML (Vector Markup Language) opisuje obrazy wewnątrz strony HTML w postaci tekstu, wykorzystując składnię podobną do HTML i CSS. Podstawą VML jest również XML. Technologia ta opiera się na otwartych standardach W3C, takich jak HTML 4.0, XML 1.0 i CSS 2.
 

Google Maps wykorzystywał VML do wyświetlania grafiki wektorowej w przeglądarce Internet Explorer. Jednak z czasem VML ustąpił miejsca SVG i obecnie jest uważany za przestarzały.

Później firma Microsoft zaproponowała wtyczkę Silverlight do odtwarzania animacji i treści multimedialnych, w tym grafiki wektorowej. To faktycznie oznaczało koniec historii VML.
 

O Flashu

Podczas tworzenia stron internetowych lub ich poszczególnych elementów często wykorzystywano Flash. Jest to platforma multimedialna, którą stosowano do tworzenia aplikacji internetowych i prezentacji.

Flash służył do tworzenia banerów, animacji, gier, a także do odtwarzania plików wideo i audio. Obsługiwał grafikę wektorową, rastrową oraz częściowo trójwymiarową.

Jednak Flash miał istotne wady:

• duże obciążenie procesora;
• niestabilność działania;
• problemy z bezpieczeństwem;
• brak indeksacji przez wyszukiwarki;
• uzależnienie od wtyczek.

Z tego powodu technologia ta stopniowo straciła na popularności.

„Co dalej?” czyli alternatywa dla Flasha

Jest bardzo prawdopodobne, że HTML5 znacznie poszerzy możliwości tworzenia stron internetowych. To nowy etap rozwoju HTML, który zmienia podejście do tworzenia stron internetowych.

HTML5 pozwala na stosowanie bardziej przejrzystego i logicznego kodu, a także uniezależnia się od zewnętrznych wtyczek.

Jedną z kluczowych technologii jest WebGL — narzędzie do wyświetlania grafiki 3D w przeglądarce.

HTML5 obejmuje również:

• Canvas do pracy z grafiką;
• Web Storage zamiast plików cookie;
• drag-and-drop;
• WebSockets;
• geolokalizację;
• nowe typy formularzy.

Canvas i SVG

Canvas to element HTML5 służący do tworzenia grafiki rastrowej za pomocą JavaScript. Umożliwia on dynamiczną zmianę obrazów oraz tworzenie elementów interaktywnych.

SVG (Scalable Vector Graphics) to język znaczników służący do opisywania grafiki wektorowej oparty na XML. Obsługuje skalowanie, animację i interaktywność.

Pliki SVG można łatwo edytować, dobrze się kompresują i są indeksowane przez wyszukiwarki.
 

Jak będą wyglądać strony internetowe w przyszłości

Nowoczesne technologie pozwalają tworzyć strony łączące grafikę wektorową i rastrową. Otwiera to nowe możliwości w zakresie projektowania i wydajności.

HTML5, SVG i Canvas są już dziś szeroko stosowane w tworzeniu stron internetowych.
 

Wnioski

W najbliższej przyszłości wykorzystanie HTML5, SVG i Canvas stanie się globalnym standardem. Ich możliwości nie ustępują Flashowi, a w wielu przypadkach nawet go przewyższają.

Przeglądarki aktywnie obsługują te technologie, a programiści coraz częściej wykorzystują je w swoich projektach.

Przyszłość projektowania stron internetowych opiera się na otwartych standardach, wydajności i interaktywności.