Facebook zdaje sobie sprawę z ważności segmentu mobilnego dla swojego rozwoju i coraz bardziej inwestuje w rozwój związanych z tym technologii. Ostatnim udostępnionym przez Facebooka narzędziem jest Ringmark.

Jest to zbiór testów, które mają w łatwy sposób zidentyfikować jakie możliwości ma dana wersja mobilnej przeglądarki. Dzięki temu chcą walczyć z fragmentaryzacją i pomóc programistom lepiej wykorzystać dostępne możliwości.

W tym momencie test jest podzielony na trzy pierścienie (rings).

Ring 0 reprezentuje podstawowe funkcjonalności. Zbiór możliwości dostępnych obecnie na największej ilości urządzeń (w tym momencie jest to iOS5 i Android 2.2 Froyo).

Ring 1 reprezentuje funkcjonalności potrzebne to tworzenia takich gier jak Angry Birds, Where is My Wather, aplikacji Facebooka, Twittera czy Instagram. Sprawdza między innymi:

- Akceleracje obiekty Canvas
- DRM (wideo i audio)
- element audio, kodek mp3, możliwość odgrywania więcej niż jednego źródła dźwięku w tym samym czasie
- aparat
- blokadę zmiany położenia ekranu i zdarzenia zmiany tego położenia
- multi-touch
- podstawowe funkcjonalności web workerów
- funkcjonalności pierścienia 0 bez wykorzystania prefiksów
- WOFF
- IndexedDB

Ring 3 reprezentuje funkcjonalności, które staną się powszechne w kolejnych latach. Takie, które umożliwią tworzenie np. gier 3D albo zaawansowanych gier wieloosobowych. Sprawdza między innymi:

- WebGL
- Web notifications
- Audio API
- WebSockets
- SVG

Rozwój tego zestawu nie jest skończony i w przyszłości pojawią się kolejne pierścienie. Cały pakiet został opublikowany jako Open Source, więc wy możecie także się przyłączyć i go rozwijać. Twórcy mają nadzieje wspomóc za jego pomocą Core Mobile Web Platform Community Group w ich staraniach standaryzujących.

Sprawdźcie sami jak testy się sprawują: http://rng.io/

Żródła:
Ringmark na Github-e
announcing ringmark a mobile browser test suite
ringmark is now open source
The methodology behind ringmark
Core Mobile Web Platform Community Group

Większość pewnie wie, że jednym z ograniczeń obiektu XMLHttpRequest jest możliwość komunikacji tylko z serwerami leżącymi w tej samej domenie (same origin policy). Nie wszyscy zdają sobie sprawę, że możemy skorzystać z Cross-Origin Resource Sharing (CORS) i z powodzeniem odwoływać się do zasobów z poza naszej domeny. W tym celu potrzebujemy 2 rzeczy:

• Browsera ze wsparciem dla XMLHttpRequest Level 2 – co nie jest w obecnej chwili dużym problemem. Wszystkie popularne przeglądarki (poza IE) implementują już ten standard. Dotyczy to również systemowych przeglądarek w systemach Android i iOS. Jeżeli zaś chodzi o IE, to od wersji 8, możemy skorzystać z odpowiednika XDomainRequest.
• Ustawienia odpowiednich nagłówków odpowiedzi po stronie serwera. Sprawa jest banalna. Omówimy ją sobie na przykładzie aplikacji PHP.

Na początek stwórz kod po stronie klienta:

      var method = 'POST', // równie dobrze request możemy wysłać GETem
          url = 'http://cors.bushidoit.com/sample1.php'; // tutaj wpisz swoją domenę

      var xhr = new XMLHttpRequest();
      xhr.onerror = function(){
        alert('error')
      };
      xhr.onreadystatechange = function(){
        if (4 === xhr.readyState && 200 === xhr.status) {
          alert(xhr.responseText)
        }
      }

      xhr.open(method, url, true);
      // Jeżeli wysyłamy dane POSTem, to musimy ustawić jeszcze dodatkowy nagłówek
      if('POST' === method){
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      }

      xhr.send('msg=Foo');

Po stronie serwera kod jest jeszcze prostszy:

<?php
// Domena która jest dopuszczona do wykonywania zapytania - możemy użyć widlcarda (*)
header('Access-Control-Allow-Origin: *');
// Lista dozwolonych metod zapytania
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');

echo $_POST['msg'];
?>

Wszystko działa ładnie, do czasu kiedy zechcemy wysyłać / odbierać ciasteczka. Choćby na potrzeby urzymywania sesji. Do takich zapytań musimy dołożyć jeszcze jeden parametr:

      xhr.withCredentials = "true";

a po stronie serwera:

header('Access-Control-Allow-Credentials: true');

w takim przypadku, musimy również dokładnie określić domenę z której przychodzi request. Nie mamy możliwości skorzystania z wildcarda *.
Tutaj możecie zobaczyć działające Demo bez ciasteczek oraz Demo z ciasteczkami.

Dla uproszczenia, nasz przykład nie działa w IE. Tutaj znajdziecie przykładową implementację z wykorzystaniem XDomainRequest.

Firma Game Closure autorzy SKD do tworzenia multi-platformowych gier w HTML5 uzyskała właśnie 12 milionów dolarów na rozwój swojego biznesu. Sami właściciele chwalą się, że dzięki ich narzędziom uda się w przyszłości zmniejszyć czas tworzenia gier na wiele systemów z 12 miesięcy do 6 tygodni. Firmie udało się zdobyć dofinansowanie po stworzeniu gry Pop Star Defence, która pokazywała możliwości ich SDK.

Sami możecie sprawdzić ją wpisując jako kod “popstarhtml5″.
Gra zadziałała mi tylko w Chromie. Ipad i Samsung GalaxyS poległy i nic nie udało się wyświetlić.

Mimo to bardzo się cieszę, że inwestorzy wierzą w gry w HTML5 pomimo niedawnego bankructwa firmy Moblyng(zdobyli 7.5 miliona dolarów z pomysłem na biznes bardzo podobnym z tym który prezentują Game Closure). Mam wątpliwości co prawda czy model technologiczny wielo-platformowego silnika do gier się sprawdzi. Szczególnie na urządzeniach mobilnych, gdzie waga Twojego kodu ma duże znaczenie a i “przeglądarkowe piekło” jeszcze bardzo mocno daje się we znaki. Dodatkowo te 6 tygodni wystarczające na stworzenie gry można włożyć między bajki. Ale oczywiście trzymam kciuki za Game Closure i że wspomoże to rozwój rynku gier HTML5.

Żródła:
Game Closure
Artykuł o dofinansowaniu z Venture Beat
Gra Pop Star Defence
Game Closure