Studium przypadku – HTML5 w deviantART muro

Mike Dewey
Mike Dewey

Wstęp

7 sierpnia 2010 roku zespół deviantART miał swoje 10. urodziny. Z okazji naszych urodzin uruchomiliśmy narzędzie do rysowania HTML5 o nazwie deviantART muro. Można go używać jako samodzielnej aplikacji internetowej, a także jako proste narzędzie do rysowania, które służy do dodawania zdjęć do komentarzy na forum.

Społeczność deviantART z wielkim entuzjazmem podeszła do nowego narzędzia do rysowania. Samo to narzędzie generuje teraz tyle samo ruchu co niektóre witryny o przyzwoitej wielkości. Od momentu wprowadzenia na rynek nowy rysunek jest przesyłany przy użyciu deviantART muro mniej więcej co 5 sekund. To tylko liczba ukończonych rysunków. Wiele z nich już zostało uruchomionych i nie zostało zapisanych.

Z tego artykułu dowiesz się, jak wykorzystujemy HTML5, dlaczego to zrobiliśmy i co udało mi się odkryć podczas tworzenia jednej z pierwszych w pełni funkcjonalnych aplikacji HTML5 przeznaczonych dla dużych witryn.

Moje tło

Pod koniec 2005 roku byłem jednym z programistów odpowiedzialnych za narzędzie do rysowania używane w narzędziu Draw Here. Narzędzie to działało jako „web graffiti” uruchomione przez skryptozakładki. Służyła ona do rysowania obrazów na stronach internetowych. Aplikacja Draw Here została początkowo utworzona w formacie SVG (właśnie wyszedł Firefox w wersji beta 1.5 i był jedną z pierwszych przeglądarek obsługujących SVG).

W Internet Explorerze tworzyliśmy obraz SVG w tle, ale renderowaliśmy rysunek w VML. W tym okresie WebKit nie obsługiwał SVG, dlatego przeniósłem kod do renderowania SVG za pomocą obiektu canvas, (była to nowa technologia dostępna wtedy tylko w WebKit). W pewnym momencie stworzyłem nawet port, aby kod SVG można było renderować w starszych przeglądarkach za pomocą wklejonych ze sobą elementów div. (To był oczywiście żart, mówiąc o tym, że można to zrobić, a obserwacja była powolna).

W swojej świetności aplikacja Draw Here była wykorzystywana do tworzenia około 100 rysunków dziennie. Była na tyle kompletna, że mogłaby nazywać się nie tylko eksperymentem, ale nie dopracowano jeszcze jakiejś głównej aplikacji internetowej. W połowie 2006 r. porzucono projekt, choć witryna nadal nie jest do tego przygotowana, głównie z powodu uśmiechu.

Technologie wykorzystywane przez deviantART muro

Ze względu na to, że od samego początku korzystałem z różnych technologii HTML5, poproszono mnie o zostanie głównym programistą deviantART muro. Każdy, kto czyta ten artykuł, prawdopodobnie wie, dlaczego zdecydowaliśmy się używać HTML5, a nie technologii opartych na wtyczkach, takich jak Silverlight czy Flash. Zależało nam na czymś solidnym, a jednocześnie opartym na otwartych standardach.

Jak wybrać format Canvas i SVG

Zdecydowaliśmy się stworzyć warstwę rysunkową w stylu canvas. Niektórzy mogą zastanawiać się, kiedy użyć obrazu canvas, a kiedy SVG. Możliwości, jakie można wykonać za pomocą tych 2 technologii, w dużym stopniu się pokrywają – jak pokazało Draw Here, obie te technologie można wykorzystać do stworzenia aplikacji do rysowania.

Okazało się, że SVG świetnie nadaje się do zachowania uchwytów do narysowanych obiektów. Jeśli na przykład chcesz, żeby użytkownik mógł narysować linię, a potem przeciągnąć jej fragmenty, by zmienić jej kształt, użycie SVG nie jest proste. Jednak to samo jest bardzo niezręczne, gdy używasz płótna.

Gdy używasz płótna, najpierw umieszczasz w nim obiekty, a potem o tym zapominasz. Puste płótno i rysowane przez godzinę działają dokładnie tak samo w kodzie i mają mniej więcej taki sam ślad pamięci. Choć programy do rysowania rastrowego zwykle dobrze sprawdzają się w połączeniu z ogniem i zapominają technologię, to niektóre z nich są trudniejsze. Na przykład utworzenie funkcji szybkiego cofania jest znacznie trudniejsze w obszarze canvas niż w SVG. W SVG wystarczy mieć uchwyt do kilku ostatnich umieszczonych wierszy, a cofanie zmian polega jedynie na ściągnięciu tych obiektów. W przypadku elementów canvas nie wiadomo, co było pod nią, więc usunięcie linii wymaga ponownego narysowania obszaru, na którym się znajdowała.

Gdy zdecydowaliśmy się na użycie HTML5 w odbitkach na płótnie, zdecydowaliśmy się wykorzystać inne dodatki. Na przykład w wyniku użycia funkcji localStorage śledziliśmy ustawienia pędzla użytkownika. Dzięki temu, gdy różne pędzle zostaną skonfigurowane dokładnie tak, jak są im potrzebne, będą mogli wrócić do tych ustawień, gdy następnym razem będą używać naszego narzędzia. LocalStorage oznacza, że nie musimy używać naszego pliku cookie ani włączać żadnych wizyt po stronie serwera, aby uzyskać te ustawienia.

Korzystanie z Canvas

W ciągu ostatnich 5 lat firma Canvas bardzo się zmieniła. W przypadku aplikacji Draw Here nie opublikowaliśmy portu na płótnie, ponieważ nie było ono zbyt wydajne. Teraz można pewnie powiedzieć, że ma większą skuteczność, niż Ci się wydaje. Usuwanie dużej części płótna i ponowne rysowanie skomplikowanych kształtów zwykle odbywa się szybciej niż myśli człowieka. Jedyne, co zauważam, że czasami działanie działa zbyt wolno, to próbkowanie pikseli za pomocą metody getImageData(). Szybkość działania oczywiście zależy od rozmiaru obszaru roboczego, ale w przypadku dużego obszaru roboczego wykonanie polecenia getImageData() w niewłaściwym momencie może trwać dość długo, aby użytkownik mógł poczuć, że aplikacja reaguje wolno.

Po przeczytaniu różnych samouczków na temat płótna wydawało mi się, że jest to coś, co należy używać oszczędnie, może raz czy dwa na stronie. Nie wiem, czy wszyscy to rozumieją, ale ja tak, dlatego, gdy zaczynaliśmy kodować deviantART muro, używałem go z umiarem. Po pewnym czasie zauważyliśmy, że jest wiele miejsc, w których płótno pozwala zaoszczędzić wiele wysiłku. Na przykład makieta aplikacji określała, że powinien istnieć selektor kolorów, w którym 2 nakładające się na siebie trójkąty wskazują kolor podstawowy i dodatkowy:

Selektor kolorów
Selektor kolorów

Właśnie wtedy zaczęłam myśleć o tym, jak utworzyć ten mały element interfejsu za pomocą tradycyjnego kodu HTML i CSS. Osoby, które świetnie radzą sobie z hakowaniem CSS, mogą wskazać, jak to wszystko można zrobić w CSS, ale trójkątny kształt 2 części, które zmieniają kolor, nie jest to tak oczywiste.

Kiedy wpadłem na pomysł, żeby użyć kanwy, złożyłem widżet z jednym elementem DOM i kilkoma wierszami kodu JavaScript. deviantART muro używa węzłów kanwy w różnych miejscach. Każda warstwa to płótno, a zmiana kolejności warstw wystarczy zmienić kolejność nakładania warstw. Paleta „nawigatora” powiększenia, która pokazuje zmniejszony widok obszaru rysowania, to po prostu inny obszar roboczy, który czasami wywołuje funkcję rysowaniadImage(), używając obszarów roboczych warstw jako obrazów źródłowych. Nawet kursor w obszarze rysowania (dwukolorowy okrąg, który dostosowuje rozmiar w zależności od rozmiaru pędzla i powiększenia) to płótno unoszące się pod myszą.

Ponieważ w przypadku innych technologii HTML5 nasze rozwiązania były bardziej liberalne niż w przypadku innych technologii HTML5, biblioteka Google ExplorerCanvas umożliwia symulowanie obiektów canvas w Internet Explorerze. To prowadzi do następnej sekcji.

Internet Explorera (IE)

Głównym powodem, dla którego duże witryny nie używają jeszcze HTML5, jest to, że nie chcą stracić użytkowników Internet Explorera. Gdy większość programistów słyszy, że deviantART stworzył aplikację do rysowania HTML5, na pewno większość z nich wie, że to „o co chodzi z IE?”.

Na początku zdecydowaliśmy, że dołożymy wszelkich starań, aby wszystko działało w Internet Explorerze, ale staramy się osiągnąć najmniejszy wspólny mianownik stylu tworzenia stron internetowych. Ponieważ społeczność internetowa uznała, że strona nie może zostać uruchomiona, dopóki nie będzie wyglądać tak samo w każdej znanej przeglądarce, więc użytkownicy nie są w stanie określić, kiedy w przeglądarce brakuje. Z punktu widzenia przeciętnego użytkownika problemy z szybkością stron są wadliwe w połączeniu z internetem, a każda strona wyświetla się mniej lub bardziej tak samo. Decydują oni o swojej ulubionej przeglądarce na podstawie dowolnych drobnych elementów interfejsu, takich jak kolor przycisku Wstecz.

Postanowiliśmy stworzyć każdą fajną funkcję, która przychodzi Ci do głowy, wykorzystując specyfikację HTML5, i postaramy się umożliwić działanie w Internet Explorerze, a jeśli to nie zadziała, wyświetlimy komunikat z informacją, że funkcja jest niedostępna, bo ich przeglądarka nie obsługuje jeszcze standardu internetowego.

Początkowo próbowaliśmy korzystać z technologii Google ExplorerCanvas (exCanvas). Potrafi zaskakująco dobrze naśladować większość rzeczy. Ma jednak jedną wadę. Każda kreska na obszarze roboczym jest obiektem DOM w bazowej translacji VML. Nie ma problemu, ale w przypadku większości efektów z użyciem płótna niektóre pędzle deviantART muro tworzą kształty z nakładania na siebie wielu pociągnięć. Gdy Internet Explorer poradzi sobie z formatem VML, który zawiera tysiące węzłów – nawet w szybkim komputerze – przewraca i umia. Z tego względu w przypadku wielu wywołań rysowania trzeba było programować w rzeczywistym formacie VML oraz stosować sztuczki polegające na łączeniu węzłów w jednym miejscu i używaniu polecenia przenoszenia do określenia, gdzie powinny być luki. Wiele elementów sterujących i elementów interfejsu korzysta z tagów canvas, ponieważ te drobne zastosowania zwykle dobrze się sprawdzają w obiekcie exCanvas.

Zasugerowaliśmy użytkownikom, aby nie tylko exCanvas, ale i niektóre elementy działały w przeglądarce Internet Explorer, po zainstalowaniu wtyczki Google Chrome Frame. Google Chrome Frame to wtyczka, która pozwala osadzać silnik renderowania Google Chrome w przeglądarce Internet Explorer. Z punktu widzenia użytkownika nadal korzysta on z przeglądarki, którą zna, ale pod osłoną nasza strona jest renderowana za pomocą funkcji HTML5 Chrome i szybszego kodu JavaScript.

Wiedziałem, że przeniesienie elementów do Chrome Frame powinno być łatwe, ale nie wiedziałem, że to aż tak proste. Wystarczy dodać metatag i to wszystko w IE.

Podsumowanie

Praca z nowymi technologiami w specyfikacji HTML5 to czysta przyjemność. Muszę przyznać, że wszystkie funkcje, z których korzystałam, są już gotowe. Nawet jeśli potrzebne jest, aby w IE wszystko działało bez problemów, w IE można zrobić wiele różnych rzeczy, łącząc obiekty canvas i exCanvas. Zaskakująco jest też napisanie warstwy translacji między SVG i VML. Kiedy zaczniesz korzystać z technologii, to jak wejść do zupełnie nowego świata.

Źródła