16 марта 2011 г.

Размещаем номер телефона на странице

Продолжаю исследование возможностей браузеров на Webkit (предыдущая заметка про gps). На этот раз в поле зрения попала полезная вещь  - мобильный браузер (опыты ставились на Androidе) способен распознавать и преобразовывать в активную ссылку номера телефонов на странице.
Коммерческому сайту это может помочь в выколачивании денег повышении юзабилити сайта.
Как оформить номер телефона, так чтоб он светился, когда к нему подводили палец -
элементарно, просто грамотно его записать:
(904)620 2095 или 962-6182095 или 904-618-2094 и или (904) 618 2094

Чтобы отключить авто распознавание номера телефона на странице в браузере в хедере страницы нужно указать:
<meta name="format-detection" content="telephone=no">Syhi-подсветка кода
П. С. Подключить к делу можно и гипперссылки:
<a href="tel:1234567">XXX</a>
<a href="sms:1232334">XXX</a>Syhi-подсветка кода

11 марта 2011 г.

Пишем Web App c использованием html5 под Android

И так оглянемся и посмотрим что в наличие - Android аппарат: LG Optimus One (P500)  с Android 2.2 на борту.
И мы хотим нетолько быть потребителем чужих программок для имеющегося Android аппарата, но и творцом. Для этого у нас есть
Потенциальная возможность кодить на Java
Теоретическая (на данный момент теоретическая) возможность кодить на ruby (Ruboto) и др.
Возможность сверстать страничку для браузера с использованием html5.

В данном посте будет сверстана страница, которая будет представлять собой одностраничнное веб приложение позволяющее определять положение по сигналам gps. Данное приложение будет полностью построено на html5+css3+javascript и продемонстрирует возможность создания клиентских приложений для android на веб технологиях.
Почему я указал модель телефона — во первых только на этом телефоне проверялась работоспособность  и потому что возможности приложений будут дрейфовать от модели к модели телефона (хотя можно и найти компромисс между ними).

План мероприятий:
Особенность запуска страницы с SD карты
Принимаем сигнал gps на странице
Верстаем итоговую страницу


Особенность запуска страницы с SD карты
Стоить отметить, что этот пункт встанет ребром, когда понадобится запустить созданное приложение на аппарате. Страницу можно загрузить на хостинг, но можно разместить в папке  в корне SD-карты и потом  просто сделать закладку в браузере на эту страницу.
Допустим мы создаем в корне SD карты папку html5 а в нем файл index.html (html5/index.html)
Тогда, чтобы запустить эту страницу в адресной строке необходимо набрать: content://com.android.htmlfileprovider/sdcard/html5/index.html

Принимаем сигнал gps на странице
Одна из возможностей html5 — определять текущие координаты при помощи gps приемника.  Работоспособность проверялась только на LG Optimus One/ Android 2.2.
 Привожу пример реализующий функционал (gpsListener.js):

function gpsListener(){
       if(navigator.geolocation==undefined) return false;//
        else return true;//Браузер поддерживает работу с gps
}
with(gpsListener){
        //получаем сигнал
        prototype.turnOn= function(successCallback, errorCallback){
                if (this.watchId==undefined){
                        successCallback = successCallback || function(){};
                        errorCallback = errorCallback || function(){};
                        try {
                                function handleSuccess(position) {
                                successCallback(position);
                                }
                                this.watchId=navigator.geolocation.watchPosition(handleSuccess, errorCallback, {
                                        enableHighAccuracy: true,
                                        maximumAge: 10000, // 10 сек.
                                        timeout:1000
                                });
                       
                        }catch(err){
                                errorCallback(err);
                        }
                }
        }
        prototype.turnOff=function(endCallback){
                endCallback=endCallback||function(){};
                if (this.watchId > 0) {
                        navigator.geolocation.clearWatch(this.watchId);
                        endCallback();
                        this.watchId=undefined;
                }
               

        }
}

//Получаем размер доступной области экрана
function androidWindowSize(){
        if(screen){
                var landscapeOrPortrait
                //landscape=true; portrait=false;
                if (screen.width>screen.height) landscapeOrPortrait=true;
                else landscapeOrPortrait=false;
                return {width:screen.width, height:screen.height, orientation:landscapeOrPortrait };
        }
        else return undefined;// машинка видимо не андроид
}Syhi-подсветка кода

Верстаем итоговую страницу.
Ключевые моменты на которые следует обратить внимание будут отмечены в коде комментариями.
Код представлен на github в папке simple-gps

Замечание: При запуске программы в помещение почти всегда программа выдавала сообщение об ошибке так как не могла поймать сигнал от спутника, поэтому лучше запускать на открытом воздухе или стоя у окна.