JavaScript a chýbajúce API

Oproti „desktop“ verziám JavaScriptu, pribudlo v tých mobilných len niekoľko API funkcií.
Napríklad na detekciu otočenia mobilu alebo možnosť zistiť pozíciu užívateľa pomocou GPS.
Chýba však napríklad podpora pre zapínanie a vypínanie fotoaparátu, získanie údajov s akcelerometra, alebo uhol natočenia zariadenia. Úplne ako sci-fi znie ovládanie telefonovania priamo HTML stránkou.
Toto všetko je zatiaľ možné keď si nainštaľujete PhoneGap, ktorý vie sprostredkovať väčšinu vlastností telefónu rozšírením JavaScript API. Užívateľ si však nebude chcieť niečo inštalovať len preto, aby si mohol spustiť aplikáciu. Je to zbytočná komplikácia naviac.

Audio not supported

Audio tag je problém pomaly na všetkých mobilných platformách. Najlepšie dopadol v tomto smere iPhone, ktorý dokáže prehrať mp3 súbory. Či už cez <audio> tag alebo Audio objekt. Avšak pri každom prehratí toho istého zvuku, sa zvuk znova a znova sťahuje so siete. Nepomôže ani pridanie súboru do manifest súboru. Iphone jednoducho audio neukladá do vyrovnávacej pamäte.
Ak chcete prehrať zvuk keď napríklad užívateľ klikne na tlačítko, musíte počkať kým browser pošle požiadavku do siete, stiahne súbor a následne ho prehrá. „Soudruzi z NDR asi někde udělali chybu.“.
Na nete sa tejto problematike venuje niekoľko fór. Možno je tento problém odstránený v novej verzií iPhone.
Samozrejmosťou je chýbajúci zápis audio dát cez URI.

var aud = new Audio('data:audio/mpeg;base64,audiodata');  

Audiodata je base64 reťazec mp3 súboru ktorý chcete prehrať. Ani iPhone, ani Android nevypíše na tomto zápise chybu, ale ani jeden ich však neprehrá. Android mp3 mimochodom kvôli licencií neprehrá mp3 vôbec, zato je však deklarovaná podpora pre ogg vorbis.

Nikto Vám nemôže dať toľko, čo Vám my nasľubujeme.

Skúste nasmerovať mobilný prehliadač na stránku ktorá detekuje aké audio formáty prehliadač podporuje.
http://www.happyworm.com/jquery/jplayer/HTML5.Audio.Support/
V prípade Androidu verzie 2.2 je deklarovaná podpora pre wav a ogg. Ani v jednom prípade sa však testovací súbor neprehrá.
Zaujímavé, že keď vytvoríte video s ogg audio streamom, tak video sa správne prehrá so zvukom.

A čo HTML5 a CSS3?

Stačí, keď si spustíte ACID3 test. Skóre je na oboch platformách veľmi dobré. Na Android-e o nejaký ten bod lepšie. Ani jeden však nedosahuje na výsledok mobilnej verzie Firefoxu
http://www.mozilla.com/en-US/mobile/download/. Tá bola vydaná len nedávno. Zatiaľ sme nemali možnosť ju plne otestovať. Pokiaľ však nebude štandardne nainštalovaná v iPhone a Android zariadeniach, je bezpredmetné sa touto verziou zaoberať.

Čo sa týka HTML nemusíte sa obávať že budete optimalizovať pixely pre iPhone a na Androide bude aplikácia vyzerať o nejaký ten pixel inak. Boli sme príjemne prekvapený, keď aplikácia sedela celkom presne na oboch platformách. Predsa len majú spoločný webkitový základ.
Pod iPhone ešte chýba podpora pre a:hover.
Ak napíšete a:hover {background-color:red} jednoducho sa nestane nič. Tento CSS parameter totiž vyhodnocuje prehliadač  vo svojej réžií. Pod Androidom sa a:hover správa štandardne.

A čo rýchlosť JavaScriptu, CSS3, HTML5?

Treba rátať s tým, že aplikácia je niekoľkonásobne pomalšia ako pod desktopovým prehliadačom. Treba sa vyhnúť hlavne regulárnym výrazom v JavaScripte, tie pôsobia ako ručná brzda.
Naopak veľmi dobre sa pracuje s CSS3 transformáciami, ktoré sú v prípade iPhonu vraj hardwarovo urýchlované.

Ako je to s nástrojmi, IDE, emulátory ladenie..

Pod IPhone existuje jediný ako tak seriózny nástroj (xcode). Bohužiaľ beží len na mac OS platformách. Určite sa vyhnite pseudo emulátorom, ktoré len zobrazujú iPhone obrázok a vo vnútri beží štandardný desktop browser.
V prípade Androidu je možné si stiahnuť celé SDK vrátane emulátora, ten je písaný v JAVE. Spustíte ho pod akýmkoľvek operačným systémom. Problémom je však jeho rýchlosť. Emuluje totiž komplet ARM procesor, čo je dosť náročné.
Ako IDE je v prípade Androidu možné použiť Eclipse do ktorého existuje plugin, ktorý prepojí Eclipse s emulátorom. V jednoduchom prípade vám na vývoj stačí Eclipse a Android emulátor. V každom prípade aplikácie treba otestovať aj na skutočných telefónoch.

Zdroje

http://developer.android.com/guide/developing/tools/emulator.html – Android emulator
http://www.phonegap.com/ - Rozlíšenie javaScript API o základné funkcie mobilných zariadení.
http://www.mozilla.com/en-US/mobile/download/ - Mobilný firefox
http://www.happyworm.com/jquery/jplayer/HTML5.Audio.Support/ - Testovanie Audio možností prehliadača
http://html5test.com/ - Testovanie HTML5 možností prehliadača
http://www.mobilexweb.com/blog/guidelines-mobile-web-design – Ultimátny zoznam návodou venovaných vývoju mobilných aplikácií.