Marcelo Abib Cardoso » Mobile

Mobile – SiteMap para celular

Marcelo Abib Cardoso — Thu, 30 Apr 2009 00:29:46 +0000

Ola Pessoal,

Em site mobile podemos criar um sitemap e mandar para o google?
A resposta é sim e iremos aprender hoje como criarmos, complicado? Não.

Vejamos abaixo a estrutura de um sitemap de um site convencional e de um para mobile.
Em nosso exemplo colocaremos apenas uma entrada: a página principal.

Estrutura de um sitemap para site convencional:

http://marcelo.todoinfo.com.br
2009-04-29
monthly
1.0

Agora como fariamos para o site mobile?

xmlns:mobile=”http://www.google.com/schemas/sitemap-mobile/1.0″>

http://m.logicadigital.info

Facil né?
E para colocar mais urls é só adicionar o , assim:
http://m.logicadigital.info
http://m.logicadigital.info/Quem-Somos

Bom pessoal por hoje é isso ai, fica a dica para criarmos sitemaps para mobiles.
Qualquer dúvida, sugestão ou critica coloquem ai.
Marcelo

Mobile: Dicas de como começar a criar um site para Mobile

Marcelo Abib Cardoso — Thu, 16 Apr 2009 02:14:32 +0000

Olá Pessoal,

Vou colocar aqui algumas dicas e falar um pouco sobre como criar um site para mobile.

Primeira coisa que tem que vir na cabeça quando for desenvolver um site para mobile é não pensar como um site convencional.
Para mobile menos é mais, ou seja, tem que ser objetivo e direto.
Seu site é de noticias, coloca noticia.
Se o seu site é da empresa, coloque as informações da empresa e o que ela oferece.
Site para celular não é a mesmo site do convencional, então ai vem a primeira dica para quem quer começar:

1- Ler estes dois posts da Talita Pagani
Websites para mobile não são miniaturas dos sites convencionais – parte I
Websites para mobile não são miniaturas dos sites convencionais – parte II

Lá ela fala muitas boas práticas para quando for desenvolver o site para mobile.

Outra dica que eu vou dar é que quando uma pessoa começa a desenvolver para mobile vem a pergunta onde testo e onde valido meu mobile para saber se estou no caminho certo?

2- Navegadores
Bom, para testar temos um excelente navegador chamado Opera Mini – http://www.opera.com/mini/demo, porém ele necessita o java instalado, mas é um excelente companheiro nas horas de estar desenvolvendo para mobile.

Ótimo, mas só o opera mini?
Não, esta próxima dica, além de dar nota para seu mobile, ele oferece 5 opções de celulares para testes. Vamos a terceira dica.

3- Validando e checando
Para validar seu mobile nada melhor que o W3C – http://validator.w3.org/mobile/
Nele vai ter os warning, erros e tudo mais.

Para checagem tem um site muito bom, é o ready – http://ready.mobi
Ele traz informações como: Nota do seu mobile, size(tamanho total), custo dele, tempo gasto para abrir a página, warnings e erros e mobiles para testar seu site.

Hum, mas senti falta de um site para estatistica, ótimo então aqui vai outra dica, que veio do mobileadsbrasil via twitter – http://www.twitter.com/mobileadsbrasil .
4- É um site chamado Percent Mobile – http://percentmobile.com
Ele traz quais aparelhos estão acessando, pais, fabricante, dimensão da tela e provedores.
Muito útil a ferramenta.

Outra site é este: http://www.myrtmobile.com/ dica de Andre ferraro – http://www.twitter.com/andreferraro
O site traz informações e gráficos semelhantes ao percentmobile, assim como visitas de cada celular.

Agora, vou trazer algumas informações uteis, pelo menos me ajudaram na hora de criar um site para mobile.

5- Doctype para mobile
Versão 1.0 – Mais utilizada

Versão 1.2

6- Nas imagens tem que vir as proporções certas. Ex: imagem.jpg 750 x 640.
Tem que colocar com todas as informações abaixo:

Não colocar: px, tamanho diferente do real.

7- Evitar utilizar tabelas, no lugar use div.

8- Não carregar o site para mobile com muitas imagens, lembre-se muitos celulares tem custo por tamanho(size) total, faça um mobile site com menos de 10kb.

9- Site para pesquisa: www.ummobilesitepordia.com.br
Todo dia eles postam um site para mobile.

10- O meu próprio mobile desenvolvido:
http://m.logicadigital.info

11- Utilizem em links o accesskey, para a acessibilidade.

Bom pessoal por enquanto é isso, quem tiver dicas, comentários e etc…me mandem eu coloco aqui.
Fiquem a vontade, caso apareça algo novo estarei colocando também.

Abraço,
Marcelo

Mobile – Detectando se esta em um aparelho móvel

Marcelo Abib Cardoso — Thu, 09 Apr 2009 18:39:55 +0000

Fala pessoal,

Achei um codigo tanto em PHP quanto em ASP para detectar se você esta em um aparelho móvel.

Segue:

ASP

<%
Option Explicit
Dim user_agent, mobile_browser, Regex, match, mobile_agents, mobile_ua, i, size

user_agent = Request.ServerVariables("HTTP_USER_AGENT")

mobile_browser = 0

Set Regex = New RegExp
With Regex
   .Pattern = "(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|windows ce|pda|mobile|mini|palm)"
   .IgnoreCase = True
   .Global = True
End With

match = Regex.Test(user_agent)

If match Then mobile_browser = mobile_browser+1

If InStr(Request.ServerVariables("HTTP_ACCEPT"), "application/vnd.wap.xhtml+xml") 
Or Not IsEmpty(Request.ServerVariables("HTTP_X_PROFILE"))
Or Not IsEmpty(Request.ServerVariables("HTTP_PROFILE")) Then
   mobile_browser = mobile_browser+1
end If

mobile_agents = Array("w3c ", "acs-", "alav", "alca", "amoi", "audi", "avan", "benq", "bird", 
"blac", "blaz", "brew", "cell", "cldc", "cmd-", "dang", "doco", "eric", "hipt",
"inno", "ipaq", "java", "jigs", "kddi", "keji", "leno", "lg-c", "lg-d", "lg-g", "lge-", "maui", 
"maxo", "midp", "mits", "mmef", "mobi", "mot-", "moto", "mwbp", "nec-", "newt", "noki", "oper", 
"palm", "pana", "pant", "phil", "play", "port", "prox", "qwap", "sage", "sams", "sany", "sch-",
 "sec-", "send", "seri", "sgh-", "shar", "sie-", "siem", "smal", "smar", "sony", "sph-", "symb",
"t-mo", "teli", "tim-", "tosh", "tsm-", "upg1", "upsi", "vk-v", "voda", "wap-", "wapa", "wapi",
"wapp", "wapr", "webc", "winw", "winw", "xda", "xda-")
size = Ubound(mobile_agents)
mobile_ua = LCase(Left(user_agent, 4))

For i=0 To size
   If mobile_agents(i) = mobile_ua Then
      mobile_browser = mobile_browser+1
      Exit For
   End If
Next

If mobile_browser>0 Then
   Response.Write("Mobile!")
Else
   Response.Write("Not mobile!")
End If

%>

PHP



$mobile_browser = '0';

if(preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone)/i', strtolower($_SERVER['HTTP_USER_AGENT']))) {
    $mobile_browser++;
}

if((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml')>0) or
 ((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE'])))) {
    $mobile_browser++;
}    

$mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'],0,4));
$mobile_agents = array(
    'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
    'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
    'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
    'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-',
    'newt','noki','oper','palm','pana','pant','phil','play','port','prox',
    'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar',
    'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-',
    'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp',
    'wapr','webc','winw','winw','xda','xda-');

if(in_array($mobile_ua,$mobile_agents)) {
    $mobile_browser++;
}

if (strpos(strtolower($_SERVER['ALL_HTTP']),'OperaMini')>0) {
    $mobile_browser++;
}

if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'windows')>0) {
    $mobile_browser=0;
}

if($mobile_browser>0) {
   // do something
}
else {
   // do something else
}   

?>

Os dois código podem ser achados aqui:
http://mobiforge.com/developing/story/lightweight-device-detection-php
http://mobiforge.com/developing/story/lightweight-device-detection-asp

Abraço