Mając prawie dziesięcioletnie doświadczenie w projektowaniu stron internetowych, natknąłem się na wiele błędnych przekonań na temat najnowszych narzędzi i technologii projektowania; ale nic nie przebije nieporozumień związanych z używaniem HTML 5.

Jako programiści mamy własny zestaw błędnych przekonań na temat pewnej technologii, ale kiedy zaczynamy korzystać z tej technologii, jesteśmy w stanie zrozumieć, o co w tym wszystkim chodzi, jakie jest jego zastosowanie i jaki jest jego zakres.

Zainspirowany niektórymi wymaganiami HTML5, z którymi się zetknąłem z biegiem czasu, chciałem dodać moje dwa grosze, by oczyścić atmosferę z pewnych aspektów HTML5. Większość nieporozumień związanych z HTML5 jest spowodowana tym, że wiele osób uważa, że ​​jest to zamiennik Flasha.

Na wstępie chciałbym wyjaśnić, że nie jest to post HTML5 a Flash. Prawda jest taka, że ​​nie można zastąpić drugiego, więc nie ma walki "my z nimi". Ale w tym jest sedno nieporozumień. Problem polega na tym, że ludzie wierzą, że HTML5 jest ulepszoną alternatywą dla Flasha. Wszystkie nieporozumienia są wynikiem tego myślenia.

Przegląd techniczny HTML 5

Piąta większa wersja języka WWW może być napisana zarówno w języku HTML, jak i XML, i została specjalnie zintegrowana ze szczegółowymi modelami przetwarzania w celu ułatwienia implementacji interoperacyjnych, a jednocześnie ulepszenia znaczników dla dokumentów HTML i aplikacji internetowych. Jego głównym celem jest rozwiązywanie zależności między platformami w branży internetowej.

Jeśli wszystko to brzmi dla ciebie greko, podzielmy to, co HTML5 robi na język, który jest łatwy do zrozumienia, bez wchodzenia w skomplikowane szczegóły techniczne:

  • HTML5 to zaktualizowany język znaczników zgodny ze standardami XML.
  • Ideą HTML5 jest zapewnienie spójności w wydajności i wynikach produktów internetowych we wszystkich systemach operacyjnych, w tym iOS, Android, Windows i wielu innych.

Najczęstsze nieporozumienia dotyczące HTML są ukierunkowane na projekt. Przyjrzyjmy się zatem, co oferuje HTML 5 z punktu widzenia projektu.

  • Wbudowana obsługa audio i wideo, która pomaga osadzać multimedia bezpośrednio w dokumentach HTML, sprawiła, że ​​użycie zewnętrznych wtyczek stało się zbędne.
  • HTML5 obsługuje elementy SVG i Canvas dla animacji.
  • Oferuje projektantom element canvas, który ułatwia renderowanie grafiki 2D w "trybie natychmiastowym". Oznacza to, że obiekty graficzne są bezpośrednio wyświetlane na ekranie.
  • Został opracowany z myślą o tworzeniu interaktywnych aplikacji, które są treściwe i nie tylko przyjazne dla użytkownika, ale również przyjazne SEO.

Dlaczego ludzie uważają, że HTML5 jest zamiennikiem Flasha?

Flash to multimedialny program do tworzenia treści, który pomaga dostarczać interaktywne i angażujące treści internetowe, które zapewniają użytkownikom bogate wrażenia internetowe. Jest to bardzo popularna platforma, która dociera do 99% przeglądarek na komputery stacjonarne i przenośne oraz oferuje ten sam zestaw wydajności technicznej i wizualnej we wszystkich przeglądarkach. Ma jednak jedną istotną wadę, która nie jest skutecznie obsługiwana przez mobilne systemy operacyjne, takie jak iOS.

Do tego jest HTML5.

Teraz spójrz na to stwierdzenie bardzo uważnie. Biorąc pod uwagę jego wartość nominalną, może to oznaczać, że HTML5 jest substytutem Flasha, jeśli chodzi o tworzenie wysoce interaktywnych aplikacji na platformę iOS.

Scenariusze, w których klienci proszą swoich programistów o replikowanie całej aplikacji Flash w HTML5, na konkretne urządzenie mobilne lub tablet, są dość powszechne. Problem polega na tym, że platformy programistyczne i ich funkcjonalności nie powinny być brane pod uwagę. Tak, jedną z głównych zalet HTML 5 jest ułatwienie tworzenia aplikacji działających na wszystkich systemach operacyjnych telefonu komórkowego, a nie kodowanie nowej aplikacji dla każdego mobilnego systemu operacyjnego.

Ale to nie znaczy, że jest to zamiennik Flasha.

Popularne nieporozumienia związane z HTML5

Przeprowadzę Cię przez serię scenariuszy, które ilustrują błędne przekonania ludzi na temat HTML 5.

Scenariusz 1 : Konwersja istniejącego narzędzia do projektowania opartego na technologii Flash na HTML 5

Nieporozumienie : HTML 5 nie może maskować obrazów w sposób podobny do Flash; jego maskowanie obrazu nie jest ani proste, ani gładkie. Co ważniejsze, Flash jest szybszy i jeśli chodzi o określone funkcje, takie jak obliczanie obszarów i średnic; Flash jest o wiele lepszą opcją. Funkcje takie jak przeciąganie / skalowanie i powiększanie również działają lepiej we Flashu niż HTML 5.

Scenariusz 2 : Konwertuj a Biblioteka audio oparta na technologii Flash do biblioteki kompatybilnej z tabletem HTML5.

Nieporozumienie : HTML5 oferuje wsparcie audio i wideo, ale z pewnymi ograniczeniami. Ta strona internetowa oparta na Flashie miała prawie 800 plików mp3; dzięki czemu jest to aplikacja na dużą skalę. Problem polega na tym, że chociaż Mozilla obsługuje format .ogg, a chrome / safari obsługuje format .mp3, więc jeśli preferowana przeglądarka użytkownika to IE8, Flash Audio Player staje się koniecznością. Ograniczone rozszerzenia dostępne w HTML5 oznaczają, że jedynym rozwiązaniem jest konwersja wszystkich plików audio na dwa formaty - mp3 i ogg / wave. Konwersja 800 plików do dwóch formatów plików nie jest tylko czasochłonnym procesem, ale również zwiększa pamięć serwera.

Rezultatem jest aplikacja na iPad, która spowalnia działanie bloków.

Scenariusz 3 : Konwertuj a Strona Flash na stronę opartą na HTML5.

Nieporozumienie : istnieje błędne przekonanie, że HTML5 może obsłużyć różnego rodzaju animacje, nawet te o dużej skali. Ale nie może, przynajmniej jeszcze nie. Jego zdolność do oferowania efektów 3D i uruchamiania wielu animacji w tym samym czasie jest poważnie ograniczona. Jest to konfiguracja systemu, która określa wydajność animacji HTML5 i jak dotąd udowodniono, że jest zjadaczem pamięci. Istnieje duże prawdopodobieństwo, że użycie HTML5 wpłynie na wydajność strony, jeśli zostanie poproszony o zrobienie dużej ilości animacji. Albo nastąpi awaria witryny, albo jej prędkość zostanie zakłócona. W powyższym przypadku witryna HTML 5 może nie oferować takiej samej wydajności.

Obalanie powszechnych nieporozumień HTML 5

Po pierwsze, HTML 5 oferuje bardzo wygodne rozwiązanie audio i wideo z kilkoma zaawansowanymi funkcjami. Wszystko dobrze i dobrze, ale to, co ludzie ignorują, to fakt, że te pliki audio i wideo są odtwarzane w przeglądarkach. Każda przeglądarka ma wbudowane wtyczki do audio i wideo, ale różne przeglądarki obsługują różne wersje audio i wideo. Z tego powodu trudno jest spełnić wymagania wszystkich przeglądarek.

Po drugie, elementy SVG i Canvas zdecydowanie ułatwiły programistom implementację i integrację animacji 2D, ale zaobserwowano, że ta animacja ma szkodliwy wpływ na wydajność witryny. Ponadto HTML5 okazuje się słaby, jeśli chodzi o obsługę animacji 3D, co powoduje, że programiści nie mogą replikować całej witryny Flash z podobną wydajnością w HTML5. Zawsze będą ograniczenia.

Po trzecie, możesz korzystać z bogatych aplikacji internetowych HTML5, ale nie należy rozumieć, że oferują one tę samą markę wydajności i funkcjonalności, jakie może zaoferować Flash / Flex, na przykład Flash może bezpośrednio komunikować się z usługami zdalnymi, podczas gdy HTML5 nie może .

Teraz, gdy wiesz już, czego nie można zrobić w HTML5, pozwól, że przedstawię ci niewielką listę rzeczy, które może zrobić HTML5, i które w rzeczywistości mogą bardzo dobrze. Pomoże to w dużym stopniu zmniejszyć błędne przekonania.

  • Możesz stworzyć pojedynczą aplikację działającą na iPadzie, iPhonie, Windowsie itp. Innymi słowy, ułatwia ona niezależność od platformy / urządzenia - jest to ogromna korzyść sama w sobie.
  • Pomaga opracować pojedynczą witrynę internetową działającą jednocześnie na tablecie, telefonie komórkowym i komputerze.
  • Jeśli jest dobrze używany i sposób, w jaki ma być używany, może poprawić wydajność witryny.
  • Umożliwia używanie tagów audio i wideo na wszystkich platformach, ale przygotuj się na ciężką pracę.
  • Wideo, audio i obrazy są wpisane wprost w kody, eliminując potrzebę stosowania oprogramowania innych firm.
  • Szybszy czas ładowania w porównaniu ze starszą wersją z powodu wdrożenia WebSockets.
  • Oferuje świetne animacje wektorowe do grafiki i efektów świetlnych, ale nie oczekuj księżyca, słońca i gwiazd, jeśli chodzi o animacje; W tym aspekcie Flash jest bardzo drogi.
  • Zapewnia odpowiednią wbudowaną walidację formularzy i deklaracje typów, aby zaoferować konkretną obsługę klawiatury.

HTML 5 zdecydowanie ma potencjał do tworzenia zaawansowanego Flasha na więcej sposobów niż jeden, ale obecnie trwają prace. Nawet w swoim obecnym awatarze pomaga uczynić aplikacje mobilnymi bardziej dostępnymi, a programiści mogą teraz tworzyć uniwersalne aplikacje dla różnych telefonów komórkowych. Ponadto nie ma wątpliwości, że oferuje większą elastyczność w zakresie kreatywności strony internetowej. Na razie wystarczy. To, co dzieje się w przyszłości, to czysta hipoteza.

Zastrzeżenie: Wszystkie ilustracje użyte w tym artykule służą jedynie wyjaśnieniu istotnych scenariuszy.

Czy już wdrażasz niektóre funkcje HTML5, które nie są szeroko obsługiwane? Jakie funkcje najbardziej oczekujesz na przyjęcie? Daj nam znać w komentarzach!