Niesamowite strony stworzone za pomocą HTML5 [TOP 15]

HTML5 ma przenieść stary, prawie już 20-letni hipertekst na zupełnie nowy poziom. Faktycznie, to, co można uzyskać za pomocą tego standardu, jest naprawdę niesamowite. Przedstawiamy 15 witryn, które uczyniły z HTML5 prawdziwą sztukę.

To strona ze starymi grami. Można na niej znaleźć takie tytuły, jak DejaVu, DejaVu II (stare gry przygodowe z Maków), Shadowkeep (coś pomiędzy przygodówką a RPG w stylu Dungeon Mastera) oraz Uninvited.

Gry istnieją jedynie w wersjach beta, lecz powinny (przynajmniej według autorów) dać się przejść. Wykorzystują JavaScript i element canvas, pliki save są przechowywane w pamięci przeglądarki. Działają tylko pod Chrome i Firefoksem.

Draw.2x.io to bardzo ciekawa strona, stanowiąca coś w rodzaju prezentacji możliwości HTML5. Umożliwia wspólne, jednoczesne rysowanie kilku użytkownikom. Edytor nie ma zbyt dużych możliwości, co raczej wyklucza zastosowania profesjonalne (na razie).

Świetnie nadaje się za to do wspólnej zabawy. Niestety, nie pracuje we wszystkich przeglądarkach. Strona obsługiwana jest jedynie przez Chrome i Firefoksa 4.

Kolejna strona z grami (a raczej tylko z jedną grą). Tym razem jest to klasyczna strzelanka w stylu Amigi. Użytkownik steruje małym myśliwcem kosmicznym, który leci przed siebie, walcząc z tysiącami wrogich okrętów.

Sterowanie jest dość toporne, a przeciwnicy - moim zdaniem - są zbyt wytrzymali, żeby grało się naprawdę przyjemnie ;). Aplikacja udowadnia jednak, że Pacman Google'a nie jest najlepszą grą, jaką można stworzyć w HTML5.

Rekomendowane przeglądarki to Firefox, Opera i Chrome.

Kolejna demonstracja możliwości HTML5. Pomysł przypomina trochę słynną animowaną kuleczkę z Amigi. Otrzymujemy piłkę, którą odbija się od krawędzi okien. Można nią rzucać, kozłować itp. - wszystko to za pomocą myszki.

W zasadzie nie służy to do niczego i dość szybko staje się nudne. Jednak fizyka piłki, zwłaszcza jak na tak niedoskonałe narzędzie, jest oddana naprawdę dobrze.

Na stronie można znaleźć galerie prac graficznych będących animowanymi obrazami (tzn. prace są statyczne, ale niektóre ich elementy, np. płynąca woda, deszcz, są ruchome). Grafika utrzymana jest w klimacie starych gier.

Mówiąc szczerze: obrazy są po prostu świetne. Odrobinę tajemnicze, wyglądają jak kadry z kultowego Another World i (przynajmniej u niektórych osób) wywołują nostalgię :).

To prosty program graficzny pozwalający na rysowanie obrazków w oknie przeglądarki. Ma spory wybór pędzli i całkiem duże możliwości. Znów raczej trudno tu jednak mówić o profesjonalnych zastosowaniach.

Jednak jeśli ktoś zwyczajnie lubi rysować, to jest to całkiem przyjemne, dające wiele możliwości narzędzie.

To demo przygotowane przez Google'a. Wykorzystuje cały szereg sztuczek. Zasadniczo pomysł jest prosty i ma pozwalać na urządzenie „wirtualnego koncertu” przed rodzinnym domem użytkownika.

Aby go obejrzeć, należy wpisać adres domu. Wyświetla się on wówczas w Google Street View, a wraz z nim efektowna prezentacja. Niestety, żeby to działało, budynek musi być widoczny w usłudze.

To tytuł strony będącej czymś w rodzaju wirtualnej, dziecięcej książeczki. Jak większość podobnych pomysłów, książka jest potwornie niewygodna. Z drugiej strony prezentacja jest bardzo efektowna.

Prawdę mówiąc, podobnych „książeczek” można było zobaczyć w Sieci już mnóstwo. Większość z nich jednak była daleka od doskonałości i działała bardzo powoli. Ta olśniewa użytkownika efektami specjalnymi i jednocześnie działa szybko.

Kolejny, trzeci już program graficzny. Możliwościami przypomina Painta z Windowsa. Jak na aplikację webową to bardzo dużo. Silnik strony oparto na JavaScripcie oraz HTML5. Aż trudno w to uwierzyć.

Strona służy do wysadzania w powietrze klipów video. Klikając film, można dodać mu takie dziury jak na ilustracji powyżej. Co ciekawe, mimo że w filmie pojawia się efektowna dziura, animacja nie jest zatrzymywana.

Kolejna propagandówka Google'a wychwalająca zalety HTML5. Tym razem jest to cały serwis z demami, tutorialami i prezentacjami. Na pierwszy rzut oka wygląda na zwyczajnie nudny. Jednak mimo to zachęcam do rzucenia na niego okiem.

Strona działa bardzo szybko, lepiej niż jakiekolwiek tradycyjne serwisy. Także prezentacje i inne media wczytują się bez charakterystycznych przestojów.

Na zrzucie tego nie widać, jednak po kliknięciu adresu strony pojawia się coś w rodzaju prezentacji. W tle leci muzyka, natomiast na ekranie pojawiają się rzędy kropek. Kropki „tańczą”, dodatkowo można je „rozrzucać” za pomocą myszy.

Przypomina to trochę staromodny wygaszacz ekranu, przy czym działa oczywiście w oknie przeglądarki, zachowując przy tym bardzo duży stopień płynności.

Strona służąca jako kolekcja eksperymentów z HTML5. Zbiera kilkanaście mniej lub bardziej udanych przykładów. Jeśli ktoś jeszcze nie jest przekonany do technologii, to powinien odwiedzić witrynę i przyjrzeć się prezentacjom.

W serwisie umieszczono kilka dem oraz parę dziwnych, choć pomysłowych minigier. Wszystko to działa płynnie, zupełnie jakby zostało odpalone offline, a nie w oknie przeglądarki.

Kolejna prezentacja muzyczna, tym razem do utworów Radiohead. Po ekranie tańczą nie kropki, a kreseczki powoli rysujące ludzką twarz. Interakcja jest ograniczona; klikając ilustrację, można jedynie przerwać widowisko (lub puścić je od początku).

CanvasDemos oraz HTML5Demos zajmują się gromadzeniem różnego rodzaju dem i innych owoców pracy w HTML5. Znaleźć można tu wiele często bardzo efektownych popisów programistycznych.

Źródło: MakeUseOf