Niedawno wspominałem o nowościach jakie wprowadziła Mozilla w 4 wersji swojej przeglądarki Firefox. W tej chwili popularny staje się filmik z prelegentem demonstrującym pełnię możliwości tej przeglądarki. Zapraszam o obejrzenia.

Tagi: firefox html5 css3

Mozilla zawitała w Londynie, gdzie przedstawiła nowości jakie czekają nas w Firefox 4.0. Jest to między innymi element video z HTML5, manipulacje obrazkami (i video) przy pomocy Canvas, obsługa SVG i wszelkich efektów z nim związanych (można nawet osadzić HTML5), pełno nowych znaczników CSS3 oraz niemal wszystkie funkcje HTML5.

Pozwolę sobie wkleić także listę funkcji, które nie zostały jeszcze wprowadzone, ale będą dostępne w Firefox 4.0:

TraceMonkey (a new Javascript engine)

Lazy Frame Construction

Reducing I/O from the main thread

Startup Time

Hardware accelleration

GPU text/graphics/video rendering

Using GPU for text rendering

JavaScript JIT (JaegerMonkey)

HTML5 parser running own thread

slicker interface

no more modal dialogs

no startup interuptions

updates in the background

Pełną listę nowości oraz wideo z konferencji można znaleźć tutaj.

Tagi: html5 firefox

Oto cheat sheet, czyli ściąga jak używać Canvas - nowość, którą teoretycznie przynosi nam HTML5, a praktycznie istnieje w przeglądarkach już od dawna.

Dla niezorientowanych - canvas pozwala na dosłowne rysowanie po naszej stronie dowolnych kształtów, a nawet animacji.

Szablon strony HTML5

Google otworzyło serwis html5rocks.com, w którym wyczerpująco opisuje korzyści jakie nam daje HTML w wersji 5. Dostępna jest także piaskownica dla deweloperów, wspaniały tutorial oraz galeria stron, z których możesz się uczyć.

Z tej okazji publikuję szkielet całkowicie poprawnego dokumentu HTML5. Lepiej się go naucz na pamięć, niedlugo stanie się bardzo popularny.

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <title></title>
  <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
<body>
	
</body>
</html>

Zastanawiające są trzy linijki po title. Jesli przeglądarką jest Internet Explorer, poprawiają one jego zachowanie, tak aby rozpoznawał i odpowiednio stylował wszystkie znaczniki HTML5. Dzięki temu nie martwimy się, że dokument nie załaduje pod przeglądarką Microsoftu. To trochę ją zwalnia, ale myślisz, że jej użytkownicy cenią sobie szybkość? :)

Yam.pl, klon Twittera, nowy konkurent Blipa, Flakera czy Pingera oparty jest na otwartym silniku status.net (tak, możesz za darmo stworzyć swój serwis mikroblogowy). Ale nie o tym mowa.

Chcę wskazać ciekawy wzorzec, mianowicie przycisk “Masz x nowych wiadomości”. Po kliknięciu ładowane są pInne rozwiązania to oczywiście

nie wyświetlanie nowych wpisów, wymuszenie ręcznego odświeżenia
ciągłe pobieranie i wstawianie pełnych wpisów przez AJAX

Rozwiązanie status.net ma jednak kilka niepodważalnych zalet dla serwisów, które chcą obsługowiwać duży ruch:

Użytkownik jest powiadamiany o nowych wpisach. Kontrprzykładem jest Flaker, gdzie użytkownicy z niecierpliwości odświeżają stronę, pomimo braku nowych wpisów. Pożera to ogromne ilości transferu.
Ponieważ pobierane są same nowe wpisy, które objętościowo stanowią procent całego dokumentu, oszczędzamy znowu na transferze.
Całe wpisy pobierane są jedynie w przypadku kliknięcia przycisku - w czasie rzeczywistym jest pobierana jedynie liczba nieprzeczytanych wiadomości - zmniejszamy czas żądania, obciążenie bazy danych i znowu transfer - przesyłane jest jedynie paro-bajtowa liczba.

Takie rozwiązanie można jeszcze bardziej zoptymalizować. Zamiast stosować odpytywanie serwera co parę sekund żądaniami AJAX, można użyć modelu COMET (push). W skrócie: to nie przeglądarka odpytuje serwer czy są nowe wiadomości, lecz serwer powiadamia o tym przeglądarkę.

Istnieją dwie metody przesyłania informacji z serwera do przeglądarki. Pierwsza opiera się na tradycyjnych zapytaniach AJAX, których jednak serwer nie zamyka, dopóty dopuki nie zechce odesłać jakiejś informacji.

Druga metoda (najbardziej optymalna) pozbawiona jest wszelkich (możliwych) strat na transferze: przesyłana jest jedynie istotna informacja, bez opakowania jej w nagłówki HTTP. Mowa tu o WebSockets czyli wynalazku HTML5.

Niestety WebSockets nie są obsługiwane przez wszystkie obecne przeglądarki, więc realne rozwiązania muszą być hybrydowe.

Jeśli chciałbyś poznać szerzej tematykę powiadamiania Push, polecam zapoznać się z silnikami APE oraz NodeJS. Ciekawostką jest, że korzystają one z JavaScript po stronie serwera.

Jeśli ktokolwiek jeszcze nie obejmuje nowości jakie wprowadza HTML5 i powodów, dla których powinniśmy z jego korzystać, polecam uważne przestudiowanie powyższego obrazka.