Autorzy:

Tomasz Markowski, Artur Kośmider

Instytut Logistyki i Magazynowania (ILiM)

http://www.ilim.poznan.pl/

Współpraca merytoryczna:

Polska Agencja Rozwoju Przedsiębiorczości (PARP)

Platforma - Wspieramy e-biznes -  www.web.gov.pl

Wydawca:

Polska Agencja Rozwoju Przedsiębiorczości (PARP)

ul. Pańska 81/83

00-834 Warszawa

www.parp.gov.pl

Wydanie I

Publikacja bezpłatna

Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Rozwoju Regionalnego

Wspieramy e-biznes www.web.gov.pl

Copyright © by Polska Agencja Rozwoju Przedsiębiorczości Warszawa 2012. Wszelkie prawa zastrzeżone. Żaden fragment nie może być wykorzystywany w jakiejkolwiek formie ani przekładany na język mechaniczny bez zgody PARP.

Spis treści

1              Wprowadzenie. 3

2              Wstęp do HTML5.. 4

2.1      Ewolucja HTML do wersji piątej 4

2.2      Prostota i przejrzystość jako podstawa składni 4

2.3      Nowe elementy HTML5.. 4

2.4      Ekosystem języka – CSS i JS.. 5

3              Wskazówki projektowe. 7

3.1      Tworzenie stron i aplikacji z użyciem HTML5 i CSS.. 7

3.2      Projektowanie alternatywnych układów stron i aplikacji dla różnych urządzeń.. 7

3.3      Wykorzystanie popularnych bibliotek JS.. 8

3.4      Przykłady.. 8

4              Kompatybilność i dostępność. 11

4.1      Kluczowe ograniczenia aplikacji nienatywnych.. 11

4.2      Przydatne narzędzia. 11

5              Podsumowanie. 13

6              Słownik.. 14

1           Wprowadzenie

HTML5 to nowy, jeszcze oficjalnie nie zaprezentowany, standard języka będącego podstawą tworzenia stron www. Jego powstanie to wynik kooperacji World Wide Web Consortium (W3C) z Web Hypertext Application Technology Working Group (WHATWG). Stanowi długo oczekiwane rozwinięcie standardu HTML4 oraz XHTML1. Powstanie HTML5 poprzedzały pracy nad stworzeniem XHTML2, który miał zastąpić XHTML1, ale prace nad nim porzucono w lipcu 2009 roku. Od publikacji poprzedniego, HTML 4.0.1, minęło ponad 10 lat, a w tym czasie sposób prezentacji treści w internecie przeszedł poważne zmiany, nowa definicja stała się po prostu niezbędna. Nowe zasady, nad którymi pracowały obie organizacje, to oparcie się wyłącznie na: HTML, CSS, DOM i JAVASCRIPT oraz ograniczenie zewnętrznych pluginów. W założeniach HTML5 miał pozwolić na tworzenie serwisów niezależnie od sprzętu i oprogramowania wyświetlającego. Wprowadzone uproszczenia widać w wielu elementach nowego standardu. Deklaracja typu dokumentu dla HTML5 została uproszczona do postaci <!DOCTYPE html>, a podstawowa struktura dokumentu jest bardziej przejrzysta w stosunku do poprzednich wersji. Najciekawsze elementy jakie wprowadzono to <canvas>, umożliwiający rysowanie 2D, <video> i <audio> do odtwarzania zawartości multimedialnej, a także nowe tagi dla określenia zawartości strony: <section>, <article>, <footer>, <header>, <nav> i <aside>.

HTML5 wspierany jest przez coraz więcej przeglądarek i niektóre z nich zbliżają się do pełnej obsługi standardu, mimo że nie jest on jeszcze oficjalnie opublikowany. Aktualny stan wsparcia można zobaczyć na stronie: html5test.com, na której można również przetestować własną przeglądarkę.

Nowy język prezentuje łagodne podejście do swoich poprzedników oraz wykorzystuje ich doświadczenia. Elementy z poprzednich wersji standardów nie są deprecjonowane, ale są oznaczane jako przestarzałe i nie zaleca się ich używania. Kompletny wykaz różnic pomiędzy HTML w wersji 4 a HTML w wersji 5 można znaleźć na stronie W3C (http://www.w3.org/TR/html5-diff/). Co istotne, HTML5 wprowadza standaryzację błędów - dzięki czemu wszystkie przeglądarki będą je w przyszłości obsługiwać dokładnie w taki sam sposób.

2           Wstęp do HTML5

2.1         Ewolucja HTML do wersji piątej

Historia języka HTML zawiera się w ostatnich 30 latach. Za jego twórcę uważany jest Tim Berners-Lee, pracownik CERN, który jako pierwszy zaproponował wykorzystanie mechanizmu hypertextu do połączenia fizycznie oddzielnych dokumentów, znajdujących się w różnych miejscach, w różnych komputerach, poprzez system aktywnych odnośników, które razem tworzą łatwo dostępną pajęczynę i ułatwiają współpracę naukowców z różnych ośrodków. Pierwsza publicznie dostępna definicja HTML TAGS została opublikowana w 1991 roku i opierała się na zasadach znanych z SGML’a, a rozszerzała go przede wszystkim o adresowalne odnośniki do dokumentów zewnętrznych. Ponad dwudziestoletnia ewolucja 29 tagów, z których przetrwało zaledwie 13, rozszerzyła początkową definicję do 105 tagów w aktualnej piątej wersji języka HTML, kładąc nacisk na uproszczenie struktury i ułatwienia dla publikowania treści multimedialnych.

Prześledźmy pokrótce najważniejsze wydarzenia w historii języka:

§    1989: Tim Berners-Lee wymyśla sieć z html’em jako językiem publikacji,

§    1994: Internet Engineering Task Force (IETF) powołuje grupę roboczą HTML, powstaje specyfikacja HTML 2 oraz formuje się World Wide Web Consortium (W3C),

§    1995: Opublikowano draft HTML 3 i w tym samym roku pojawia się Microsoft Internet Explorer, a Netscape publikuję propozycje użycia ramek; Pojawiają się również propozycje arkuszy styli,

§    1996: W3C publikuje draft nt. skryptów,

§    1997: Opublikowano standard HTML 3.2,

§    1998: pojawia się HTML 4.0 wskazany rekomendacją W3C,

§    Od 1998 roku obserwujemy powolną ewolucję języka i uzupełnianie niezbędnych funkcji przez oprogramowanie zewnętrze, poprzez pluginy, rozszerzenia i moduły. Rozwijają się trendy oparcia serwisów i aplikacji o kaskadowe arkusze stylów. Na podstawie oczekiwań użytkowników, trendów rozwojowych i propozycjach webdeveloperów tworzone są zasady HTML5.

2.2         Prostota i przejrzystość jako podstawa składni

Najnowsza definicja html wykorzystuje doświadczenie poprzednich wersji standardu i łączy je z oczekiwaniami środowiska. Zaimplementowano reguły, które powstawały w trakcie tworzenia serwisów, przenosząc najczęściej używane elementy struktury strony o poziom wyżej, z postaci identyfikatorów warstw lub stylu do rangi tagów. Zaobserwowano, że większość stron posiada wśród warstw takie o nazwach odnoszących się do ich typowego położenia i funkcji: header, nav, content, footer, itp. Stwierdzono, że elementy te powtarzają się tak często i są tak charakterystyczne dla układu stron, iż warto przenieść je do semantyki i przekształcić do postaci tagów. Ich pojawienie się wpływa na ujednolicenie struktur serwisów i pociąga za sobą znaczne ułatwienia i w efekcie skrócenie oraz uproszczenie kodu.

2.3         Nowe elementy HTML5

Zgodnie z najnowszym draftem W3C (opublikowanym 29 marca 2012, (http://www.w3.org/TR/2012/WD-html5-20120329/) spora grupa elementów HTML5 wynika z założeń uporządkowania struktury dokumentu, a ich nazwy, jak wspomniano wyżej, odzwierciedlają najczęściej pojawiające się nazwy warstw stosowanych w dokumentach utworzonych w starszych wersjach języka html. Nowe elementy sugerują uporządkowanie witryny wg najczęściej stosowanego układu treści, zapewniając przejrzystość kodu, a za pomocą dodatkowych atrybutów pozwalając stworzyć spójny składniowo dokument.

Na rysunku 1 (źródło: A Preview of HTML 5, Lachlan Hunt) prezentujemy najbardziej typowe ułożenie struktur witryny i powiązanych z nią tagów.

Rys. 1. Schemat najbardziej typowego ułożenia nowych elementów strukturalnych HTML5

Jej główne elementy to:

§    ARTICLE - który reprezentuje niezależny fragment zawartości dokumentu, analogicznie do artykułu, np. w gazecie lub blogu,

§    SECTION – sekcja, która reprezentuje część składową dokumentu lub aplikacji, może być używana w połączeniu ze znacznikami nagłówków (h1 - h6) i wskazywać elementy strukturalne dokumentu,

§    ASIDE - to fragment treści, który jest tylko nieznacznie powiązany z treścią głównego dokumentu,

§    HEADER - to sekcja wstępna dokumentu, zawierająca wprowadzenie i / lub nawigację,

§    FOOTER - reprezentuje stopkę dokumentu, może zawierać np. informacje o autorze, prawach autorskich itp.,

§    NAV - fragment kodu strony, w którym zawarta została funkcjonalność nawigacyjna.

Pozostałe definicje nowych elementów wprowadzają szereg ułatwień, usprawnień i rozszerzeń w zakresie publikowania treści multimedialnych. Najważniejsze z nich to CANVAS, VIDEO i AUDIO - wprowadzają do dokumentu treści multimedialne za pomocą dedykowanego API, ale umożliwiają również wykorzystanie interfejsu użytkownika dostarczonego przez agenta użytkownika.

Każde z API posiada dodatkowo odpowiednie parametry sterujące, które pozwalają na kontrolę treści. W przypadku video jest to szczególnie duży zestaw parametrów, np. TRACK - jako wskazanie dodatkowych ścieżek video, EMBED umożliwia zastosowanie pluginów,  MARK wskazuje na przebieg tekstu, a PROGRESS reprezentuje postęp w kompletacji zadania.

2.4         Ekosystem języka – CSS i JS

HTML5, to jak już wspominaliśmy, w założeniach ograniczenie zewnętrznych pluginów na rzecz pełnej integracji z CSS oraz JAVASCRIPT i DOM. Przeglądarki korzystające z HTML5 wspierają również CSS3, do którego przeniesiony został ciężar określenia widoku prezentacji. Każda warstwa, element i wystąpienie ma swoją deklarację w arkuszu stylów. Odwołanie do wybranego arkusza pozwala wizualizować konkretny dokument w konkretnej postaci. Takie podejście do zagadnienia prezentacji danych pozwala na wiele dalszych operacji, które ułatwiają realizację założeń języka - czyli prostoty, funkcjonalności, mobilności i użyteczności dla odbiorcy. Podstawową funkcjonalność, jaką można osiągnąć przez CSS to zmiana widoku w zależności od urządzenia i oprogramowania wyświetlającego witrynę. Możemy skalować grafiki, zmieniać wielkości, położenie i inne parametry tekstów. Możemy kompletnie zmienić układ witryny. Użycie CSS umożliwia oddzielenie warstwy treści od warstwy prezentacji. Ten mechanizm pozwala przy niezmienionej treści na dowolne modyfikacje warstw prezentacji, w zależności od potrzeb.

Zastosowanie dodatkowo JAVASCRIPT w połączeniu z CSS i HTML5 umożliwia dynamiczne wykorzystanie CSS i w istotny sposób redukuje zapotrzebowanie na zewnętrzne pluginy. Wszechobecny Flash, jest z powodzeniem zastępowany przez odpowiednie skrypty JS w połączeniu z CSS. Integracja JS i CSS jest tak znacząca, że zaczynamy mówić o ekosystemie tworzonym przez oba narzędzia.  Ich współpraca otwiera wielkie możliwości przy zachowaniu niewielkich ilości danych. Należy w tym miejscu podkreślić, że zastąpienie np. FLASH, kombinacją skryptów JS i arkuszy CSS pozwoliło na znaczną redukcję niezbędnych do załadowania danych, a dodatkowo sposób organizacji komponentów pozwala na ich stopniowe ładowanie, mimo wyświetlania już w podstawowej wersji strony. To ma bardzo istotne znaczenie w przypadku prezentacji na urządzeniach mobilnych.

Bardzo popularna biblioteka na potrzeby JAVASCRIPT to JQUERY (jquery.com), wykorzystywana w bardzo szerokim zakresie do budowania skryptów w JAVASCRIPT, ułatwiająca przetwarzanie dokumentów, obsługę zdarzeń, animowanie oraz interakcje AJAX. Bibliotekę można wykorzystywać na podstawie otwartej licencji MIT.

W internecie można znaleźć również wiele innych bibliotek, które podobnie jak jQuery ułatwiają tworzenie interaktywnych serwisów www. Szerszą listę dostępnych bibliotek można znaleźć na stronie http://en.wikipedia.org/wiki/List_of_JavaScript_libraries. Zachęcamy również do samodzielnego poszukiwania rozwiązania problemu projektowego i tworzenia bibliotek własnych oraz udostępniania ich społeczności internetowej.

3           Wskazówki projektowe

3.1         Tworzenie stron i aplikacji z użyciem HTML5 i CSS

Jedną z głównych zalet serwisów zaprojektowanych w HTML5 jest to, że wykorzystując jego podstawowe elementy można z łatwością adaptować się do warunków wyświetlania, identyfikować urządzenia i oprogramowanie - odpowiadać na żądania odbiorcy i prezentować treść zawsze w sposób przejrzysty i przyjazny dla użytkownika. Uzyskanie takiego efektu wymaga połączenia metod dostarczanych przez HTML, CSS i JAVASCRIPT oraz wyeliminowania zewnętrznych pluginów, które utrudniają np. skalowanie oraz nie są obojętne na środowisko działania (tu sztandarowym przykładem ponownie będzie animacja flash). Definicja języka HTML5 dostarcza elementów, które w połączenie z CCS i JAVASCRIPT z powodzeniem pozwalają zastąpić dotychczas używane pluginy.

O czym należy pamiętać? HTML5 nie jest skończonym, w pełni wspieranym standardem. Projektant przed realizacją musi zastanowić się jakich funkcji będzie potrzebował i czy są one wspierane przez przeglądarki, na których będą wyświetlane. Niemniej jednak zalety korzystania z HTML5 są na tyle istotne, że już dziś warto projektować aplikacje i serwisy w nowym standardzie. Ich dostępność na różnych urządzeniach jest nieosiągalna w żaden inny sposób.

Podstawowe narzędzia projektanta programisty to edytor tekstowy oraz program graficzny. Oczywiście istnieją bardziej zaawansowane zestawy, lepsze i gorsze edytory, ale do rozpoczęcia pracy nad stroną wystarczą zupełnie darmowe, podstawowe narzędzia. Rozpoczęcie pracy nad układem strony i jej strukturą można zacząć od poszukiwań podobnej strony, przyjrzeniu się jej źródłu i skorzystaniu z dobrych praktyk.  W przypadku HTML i CSS w bardzo prosty sposób można skorzystać z doświadczeń innych projektantów, ponieważ kod źródłowy strony i arkusza stylów jest widoczny dla użytkownika i można go obejrzeć za pomocą przeglądarki. Warto zajrzeć do serwisów promujących nowe, kreatywne rozwiązania i czerpać z nich inspirację. W ten sposób można uczyć się od najlepszych.  Pamiętajmy o oddzieleniu warstwy treści i prezentacji w plikach css i html. W ten sposób stworzona przez nas witryna będzie łatwo dostępna i zawsze czytelna oraz łatwo będzie zapewnić jej poprawne wyświetlania na różnych urządzeniach końcowych.

3.2         Projektowanie alternatywnych układów stron i aplikacji dla różnych urządzeń

Alternatywne układy stron, dopasowanie do wielkości ekranu, zmiana akcentów witryny, modyfikacja nawigacji i podobne zabiegi wykonywane są od dłuższego czasu. Pojawienie się urządzeń mobilnych wymusiło tworzenie skalowalnych rozwiązań. W takich przypadkach z pomocą już wcześniej przychodził CSS, umożliwiając tworzenie różnych arkuszy stylów dla różnych przeglądarek, rozdzielczości lub urządzeń. Projektanci czasem tworzyli osobną stronę dla urządzeń mobilnych, często jednak z pomocą CSS dopasowywali elementy graficzne i wielkość czcionki do zmniejszonego rozmiaru ekranu lub innych metod wyświetlania zaimplementowanych w różnych przeglądarkach. HTML5 i CCS3 rozszerzają te funkcje, dodają nowe elementy, a przede wszystkim metody media queries.  Do najważniejszych elementów w CSS3 zaliczamy:

§    selektory,

§    model pudełkowy,

§    tła i krawędzie,

§    efekty tekstowe,

§    transformacje 2D/3D,

§    animacje,

§    układy kolumn,

§    interfejs użytkownika.

Wykorzystując media queries możemy przepytać przeglądarkę o warunki w jakich serwis będzie wyświetlany. Programista może otrzymać informację o szerokości i wysokości okna przeglądarki oraz ekranu, jego rozdzielności, ilości kolorów jakie ekran może wyświetlić, ale także o orientacji poziomej lub pionowej. Te parametry warunkują użycie dalszych definicji i umożliwiają responsywne zachowanie witryny.

3.3         Wykorzystanie popularnych bibliotek JS

Jak wspominaliśmy w rozdziale 2.4, istnieje wiele gotowych do wykorzystania bibliotek dla JAVASCRIPT. Jedną z najczęściej wykorzystywanych jest jQuery, szerszą listę przydatnych bibliotek można odnaleźć m.in. w Wikipedii, (np. popularne biblioteki powiązane z AJAX: http://pl.wikipedia.org/wiki/AJAX), ale można również szukać konkretnego skryptu bezpośrednio w sieci. Wykorzystanie znalezionej biblioteki wymaga jej zadeklarowania przed użyciem, a dobre praktyki wskazują na deklarację odniesienia do biblioteki bardzo często w wersji spakowanej. Deklarację taką umieścić można w sekcji META dokumentu poprzez wstawienie odwołania: <script src="http://adres/nazwa_skryptu.js"></script> lub poprzez umieszczenie całej zawartości skryptu bezpośrednio pomiędzy znacznikami: <script> Tu zawartość skryptu </script>.

W dalszej części serwisu będziemy odwoływali się już tylko do konkretnych funkcji zadeklarowanych w treści skryptu poprzez jej nazwę i wskazane, wymagane parametry. W wielu przypadkach, skorzystanie z zewnętrznych bibliotek jest na tyle proste, że zaglądając do dokumentacji lub poprzez wsparcie społeczności webdeveloper, nie znając języka skryptowego każdy może wykorzystać utworzone w danym skrypcie funkcje odwołując się wyłącznie do nazwy funkcji i parametrów. Przykłady zastosowania jQuery można obejrzeć na stronie www.jquery.com a jeden z nich to http://jqueryui.com/demos/switchClass/, gdzie skrypt dokonuje skokowego, wielokrotnego zmiany stylu tekstu, a efekt ten jest widziany jako powiększająca się czcionka.

3.4         Przykłady

Współczesne, nowoczesne serwisy www, stworzone w HTML5 przybierają bardzo różne formy i układy. Nie sposób skatalogować i nazwać wszystkich kategorii, bo każdego dnia powstaje nowy koncept, a twórcy dążą do zaskakiwania odbiorców poprzez maksymalne wykorzystanie technologii i stworzenie nowych form prezentacji. Wiele serwisów uznaje się wręcz za dzieła sztuki, prowadzone są konkursy, a nawet ciągłe nominacje, wyróżnienia i odznaczenia. Jednym z bardziej znanych jest www.awwwards.com, który ocenia serwisy www w wielu kategoriach, aspektach i przedziałach czasowych. Międzynarodowe Jury opracowało własny system oceniania, w którym ocenie podlegają: design, kreatywność, zawartość i użyteczność. Część przykładów prezentowanych poniżej uzyskało tytuł strony dnia i tym samym ich poziom designu i użyteczności, został doceniony i wyróżniony wśród wielu innych zgłoszonych do oceny stron.

Rys. 2. Ewaluacja serwisów konkursu www.awwwards.com (źródło: http://www.awwwards.com/)

Poniżej prezentujemy kilka ciekawych przykładów prezentujących różne podejście do tworzenia serwisów www. Pierwsza ze stron, przedstawiona na rysunku 3 (źródło: www.carnationgroup.com), stworzona przez CARNATION GROUP prezentuje typowy dla urządzeń mobilnych sposób przewijania stron. Nawigacja umożliwia wygodne przeglądanie treści zarówno na ekranie komputera, tabletu, jak i telefonu. Przerzucanie stron serwisu to dość popularny model nawigacji poprzez zmianę całego ekranu w poziomie, w formie przerzucania stron. Strony “przekładać” można zarówno poprzez kliknięcie w strzałki, jak i używając kursorów klawiatury. Serwis również w określonych interwałach samodzielnie prezentuje całą treść, zmieniając prezentowaną stronę.

Rys. 3. Przykład przewijanej poziomo nawigacji  (źródło: www.carnationgroup.com)

Istnieją również modyfikacje gdzie podstawowa prezentacja przypomina pokaz slajdów, ale można je także przewinąć kursorem lub kliknięciem w znaczniki reprezentujące podstrony.

Powyższy przykład to podejście typowe, szeroko rozpowszechnione, które występuje w wielu odmianach. Jednakże omawiając typy nawigacji nie można pominąć sztandarowych serwisów na świecie, wykorzystujących HTML5. Facebook używa połączenia wielu różnych nawigacji, połączonych i współgrających ze sobą. Znajdziemy tu pasek menu górnego, z podstawowymi opcjami i głównymi odnośnikami umożliwiającymi wyszukiwanie, zmianę ustawień, logowanie i powrót na stronę główną. Oba panele boczne pionowe zostały maksymalnie wykorzystane, z jednej strony na nawigację, z drugiej na listę kontaktów. W menu bocznym odnajdziemy praktycznie wszystko to, co nam potrzebne: znajomych, grupy, aplikacje oraz spersonalizowane wybory. Niezmiennie widoczne menu, zarówno górne, jak i boczne pozwala na bardzo szybkie i efektywne poruszanie się po stronie. Do tych rozwiązań dołącza okienko publikacji, zawsze na górze, oraz pojawiające się w zależności od kontekstu menu tematyczne, czy po prostu reklamy, jak również perfekcyjne wykorzystanie miejsca oraz oparta o badania UX nawigacja (jej przyciski tam, gdzie najczęściej użytkownik ich szuka).

Oczywiście model nawigacji powinien być powiązany z treścią witryny. Powyżej opisane przykłady to witryny prezentacyjne, facebook to kategoria sama w sobie, ale istnieją również serwisy o typowo użytecznym charakterze, np. google docs, gdzie nawigacja przedstawiona na rysunku 4 (źródło: drive.google.com) podporządkowana jest funkcji serwisu - edycji dokumentów i naśladuje najpopularniejsze programy biurowe, znów odpowiadając na oczekiwania i przyzwyczajenia użytkowników. HTML5 umożliwia wierne naśladowanie zachowania aplikacji okienkowych i zrealizowanie pakietu biurowego w oknie przeglądarki.

Rys. 4.  Interfejs użytkownika Google Docs (źródło: drive.google.com)

Istnieją również witryny gdzie nawigacja, lub jej brak, podporządkowane są wyłącznie wizualizacji i efektowi graficznemu, jaki projektant chciał osiągnąć.  Można spotkać witryny, gdzie za poruszającym się kursorem po ekranie podążają różnobarwne efekty graficzne.

Projektowanie układu nawigacji należy więc rozpocząć od określenia celu, w jakim witryna będzie tworzona. W dalszej kolejności warto przeanalizować dostępne wyniki z przeprowadzonych badań user experience i dopasować strukturę strony oraz kluczowe jej elementy do układu wynikającego z najpopularniejszych zachowań użytkowników. Przykładowy raport UX kilku fanpag’ów na Facebook’u opublikowała firma K2: http://www.k2.pl/_files/K2_UserExperience_Facebook_Eyetracking.pdf.

4           Kompatybilność i dostępność

Omawiając tworzenie aplikacji i serwisów internetowych z wykorzystaniem HTML5 powinno się wspomnieć o ich największej zalecie - kompatybilności ze wszystkimi systemami, urządzeniami i oprogramowaniem. Prostota i wsparcie standardu przez wszystkie nowoczesne przeglądarki internetowe zapewniają produktom HTML5 szerokie grono odbiorców. Zintegrowanie najważniejszych funkcjonalności i okrojenie zewnętrznych pluginów i rozszerzeń stało się podstawą dostępności i poprawnego działania w zwykle rywalizujących ze sobą środowiskach. Często wskazuje się nową drogę tworzenia aplikacji z przeznaczeniem na urządzenia mobilne poprzez oprogramowanie odpowiedniej aplikacji w HTML5 i skompilowania jej do postaci natywnej wybranego urządzenia, jednakże proces taki, mimo że dość prosty i otwierający drogę do tworzenia aplikacji mobilnych szerokiemu gronu webdeveloperów, niesie ze sobą też pewne ryzyka i ograniczenia.

4.1         Kluczowe ograniczenia aplikacji nienatywnych

Podstawowym problemem omówionego powyżej rozwiązania jest wydajność. Okazuje się, że utworzone tą drogą aplikacje wykazują większe zapotrzebowanie na moc obliczeniową urządzenia, prezentując tym samym mniejszą o niemal 50% wydajność. Zadaniem projektanta będzie więc ocena, na ile wydajność i szybkość działania aplikacji jest kluczowa dla konkretnej aplikacji. Często bowiem okażę się, że wygląd tożsamy z wersją “okienkową” aplikacji jest istotniejszy od wydajności i szybkości działania, która w określonych przypadkach może okazać się drugoplanowa lub wręcz nieistotna (np. operacje bankowe).

4.2         Przydatne narzędzia

Ze względu na duże uproszczenia, którym podlegają witryny tworzone w HTML5, często do tworzenia serwisów wystarcza dobry edytor tekstowy, ze wspomaganiem do oznaczania kodu, który współpracuje z oprogramowaniem do generowania i łączenia arkuszy stylów. Takich tandemów można znaleźć na szerokim rynku internetowym wiele. Jako przykład może posłużyć zestaw PSPad Editor, który dobrze integruje się z edytorem CSS TopStyle (http://www.pspad.com/, http://www.topstyle4.com/). Oba programy mają swoje wersje darmowe i mogą jako takie posłużyć początkującemu programiście. Dostępne są oczywiście zaawansowane pakiety komercyjne (np. Dreamweaver), które jednak wymagają sporych nakładów finansowych, oferując za to przyjazne środowisko WYSIWIG.

Polecamy również zapoznanie się ze stroną: www.html5test.com, która prezentuje cały zestaw narzędzi, przydatnych przy tworzeniu serwisów i aplikacji html5. Strona grupuje w kilka zbiorów, w zależności od zastosowania i przeznaczenia, np. narzędzi dot. edycji css, audio, video czy animacji. Liczba prezentowanych na niej narzędzi stale rośnie. Niestety, ze względu na dynamiczny rozwój nowego standardu rozwija się również środowisko tworzenia aplikacji i serwisów, a pozostawanie na bieżąco wymaga śledzenia blogów, for i serwisów branżowych, choćby ze względu na ogłoszenia wsparcia przez przeglądarki nowych elementów języka.

Dodatkowo webdeveloperowi mogą przydać się narzędzia pozwalające testować wytworzone witryny. Przykładowo, wykorzystując przeglądarkę Firefox użytkownik może wysłać za jej pomocą zmodyfikowane nagłówki  i wymusić odpowiednią dla innej przeglądarki czy urządzenia prezentację treści (user agent switcher).

Polecić można również inne dodatki do przeglądarki, np.  Small Screen Renderer, który integruje się z menu Firefoxa i pozwala wyświetlić zawartość strony w formie zbliżonej do prezentacji na małym ekranie telefonu. Przydatne będą również ermulatory mobilnych przeglądarek, do diagnozowania  problemów z wydajnością:

§    RIM Blackberry Simulators (http://us.blackberry.com/sites/developers/resources/simulators.html),

§    Palm WebOS SDK (https://developer.palm.com/index.php?option=com_content&view=article&layout=page&id=1788),

§     iPhone SDK, https://developer.apple.com/devcenter/ios/index.action

§    Android SDK, http://developer.android.com/sdk/index.html

§    Windows Mobile SDK, http://www.microsoft.com/en-us/download/details.aspx?id=6135

§    Nokia Mobile Browser Simulator http://www.developer.nokia.com/info/sw.nokia.com/id/e22963ec-3d9e-43f2-a220-3ef4c4092cc7/Nokia_Web_Tools.html

§    Opera Mini Simulator http://www.opera.com/developer/tools/mini/

5           Podsumowanie

HTML5 to kompromis spełnienia oczekiwań twórców serwisów www i producentów przeglądarek internetowych. Uwzględnia przyzwyczajenia, nie deprecjonuje historycznych elementów, stawia duży krok naprzód i zapewnia kompatybilność sprzętową oraz wsteczną, oraz po raz pierwszy standaryzuje kody błędów. Połączenie stylu prac W3C i WHATWG przynosi wymierne efekty. Po 15 latach od publikacji aktualnie obowiązującego standardu ogłoszony zostanie nowy, który ma rozwiązać kluczowe problemy rozwijającego się środowiska oraz umożliwić tworzenie serwisów zgodnych z nowymi trendami prezentacji.

Tempo życia, miniaturyzacja elektroniki, mobilność, dostępność internetu oraz coraz wyższe przepływności wymusiły rozwój definicji standardu prezentacji w sieci internetowej. Obserwujemy przeniesienie kanałów komunikacji do internetu, spada oglądalność TV na rzecz większej oglądalności sieci www. Tradycyjne media transmisyjne migrują do sieci (coraz więcej osób ogląda TV przez internet). Czy HTML5 sprosta wymogom nowoczesnego przekazu? Przekonamy się o tym już niebawem, nie mamy wątpliwości, że ewolucja się będzie trwać nieprzerwanie.

Oparcie designu na HTML5 z wykorzystaniem CSS i Javascript to skuteczne rozwiązanie dla każdego, kto zamierza zaprezentować swój produkt na różnych platformach.

6           Słownik

Agent użytkownika –  aplikacja kliencka http, rozpoznawana przez serwis www za pomocą wysyłanej przez nią nagłówka http.

AJAX – skrót od:  Asynchronous JavaScript and XML, określenie technik stosowanych po stronie klienckiej w celu wytworzenia asynchronicznej aplikacji www, wymiany informacji z serwerem bez przeładowania witryny.

API – skrót od: Application Programming Interface, interfejs programowania aplikacji – określony sposób w jaki przebiega komunikacja pomiędzy różnymi programami, obejmuje zestaw reguł i ich opisów.

CSS – skrót od: Cascading Style Sheet, arkusze stylów, opisujące warstwę prezentacji aplikacji sieciowych.

DOM – skrót od: Document Object Model, określenie modelu obiektowego prezentacji złożonych dokumentów HTML i XML. WC3 DOM określa definicję zespołu klas i interfejsów pozwalających na dostęp do struktury dokumentów.

Fanpage – w tłumaczeniu dosłownym strona dla fanów; aktualnie często określenie strony firmy, gwiazdy, osoby publicznej czy wydarzenia, tworzonej na Facebooku.

HTML – skrót od: HyperText Markup Langauge, hipertekstowego języka znaczników, obecnie kojarzonego i wykorzystywanego wyłącznie do tworzeniem stron www.

Hypertext – hipertekst, dokument zawierający odnośniki do innych dokumentów lub innych miejsc w danym dokumencie.

JAVASCRIPT – skryptowy język programowania, wykorzystywany na stronach WWW, stworzony przez firmę Netscape.

Media Queries – grupa metod zawierających się w definicji CSS3 umożliwiająca szczegółowy wybór medium do którego będzie odnosił się wybrany arkusz stylów.

MIT – skrót od:  Massachusetts Institute of Technology, Instytut Technologiczny w Massachusetts, wg. Światowego rankingu uniwersytetów z 2012 Najlepsza uczelnia na świecie.

Plugin –  z ang.  wtyczka; moduł rozszerzający program komputerowy o dodatkowe funkcje.

Przepływność – w telekomunikacji i informatyce, prędkość z jaką sygnał cyfrowy jest transmitowany przez kanał łączności, często potocznie nazywana przepustowością, która określa maksymalne przepływności w danym kanale transmisyjnym.

Responsywny – odpowiadający na warunki otoczenia, środowisko, tutaj określający umiejętność dopasowania serwisu www

do warunków wyświetlania (wielkości ekranu, rozdzielczości, ilości kolorów, itp.)

SDK – skrót od: Software Development Kit, określa zestaw narzędzi niezbędnych do tworzenia aplikacji dla danego środowiska

(systemu operacyjnego).

SGML – Standard Generalized Markup Language, standardowy uogólniony język znaczników, pozwala na ujednolicenie struktury i formatu dokumentu, stał się podstawą stworzenia HTML.

Web Hypertext Application Technology Working Group (WHATWG) – grupa robocza, stworzona przez nieformalne stowarzyszenie producentów przeglądarek internetowych zajmująca się rozwijaniem technologii tworzenia aplikacji www.

World Wide Web Consortium (W3C) – stowarzyszenie ponad 400 organizacji, firm i uczelni zajmujących się publikacją rekomendacji standardów dotyczących budowy i publikacji stron www (rekomendacje nie mają mocy prawnej, nakazujących ich użycie).

WYSIWYG – skrót od: What You See Is What You Get, określenie narzędzi pozwalających na graficzną edycję dokumentów np. HTML, praktycznie bez znajomości języka programowania.