Wesołych Świąt Pixmas

Merry Pixmas – zrzut ekranu

Podsumowanie

Merry Pixmas: bożonarodzeniowa zabawa dzięki transformacjom CSS 3D.

Co nam się podoba?

Przyjemna prezentacja o tematyce świątecznej, która działa dobrze na komputerach i urządzeniach mobilnych. Dostępna jest nawet zupełnie nowa obsługa kolorów motywów oraz plik manifestu w przypadku strony głównej, która wyświetla się na pełnym ekranie.

Wskazówka: potrząśnij telefonem, żeby padać na śnieg!

Możliwe ulepszenia

Choć jest to wersja demonstracyjna, kilka określonych nagłówków pamięci podręcznej dotyczących zasobów i nie blokującego renderowania kodu JavaScript mogłoby nieco skrócić czas wczytywania.

Pytania i odpowiedzi – Jim Savage

Dlaczego internet?

W Tokio od dawna opowiadamy się za elastycznym i mobilnym internetem, a nie tylko po prostu formatem natywnym. Firma Pixmas powstała w wyniku eksperymentów z HTML5 i CSS3, które powstały w przerwach między projektami. Aby zapewnić aktualność naszej wiedzy, stale staramy się próbować nowych rzeczy. Dlatego dla naszego zespołu programistów aplikacje wszystkie badania byłyby skoncentrowane na internecie, a nie na platformie natywnej.

W miarę dojrzałości przeglądarek dostrzegamy funkcje typowe dla reklam natywnych – funkcje, które były dostępne tylko w ramach programowania natywnego, takie jak geolokalizacja, dostęp do aparatu, lokalne miejsce w bazie danych itp., sprawiają, że korzystanie z tych formatów jest wygodniejsze dla użytkowników, lecz daje korzyści płynące z szybkiego rozwoju aplikacji i lokalizacji na wielu platformach. Oczywiście programowanie natywne nadal ma swoje zalety, a podczas pracy z nowym projektem należy zwracać uwagę zarówno na wersje internetowe, jak i natywne. Może się to wydawać oczywiste, ale dla naszych klientów ważne jest, aby polecać najlepszą platformę do ich pracy, a nie sztuczną inteligencję przy każdym projekcie, który chcemy tworzyć.

Co Ci się podobało w trakcie tworzenia aplikacji?

Wydaje mi się, że w Pixmas głównym zagadnieniem były transformacje 3D i jak daleko mogliśmy jeszcze wypchnąć CSS, więc pikselowy styl ilustracyjny sprawdzał się w przeglądarce i jak każdy programista frontendu twierdzi, że naturalne działanie przeglądarki jest przyjazne dla kwadratów. Opracowanie ogólnego stylu i matematyki 3D na zadaniach z kwadratami sprawdza się znakomicie. Zbudowanie sześcianu z przekształceń 3D i kodu HTML jest znacznie łatwiejsze niż w przypadku jakichkolwiek innych podstawowych kształtów. Jednak interakcja i animacje wymagały trochę czasu, by ją wygładzić.

Najbardziej zaskoczyła nas płynność i wydajność 3D w przeglądarkach na platformach mobilnych, w szczególności na mniej znanych urządzeniach z Androidem.

Gdybyś miał(a) jakiś interfejs API, który pozwoliłby ulepszyć Twoją aplikację, jaki byłby to Twój wybór?

Gdybyśmy piszą od nowa Pixmasa, wykorzystalibyśmy interfejs API oparty na WebGL. Chociaż manipulowanie elementami HTML DOM w 3D za pomocą CSS było zabawą, prawdziwą mocą internetowych modeli 3D było korzystanie z specjalnej technologii przyspieszanej sprzętowo, takiej jak WebView. CSS 3D pozwala na stosowanie podstawowych efektów strony i przejść na strony internetowe, ale kodowanie Pixmasa nie ma żadnych ograniczeń w wydajności przeglądarki.

Google realizuje świetne projekty WebGL na targach Chrome Experiments.