Strona używa cookies (ciasteczek). Dowiedz się więcej o celu ich używania i zmianach ustawień. Korzystając ze strony wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki.    X

HTML5 + CSS3 + JavaScript = Revolution!!!

HTML5 zna już chyba każdy czytelnik DP. A to ktoś kogoś posądza o sabotaż. A to ktoś idzie na wojnę z inną firmą z jego powodu. Ktoś zmienia swoje kluczowe strony aby do niego pasowały, lub kiedy indziej piekło zamarza a okrzyki niedowierzania obiegają świat.

Cały ten hałas, o standard który ma zacząć obowiązywać dopiero za 12 lat!! A prace nad nim zaczęły się 6 lat temu. Prawie dwadzieścia lat to więcej niż jedna Era w informatyce. A szczególnie poziom emocji oraz sporów na 12 lat przed wydaniem wersji ostatecznej jest bezprecedensowy.

Ale, czy my wiemy Co ma HTML5 do zaoferowania? Czy jego zalety przebiły się do zwykłego użytkownika w zgiełku korporacyjnych (i nie tylko) przepychanek?

Zanim wyliczę nowości HTML5 chcę pokazać parę już istniejących stron-aplikacji www zbudowanych na HTML5 w wersji roboczej dostępnej publicznie.

Prosta strona domowa. Polecam najechać na logo aby zobaczyć efekt cieni, oraz na link aby zobaczyć jak się zmienia. To wszystko bez pomocy obrazków, dzięki czemu strona ładuje się minimalnie szybciej ale i wyszukiwarka ma dostęp do całego tekstu zamieszczonego na stronie.

Stronka wygląda jak rozprawa naukowa napisana przy użyciu specjalnego edytora do składu tekstu lub jak obrazek. Ale to jest zwykły tekst! Czcionka jest wczytywana ze strony więc będzie ona wyglądała tak samo na każdym systemie, nie ważne czy jest zainstalowana czy nie!

Przewiń stronę na dół i podziwiaj efekty!

HTML5 Canvas czyli malowanie w HTML5.

Prosta aplikacja. Ruszaj kursorem i podziwiaj.

Galerie stron zgodnych z HTML5

Nie działa mi!!! Nie wszystkie przeglądarki są obecnie zdolne do interpretowania HTML5. Dlatego polecam tymczasową zmianę przeglądarki jeżeli efekty o których mówię nie działają na Twojej przeglądarce, tak aby wiedzieć co się traci. Ale również mam dobrą wiadomość. Wszystkie przeglądarki szybko zyskają zadowalający poziom wsparcia aby poprawnie wyświetlać obecnie istniejące strony HTML5.
http://a.deveria.com/caniuse/

Sam HTML5 to nie jedyna nowość jaka nam się szykuje. Czeka nas też MathML oraz SVG osadzane bezpośrednio w plikach HTML5.

SVG to grafika wyświetlana na podstawie wzorów matematycznych, dzięki temu wygląda tak samo w dowolnej rozdzielczości. Podczas gdy "zwykła" grafika ma na sztywno zdefiniowany rozmiar przez co trzeba ją skalować gdy chcemy aby była wyświetlona w innej rozdzielczości, co odbija się na jakości. Dodatkowo HTML5 nakłada obowiązek obsługi animacji SVG na przeglądarki.

Mała prezentacja możliwości SVG w niby paincie.

MathML to z kolei standard zapisu wyrażeń matematycznych. Dzięki niemu nie trzeba będzie zamieszczać skomplikowanych wzorów w postaci obrazków, oraz będzie je można bezproblemowo kopiować do edytorów tekstu w celu dalszej edycji.

Inne nowości, które przyniesie nam HTML5 to:

+ możliwość zapisywania informacji po stronie przeglądarki czyli praca po zerwaniu internetu
+ możliwość odtwarzania audio i wideo bez dodatkowych pluginów
+ możliwość 'przeciągnij i upuść' np. dodawanie załączników czy upload przez upuszczanie plików
+ możliwość zarządzania historią odwiedzanych stron jak i zmian na stronie (typu stan z przed uzupełnienia formularza, zapobieganie ponownemu wysłaniu danych)
+zapisywanie danych na stałe w bazie danych po stronie przeglądarki
+instrukcje jak reagować na błędy składni, czyli koniec z frywolnym podejściem do zepsutych stron

nowe znaczki jak article, nav, dialog, progress... aby upodobnić strony www do aplikacji
nowe metody wprowadzania danych tel, search, url, date, month... (czyli Web Forms 2.0)

Dla chcących więcej technicznych szczegółów

Podsumowując. Po wdrożeniu pełnego HTML5 wraz z towarzyszącymi technologiami możemy oczekiwać bogatszych aplikacji. Bardziej przypominających działaniem aplikacje desktopowe gdy tego oczekujemy. Z wyglądem bardziej odpowiadającym preferencjom ludzkiego oka i mózgu (zaokrąglone przyciski). Z grafiką wyglądającą dobrze w każdej rozdzielczości. Włącznie z możliwością edycji. Bez utraty danych w razie zerwania połączenia z internetem, oraz możliwością przechowywania danych po stronie użytkownika. Gwarancją identycznego wyglądu strony gdy jest ona napisana zgodnie z dobrymi praktykami jak i gdy nie spełnia standardów.

Aby dopełnić szczęście należy wspomnieć o jeszcze jednej technologi. WOFF odpowiada za osadzanie czcionek na stronach internetowych, dzięki czemu nie muszą one być zainstalowane w komputerze odwiedzającego. Aby zobaczyć małe demo polecam stronę HTML5 do której link zamieściłem nieco wyżej, a o której napisałem, że wygląda jak rozprawa naukowa. Tą technologię też wszyscy chcą implementować w przeglądarkach. 

Komentarze

0 nowych
  #1 04.05.2010 07:28

Jeśli już wspominasz o nowych typach pól formularzy, to wypadałoby podać nazwę Web Forms 2.0, który oferuje nie tylko nowe pola, ale pozwala na wygodną ich walidację.

W nawiązaniu do MathML, istnieje również język do formułowania wzorów chemicznych CML - Chemical Markup Language.

przemo_li   11 #2 04.05.2010 12:30

Nie wiem jak CML, ale MathML będzie MUSIAŁ być wspierany przez przeglądarki właśnie dzięki HTML5 :) Osobiście nie obraził bym się i za obowiązkową obsługę CML.

Otaq   4 #3 04.05.2010 13:16

"Inne nowości, które przyniesie nam HTML5 to:
(...)
+ możliwość obsługi przycisku wstecz"

Mógłbyś wyjaśnić o co chodzi? Nie za bardzo widzę w tym jakąkolwiek nowość ;)

Seccoawt   2 #4 04.05.2010 13:20

Pod względem standardów i rzeczy internet idzie w dobrą stronę. Trzeba jedynie czekać na przeglądarki, które nie wprowadzają standardów.
Dzięki za stronę:
http://9elements.com/io/projects/html5/canvas/
Naprawdę bardzo piękny efekt. Ile lat trzeba było czekać, żeby takie coś zobaczyć bez Flasha.
PS. Nawet dobry wpis :).

przemo_li   11 #5 04.05.2010 13:39

W "working draft", przewidziano zarządzanie historią odwiedzin, ale również historią zmian w dokumencie. Strona będzie miała możliwość manipulowania tą historią.

  #6 04.05.2010 16:52

@Otaq | 04.05.2010 13:16 : Bardziej złożone aplikacje internetowe nie cierpią przycisku wstecz. Ja akurat go kocham. Chodzi o to, by twórcy aplikacji mogli przechwytywać i blokować ten przycisk.

WODZU   17 #7 04.05.2010 17:14

Wpis ciekawy. A co do tematu to albo mi się wydaje, albo za całość tej fajności odpowiada raczej Java. Podglądam źródło strony np. http://9elements.com/io/projects/html5/canvas/ a tam niemalże pusto, tylko odnośniki do Javy. Co do radości wywołanej z rezygnacji z Flasha, na rzecz Javy w przykładzie na powyższej stronie - narzekano że Flash zamula komputer, a tutaj Task Manager pokazuje 100% wykorzystanie jednego z rdzeni procesora. Zaś co do zapisywania danych ze tron w bazie przeglądarki - hmmm, czy nie powstanie z tego śmietnik na wzór windowsowego rejestru? Nie chcę jednak być permanentnym malkontentem i nie ukrywam, że te zmiany niosą z sobą dużo dobrego. Byle udało się wymusić trzymanie się standardów wśród producentów przeglądarek. Czy to nie wstyd że test Acid3 z punktacją 100/100 przechodzi w moim przypadku tylko Opera Mobile 10 na Symbianie?

  #8 04.05.2010 17:54

hej!
jak dla mnie to 4 z plusem za artykuł

pozdrawiam

przemo_li   11 #9 04.05.2010 17:59

@WODZU nie Java a JavaScript !!! To dwa różne języki!

A co do JavaScript to popatrz się na trzecie słowo w tytule :), HTML5 udostępnia właśnie API dla JavaScript tak aby programiści stron internetowych sami mogli tworzyć dla nas (odbiorców) takie cudeńka oraz żebyśmy my (odbiorcy), mogli oglądać ich pracę gdziekolwiek na czymkolwiek z gwarancją identycznego wyglądu.

Acid3 to ważny wyznacznik obecnych standardów. U mnie raz daje 95 raz 96 (na przemian !!) :D

przemo_li   11 #10 04.05.2010 18:00

@PM9 nie podałeś skali więc przyjmuję, że to akademicka (2-5) :D
dzięki

white_asparagus   2 #11 04.05.2010 19:59

Efekty zadziwiające, faktycznie. Aż miło zerknąć w kod - nigdzie nie ma Flasha.

Wspomniałeś o wsparciu dla MathML. Masz może więcej informacji na ten temat? Czyżby renderowanie LaTeX-em miało stopniowo tracić swoją pozycję (co przypuszczam prędzej czy później nastąpi)?

soanvig   10 #12 04.05.2010 20:46

Niby dobrze napisane ;)

A co do tematu... AS nie ogarniam, więc nie jestem za flashem (czyli za Adobe). HTML aktualny mam opanowany bardzo dobrze, ale chciałbym zobaczyć jak wygląda kod HTML5 czy taki dam radę opanować. Ale WSZYSTKO co pokazałeś (no może poza wzorami matematycznymi MathML) można osiągnąć HTML4.01 + JS + CSS3 i nie potrzeba żadnego flasha ani HTML5. Jak dla mnie to co jest teraz spokojnie wystarcza. Nie ma sensu tworzyć czegoś co już jest, lepiej wymyślić coś nowego (jakieś w ogóle nowe efekty i tym podobne)

soanvig   10 #13 04.05.2010 20:54

Ale jak mam wybierać to HTML5

przemo_li   11 #14 04.05.2010 21:40

@white_aspargus w notacji matematycznej na forach - tak! do składu tekstu - nie! :D

@soanvig przeglądnij prezentację! ostatni link jaki zamieściłem. Tam jest więcej szczegółów technicznych, wraz z konkretnymi przykładami.

  #15 04.05.2010 21:42

Proponuję jeszcze zajrzeć tutaj - szczególnie na strony zawierające filmy http://www.designer-daily.com/5-awesome-html5-demos-6715

Banan   10 #16 04.05.2010 21:56

To wiadome, że HTML5 przejmie działalność dzisiejszego Flasha, a tamci panowie się jeszcze sprzeczają na ten temat.

white_asparagus   2 #17 05.05.2010 08:07

@przemo_li: "do składu tekstu - nie! :D"
To dosyć oczywista oczywistość :D
W domyśle chodziło mi o to pierwsze.

przemo_li   11 #18 05.05.2010 08:36

@white_aspargus mam ogromną nadzieję, że twórcy edytorów tekstów zaimplementują jednak MathML, tak aby można było kopiować bezpośrednio ze strony do edytorów tekstu.

  #19 05.05.2010 10:32

polecam >>> Opera 10.52 <<< obsluguje html5 i SLICZCNIE wyglada

tylko czy ktos zna jakis naplet co przezuci mi wszystkie zakladki z ff do Opery?

Limak   6 #20 05.05.2010 11:36

polecam http://www.chromeexperiments.com/ :) tam to dopiero sobie można sprawdzić mozliwosci HTML5 i :)

przemo_li   11 #21 05.05.2010 17:33

na chwilę obecną żadna przeglądarka nie obsługuje HTML5, choć jak łatwo się domyślić z 5 "głównych", 4 radzą sobie dobrze. WebKit zaś najlepiej.
Jak na razie nie warto przeglądać stron z HTML5 tylko w jednej przeglądarce.

Oprócz wsparcia dla HTML5 i CSS3 ważna też jest wydajność JavaScript.

Marcin1147   4 #22 07.05.2010 18:44

@ko2 chyba nie naplet a aplet xD

tores1977   9 #23 08.05.2010 02:15

http://ie.microsoft.com/testdrive/Graphics/35SVG--oids/Default.xhtml
Bardzo stara gra w HTML5
a najlepiej to zainstalować sobie Internet Explorer 9 Platform Preview 2 (Windows Vista i Windows 7) i po testować

soanvig   10 #24 08.05.2010 22:45

Flash i tak będzie miał większe możliwości niż HTML5. Nie jest tak, że zostanie wyparty całkowicie

przemo_li   11 #25 08.05.2010 23:49

@soanvig podaj konkrety! Sam się na Flashu nie znam więc powstrzymałem się od porównani z nim we wpisie, ale chętnie posłucham o nich.

n-pigeon   5 #26 10.05.2010 15:49

@ soanvig

A niby czego nie będzie miał HTML 5 co będzie miał Flash?

- rysowanie interaktywnych obiektów - jest
- animacja wektorowa - jest
- video - jest
- audio - jest
- możliwość programowania - jest
- 3D - jest

Czy coś pominąłem? Już wiem Flash ma coś czego nie ma HTML5, Flash nadaje się doskonale do zamulania kompa. :)

przemo_li   11 #27 11.05.2010 09:05

@n-pigeon w dodatku mamy dużą konkurencję, co zwiastuje ostrą walkę o każdego użytkownika, więc koniec z "równym ale różnym" wsparciem na alternatywne platformy.

PS HTML5 to też zamulacz, choć tutaj panuje większe ciśnienie na poprawę wydajności, a wsparcie sprzętowe dekodowania kodeków może być takie samo jak we Flashu (o ile ktoś będzie chciał wykupić licencję na patenty). A wsparcie 3D do wyświetlania stron już powoli wchodzi.
Nie można też zapomnieć, o coraz większym znaczeniu JavaScriptu (np. WebGL), który jest jednym z filarów wspierających HTLM5

  #28 11.05.2010 12:08

@ przemo_li

Każda technologia internetowa gdzie jest możliwość programowania, renderowania grafiki 2D/3D będzie zamulać, ale sama idea HTML5 który jest otwartym standardem umożliwia lepszą optymalizacje przeglądarek i silników, przykładowo Adobe musi sam optymalizować Flashowego ActionScripta, natomiast przeglądarki same optymalizyją HTMLowego JavaScripta, zrzynając od sibie ;) co wpływa na jakość, no jest jeszcze element pomocy społeczności :).

Po za tym w HTML5 video i audio będzie szybsze bo nie opiera się na odtwarzaczu Flasha, tylko na wimplementowanym w przeglądarke, to tak jakbyś odpalił zwykły plik video w otwarzaczy który masz od razu z systemem, lub innym.

starko   3 #29 10.01.2011 16:00

Tak nawiązując do przewagi Flasha. (Na początek może zaznaczę, że nie jestem szczególnie fanem tej technologii).

Ja widzę przynajmniej 3 duże zalety
- niektóre efekty są na pewno łatwiejsze do uzyskania.
- ponad 95% komputerów obsługuje flasha, a ponad 90% wersję 10
- i najważniejsze - jest ZAMKNIĘTY. 1 producent, 1 implementacja i wszystko działa identycznie na każdej obsługiwanej platformie i przeglądarce.