HTML5 na urządzeniach mobilnych

HTML5 ma pewne cechy szczególne, jeśli chodzi o jego użycie w telefonach komórkowych , panelach dotykowych i innych urządzeniach przenośnych.

Główne cechy

Pamięć lokalna

Buforowanie danych ( AppCache ) przez przeglądarkę pozwala między innymi sprawiać użytkownikowi wrażenie ciągłości połączenia w określonych przypadkach, w których wystąpiłyby przerwy.

Aby to było włączone, konieczne jest utworzenie manifestu offline za pierwszym razem i posiadanie typu MIME  : text / cache-manifest .

Plik manifestu zawiera zależności, które są wymagane do płynnego działania aplikacji.

CACHE MANIFEST # Version 0.1 offline.html /iui/iui.js /iui/iui.css /iui/loading.gif /iui/toolbar.png /iui/whiteButton.png /images/gymnastics.jpg /images/soccer.png /images/gym.jpg /images/soccer.jpg

Po utworzeniu manifestu wymagane jest połączenie z przeglądarką, które realizuje tag html z atrybutem manifestu zawierającym adres URL pliku manifestu.

<html manifest="manifest.mf">

Rysunek

Na stronie można przydzielić miejsce na obrazy, krzywe, wykresy, zabawne elementy i wszystkie inne rzeczy, które można narysować programowo lub w wyniku interakcji użytkownika. Jest to możliwe bez konieczności programowania przez Adobe Flash lub inne wtyczki .

Strumień wideo i audio

Możliwe staje się bezpośrednie zarządzanie strumieniami wideo i audio, bez Adobe Flash .

Geolokalizacja

Istnieje interfejs API geolokalizacji, który pobiera położenie geograficzne użytkownika. To API nie jest zawarte w specyfikacji HTML5, ale może być używane jako uzupełnienie. Szerokość i długość geograficzna są następnie dostępne w JavaScript strony, który może następnie opcjonalnie wysłać je na serwer. Można to wykorzystać na przykład do pokazania obiektów turystycznych lub handlowych znajdujących się w pobliżu użytkownika.

Oto typowa linia kodu do geolokalizacji:

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);

Znalezienie pozycji jest operacją asynchroniczną, która wymaga zgody użytkownika. Dlatego konieczne jest zapewnienie funkcji oddzwaniania w przypadkach akceptacji i odmowy.

Formularze zaawansowane

Pola formularzy HTML5 mają atrybuty, które ułatwiają komunikację z użytkownikiem i zmniejszają rozmiar strony HTML, eliminując potrzebę stosowania pewnych wierszy kodu javascript zwykle używanego do lokalnych elementów sterujących przed wysłaniem na serwer.

Znane problemy

Wideo

Android
  • Android 2.2 i starsze wersje nie obsługują tego atrybutu controls. W związku z tym konieczne jest zapewnienie własnego interfejsu wideo, zawierającego przynajmniej skrypt do uruchomienia wideo. Ten błąd został naprawiony w systemie Android 2.3.
  • Android 2.2 i starsze wersje nie obsługują poprawnie atrybutu typewe wszystkich przypadkach, w szczególności w przypadku braku rozszerzenia „.mp4” dla źródła MP4. Z drugiej strony, ze źródłem H.264 wszystko idzie dobrze. Ten błąd został naprawiony w systemie Android 2.3.
iPhone i iPad
  • iOS 3.2 i starsze wersje nie rozpoznają wideo, jeśli atrybut posterjest obecny. Ten atrybut powinien umożliwiać wyświetlanie obrazu podczas ładowania wideo. Ten błąd został naprawiony w iOS 4.0.
  • Jeśli istnieje wiele źródeł, iOS 3.2 i starsze będą uwzględniać tylko pierwsze. Ponieważ jednak iOS akceptuje tylko kodeki H.264 + AAC + MP4, oznacza to, że pierwszym źródłem będzie prawie zawsze MP4. Ten błąd został naprawiony w iOS 4.0.

Wykrywanie dostępności HTML5 i typu stacjonarnego / mobilnego

Przed utworzeniem strony w standardzie HTML5, serwer może chcieć sprawdzić, czy HTML5 zostanie zaakceptowany przez stację roboczą klienta. To wykrywanie, podobnie jak wykrywanie typu stacjonarnego / mobilnego, odbywa się zwykle dzięki agentowi użytkownika .

Wszystkie urządzenia komunikujące się w protokole HTTP muszą wysyłać agenta użytkownika, który jest ciągiem znaków identyfikującym przeglądarkę internetową i system operacyjny stacji roboczej klienta.

W przypadku serwera strony internetowej można wykryć, czy HTML5 jest obsługiwany, sprawdzając wersję przeglądarki w kliencie użytkownika. Możliwe jest również wykrycie typu sprzętu klienta poprzez zbadanie systemu operacyjnego klienta użytkownika.

Można to zrobić w prosty sposób, porównując nazwę z wcześniej ustaloną listą, którą należy utrzymywać. Lub można to zrobić za pomocą dodatkowych funkcji dodanych do serwera, na przykład, jeśli serwer to Apache , to istnieje moduł AMFWurflFilter (Open Source) , który nadaje atrybuty ( is_wireless_device , is_tablet , ...) ułatwiające wykrywanie urządzeń mobilnych i ułatwiające wybór formatu strony ( rozdzielczość_szerokość , rozdzielczość_wysokość , ...).

Uwagi i odniesienia

(fr) Ten artykuł jest częściowo lub w całości zaczerpnięty z artykułu w angielskiej Wikipedii zatytułowanego „  HTML5 na urządzeniach mobilnych  ” ( zobacz listę autorów ) .
  1. HTML5 z perspektywy mobilnej 22 lipca 2009 r. Autor: Jason Grigsby
  2. Spraw, aby mobilne aplikacje internetowe działały offline z HTML 5 , Michael Galpin, 29 czerwca 2010
  3. Jak HTML5 zmieni sposób korzystania z sieci 1 grudnia 2009 r. Autor: Kevin Purdy
  4. Interfejs API GeoLocation Mark Pilgrim, Zanurz się w HTML5
  5. Struktura lokalizacji geograficznej Java Script dla witryny mobilnej code.google.com
  6. Mark Pilgrim : Dive Into HTML5
  7. http://wurfl.sourceforge.net/help_doc.php

Zobacz też

Powiązane artykuły

Linki zewnętrzne