Detectando smartphones com JavaScript

Detectando um iPhone/iPod touch/iPad

function DetectIphoneOrIpod()
{
if (DetectIphone())
return true;
else if (DetectIpod())
return true;
else
return false;
}

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPad/i)) || (navigator.userAgent.match(/iPod/i))) {
if (document.cookie.indexOf(“iphone_redirect=false”) == -1) {
window.location = “http://example.com/”;
}
}

Detectando um Symbian

function DetectS60OssBrowser()
{
if (uagent.search(engineWebKit) > -1)
{
if ((uagent.search(deviceS60) > -1 ||
uagent.search(deviceSymbian) > -1))
return true;
else
return false;
}
else
return false;
}

Detectando um Android (WebKit)

function DetectAndroidWebKit()
{
if (DetectAndroid())
{
if (DetectWebkit())
return true;
else
return false;
}
else
return false;
}

Detectando um Windows Mobile (Não Windows Phone 7)

function DetectWindowsMobile()
{
if (uagent.search(deviceWinMob) > -1)
return true;
else
return false;
}

Detectando um BlackBerry

function DetectBlackBerry()
{
if (uagent.search(deviceBB) > -1)
return true;
else
return false;
}

Novo sistema, novo logo, nova Nokia.

Como todos nós sabemos, nos últimos meses a Nokia se juntou à Microsoft de Steve Ballmer para um renascimento da marca e para utilizar o Windows Phone 7, sistema operacional móvel da Microsoft.

Além de um novo sistema operacional em seus celulares a partir desde ano, a Nokia também revelou sua nova logo.

Antes a Nokia tinha uma identidade visual bem conhecida no mundo todo, até por que era a única marca de celulares a alguns anos. Agora essa nova marca ficou bem simples e com o nome “Puro” para significar beleza e pureza em seus produtos para atrair confiança da nova geração de compradores.

Mas afinal, será que foi uma boa a Nokia ter feito isso?

Brilhante Engenharia? Não.

Após o lançamento do iPhone 4, o que mais foi falado em todos os sites e fóruns foi o problema da estrutura da antena do revolucionário celular de Cupertino.

Como o problema afeta todos os usuários, as pessoas descobriram onde fica o problema, na junta das antenas do lado esquerdo do iPhone 4. Mas eu parei pra pensar, e em menos de 10 segundos eu tive a solução para esse problema:

Após a estrutura de aço inoxidável for feita, basta passar por mais um processo de isolamento com uma camada de borracha/plástico para não haver o problema quando o dedo for colocado nesse “buraco” da brilhante engenharia.

Até eu que não sou nenhum especialista em antenas, consigo ter uma brilhante ideia para solucionar um simples problema. Parabéns, Apple!

Curta-metragem filmado e editado em um iPhone 4

Uma história muito legal que conta a lembrança de um avô ao ver um trenzinho de brincado em uma loja acompanhado de sua neta.

Lembrando que todo o processo de filmagem foi feito com um iPhone 4 e o processo de edição no iMovie for iPhone no mesmo aparelho.

Não faça mais isso, Flickr!

Como todo mundo conheçe, o Flickr é um site onde você pode armazenar suas fotos prediletas e compartilhar com seus amigos. Mas nos últimos dias, o Flickr ganhou uma atualização na página de visualização de fotos. Até aí tudo bem, mas em relação ao controle de zoom do mapa de onde você tirou a foto que está o problema.

Como estamos acostumados a ver esses controles de zoom no Google Maps ou Google Earth temos uma bela experiência do usuário em relação a mais zoom (+) na parte de cima e menos zoom (-) na parte de baixo, que no mapa do Flickr é ao contrário.

Inovação + design = tudo o que você precisa

A empresa ResourceFurniture cria facilidades para o seu dia-a-dia. Não dá para explicar, veja o vídeo:

Retina Display: “Se você ver essa tela, você não consegue voltar atrás” (Steve Jobs)

Steve Jobs apresentou em sua última Keynote o iPhone 4. Uma das novidades é a nova tela, denominada de Retina Display. O LCD do iPhone 3GS tem 163ppi(Pixels por polegada), já no iPhone 4 com o Retina Display, esse valor sobe para 326ppi, melhorando muito a qualidade de textos e imagens.

Tudo isso com o mesmo tamanho de tela(3.5 polegadas), 940×640 pixels (4x maior), 326 pixels por polegada, contraste de 800:1(4x melhor) e tecnologia IPS de melhor visualização de cores em outros ângulos de visão.

Quem quiser ver as duas imagens comparativas, aqui está os endereços: iPhone 3GS e iPhone 4.

Diga tchau para a Oi

Hoje vou contar mais um relato que me ocorreu na segunda-feira da semana passada.

Enquanto gravava um videocast que faço todas as segundas, eu recebi uma ligação de um atendente da operadora Oi. A reclamação não é pelo fato de a ligação estar péssima e com várias vozes ao fundo e por me ligar em uma hora não muito legal, mas é pelos planos que eles me ofereceram.

Primeiro que o atendente já queria saber quantos reais eu pagava todo mês com a minha operadora. Segundo que ele estava me oferecendo um plano que me daria 400 reais de bônus no primeiro mês, para eu gastar com o que eu quiser na operadora, reforçando que os 400 reais é apenas para pacotes de dados, minutos extras ou mensagens. Tudo isso já se contradiz com o que a Oi fala em seus comerciais de televisão: “Você é livre para fazer o que quer.”

Eu não poderia usar os R$400 para comprar um novo aparelho celular, e novamente isso volta a cair sobre os comerciais que a Oi divulga.

Um celular dura 3 a 4 anos, ou seja, os 400 reais que você ganharia de bônus seriam muito mais úteis e durariam muito mais tempo. Não os R$400 que só poderia utilizar até a segunda fatura.

Dicas para desenvolvimento de Web Apps

Gradiente

background-image:
-moz-linear-gradient(100% 100% 180deg, #FFF, #000);
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#000));

Gradiente dividido ao meio (Apenas WebKit)

background-image:
-webkit-gradient(linear, left top, left bottom, from(#F00), to(#0F0), color-stop(0.5, #00F), color-stop(0.5, #000));

Sombras no texto

text-shadow: rgba(0, 0, 0, 0.5) 0px 1px 0;
text-shadow: #000 0px 1px 0;

Retirar bordas em links no Mozilla Firefox

a:focus, a:hover, a:active { outline:none }

Janela com dimensões pré-definidas

a href=”#” onClick=”window.open(‘url, ‘texto’, ‘status=no, toolbar=no, location=no, directories=no, resisable=no, scrollbars=no, top=0, left=0, right=0, bottom=0, width=720, height=480′);”>

Bordas arredondadas

-moz-border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius-topleft:5px;
-webkit-border-top-left-radius:5px;
-moz-border-radius-topright:5px;
-webkit-border-top-right-radius:5px;
-moz-border-radius-bottomleft:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-bottom-right-radius:5px;

Sombra por CSS

box-shadow: 5px 5px 5px #ccc;
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;

Sombra interna por CSS

box-shadow:inset 0 0 10px #000000;
-moz-box-shadow:inset 0 0 10px #000000;
-webkit-box-shadow:inset 0 0 10px #000000;

Opacidade

opacity: 0.5;
filter:alpha(opacity=50);

Transição animada

-webkit-transition: all 0.2s ease-in-out;

Escala

-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
-o-transform:scale(1.5);

Redirecionamento se for iPhone ou iPad (JavaScript)

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPad/i)) || (navigator.userAgent.match(/iPod/i))) {
if (document.cookie.indexOf(“iphone_redirect=false”) == -1) {
window.location = “http://users.cjb.net/mppagano/mobile.htm”;
}
}

Esconder barra de URL no iPhone ou iPad (JavaScript)

if (navigator.userAgent.indexOf(‘iPhone’) != -1) {
addEventListener(“load”, function() {
setTimeout(hideURLbar, 0);
}, false);
}

function hideURLbar() {
window.scrollTo(0, 1);
}

Experiência do Usuário deve ser aplicada em tudo

Hoje enquanto estava esperando minha namorada comprar dois salgados, fiquei apenas observando. Enquanto esperava, uma das atendentes nos perguntou quais sabores dos salgados queríamos, mas o detalhe é que ela estava a uns três metros de distância. Pois nessa hora tive uma ideia simples, porém eficiente, de fazer os papéis das fichas para a retirada dos lanches em cores diferentes, para que a atendente conseguisse saber quais salgados o cliente está esperando, mesmo de longe.

Na hora nem falei nada, mas fiquei com a imagem da situação na cabeça.