PrintScreen no iPad/iPhone/Android

Post pequeno mas pra quem não sabe será muito útil.

Tanto o iPhone quanto o iPad usam a mesma maneira para fazer o printscreen, basta pressionar os botões Home + Power a tela vai piscar e pronto, pode ir até a sua pasta de imagens para pegar os prints.

Já no caso do android pelo menos no caso do Galaxy S é Home + Voltar, caso o seu Android seja de uma forma diferente, deixe a dica nos comentários.

[]‘s

Posted in Android, iPhone | Tagged , , , | Leave a comment

Verificar Status do navegador com HTML5 (window.navigator.onLine)

O Código é muito simples e pode ser usado em varias aplicações.

Se o navegador está offline registra em cookies ou no banco de dados do próprio navegador informações para quando ele ficar online, essas informações possam ser enviadas a uma base externa.

É fundamental para o Desenvolvedor HTML (Programador HTML / HTMLerr / Designer de Interface / Como chamam onde você trabalha?) que quer trabalhar com HTML5 saber Javascript

Os navegadores com suporte à HTML5 possuem um atributo que é navigator.onLine, esse atributo retorna True ou False, no exemplo vou utilizar um SPAN com o id status e escreverei dentro dele o status do navegador,

o HTML fica assim:

<span id='status'></span>

e o Javascript assim:

function verificaStatus() {
if(window.navigator.onLine){
status = "online";
} else {
status = "offline";
}
statusBox = document.getElementById('status');
statusBox.className = status;
statusBox.innerHTML = status;
}

lembre-se de disparar a função verificaStatus de acordo com a sua necessidade, se for no load dá página basta colocar a função no body.onload, case seja no decorrer do uso da página, coloque um setInterval() para verificação em loop.

Posted in HTML 5 | Tagged , , | 2 Comments

Corona: Framework de desenvolvimento para iPhone e Android!

Hoje a área de desenvolvimento para as duas mais badaladas plataformas mobile está um caos, algo semelhante ocorreu quando os frameworks javascripts estouraram (Dojo, jQuery, Scriptaculous, ExtJs e outros) lembram? Hoje em dia o mesmo ocorre com o desenvolvimento para iPhone e Android. Podemos aprender Java e o SDK do Android ou Objective-C e o SDK do iPhone, ou então os dois. Mas não é tarde demais? Levando em conta que só pegou o bonde quem começou isso em 2008?

Existem bons frameworks atualmente que merecem atenção, ainda mais se ele poder gerar aplicações finais para iOS e para Android. Hoje falarei sobre um bem legal, o Corona SDK.

Distribuido pela Ansca Mobile, o Corona vem com a idéia que o jQuery veio, escrever pouco código para gerar mais resultado, nesse ponto ele é impressionante. Ele usa a linguagem de script Lua (que por sinal foi feita por brasileiros da PUC Rio), que é uma linguagem focada em extender recursos e de sintaxe semelhante ao Javascript.

O Corona SDK fornece diversas API’s com os mais variados propósitos, manipular sons, imagens, objetos, sprites, botões e outros controles. A ferramenta possui amplos recursos que ajudam a programar games, como comandos e controles que implementam física (gravidade, atrito, colisões) nos objetos de forma simples e direta. Além disso é possível criar aplicações, utilizando, botões, menus, listviews, bem como utilizar recursos de câmera, GPS, acelerômetro, bussola, giroscópio.

A principal vantagem é que ele gera builds tanto pra iOS quanto para Android, porém nem tudo são flores.

Você pode testá-lo de graça, e todos os recursos estarão lá. Ele vem com um simulador próprio que simula iPhone, iPad, Android (vários modelos, incluindo os tablets). Tem um terminal de debug e teste bem legal também, mas para publicar seus apps feitos em com uso do Corona SDK, você tem que pagar uma taxa anual de US$349 (mais os US$99 da Apple caso desejar publicar na Apple Store).

Esse valor pode parecer muito salgado, mas em tese, se você está levando a idéia de desenvolver a sério, você devia pensar em vender mais que os 350 dólares anuais em app, levando em conta a produtividade do SDK.

Talvez a única limitação mais crítica ao SDK seja a necessidade de ter um Mac. Sim, ele só roda em Mac OS X (Snow Leopard ou superior) e pelo comentado pela própria Ansca Mobile, não há planos de portá-lo para Windows ou Linux. E isso acaba deixando o investimento inicial mais caro, já que será necessário adquirir no mínimo um macbook.

É isso aí, recomendo que deêm uma olhada e testada nele. Ainda é cedo para saber em qual framework mergulhar de cabeça, assim como era nos frameworks Javascript, o mercado precisa se auto-regulamentar. Mas enquanto isso, estamos de olho! Até o póximo post!

Posted in Android, Dicas, iPhone, Java, JavaScript, jQuery & Ajax | Tagged , , , | 2 Comments

CSS 3 – fazendo degrade com webkit-gradient

Como prometido no ultimo post onde falamos sobre “Utilizando webkit-box-reflect ( reflexo com css 3 para iphone/ipad/safari e chrome)”, nesse post vou complementar a dica sobre o uso do webkit-gradient, vamos iniciar pela sintaxe.

Sintaxe: -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

  • Type: pode ser linear ou radial;
  • Point: a sintaxe do webkit-gradient permite que sejam inseridos números em pixels, porcentagens ou ate mesmo palavras chave como top, bottom, left right, se você utilizar radial recomendo que use medidas em pixels para garantir um melhor funcionamento.
  • Stop: a função stop tem como objetivo dizer o ponto da tangente da cor, ou seja onde uma cor toca a outra, os valores podem ser em porcentagem, pixels ou um número entre 0 e 1.0

Por exemplo:

-webkit-gradient (radial, -45deg, from(black), color-stop(0.5, transparent), to(white));
  • Type: radial
  • Point: -45deg ( -45 graus de inclinação )
  • Stop: from(black), color-stop(0.5, transparent), to(white)), saindo do preto até a metade para ficando tranparente para o branco.
-webkit-gradient (linear, left center, right center, from(green), to(yellow));
  • Type: Linear
  • Point: Left Center, right Center
  • Stop: from(green), to(yellow)); de verde para amarelo

Bem, por hoje, isso é tudo pessoal ;)

Posted in XHTML & CSS | Tagged , , | Leave a comment

Utilizando webkit-box-reflect ( reflexo com css 3 para iphone/ipad/safari e chrome)

A idéia é bem simples, vamos pegar uma imagem, e fazer o reflexo, o conceito é o mesmo de uma sombra vamos usar a seguinte imagem:

Para fazer o reflexo com CSS 3 vamos utilizar a propriedade –webkit-box-reflect, primeiro vamos entender quais os atributos que essa propriedade recebe entendendo a sintaxe:

-webkit-box-reflect: direction offset mask-box-image;

Temos 3 atributos:

  • Direction: A posição da reflexão em relação à imagem. Pode estar acima, abaixo, esquerda ou direita. (above, below, left ou right)
  • Offset: A distância da reflexão a partir da borda da imagem, em unidades de comprimento ou como uma porcentagem. O valor padrão é 0.
  • Mask-box-image: Usado para sobrepor a reflexão. Se for omitido, a reflexão não tem máscara. Pode ser usado cor solida ou uma combinação com –webkit-gradient.

Vejamos esse código:

.reflexo {
-webkit-box-reflect: below 5px -webkit-gradient( linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));
}

Por algum motivo ainda desconhecido, o script que deixa bonito a aparência de código acima está duplicando a palavra bottom do webkit-gradient, o correto seria apenas “linear, left top, left bottom, from”

Explicando a propriedade –webkit-box-reflect com os seguintes atributos e seus respectivos valores:

  • -webkit-box-reflect =  Requisita reflexo
  • direction : below = reflexo abaixo do item
  • offset : 5px = a uma distancia de 5px
  • mask-box-image : -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white)) = fazendo uma degrade de branco para tranparente ( a explicação do gradient fica para o proximo post)

Bem, o resultado final fica assim:

Espero que tenha ajudado e não esquece de deixar um comentário pra incentivar a continuidade dos posts.

Posted in XHTML & CSS | Tagged , , , , , , | 1 Comment