Preload de Página

Vamos ver como fazer um Preload como o do Google.
Olá, agora vamos ver como criar o preload mais conhecido da internet, o preload do google, isso mesmo aquela coisa minúscula e vermelha no canto direito da tela.
Vamos ao bom e velho HTML (index.html)
<html>
<head>
   <title> Loader :: </title>
     <script src=”load.js” type=”text/javascript”></script>
     <link href=”load.css” type=”text/css” rel=”stylesheet”>
</head>
    <body>
   <div id=”conteudo”>
       <!– -aqui vai todo o conteudo do site –>
       <a href=”index.html”>Testar novamente</a>
       <iframe src=”http://news.google.com.br”></iframe>
    </div>
      <!– funcao que ira criar o elemento div loader –>
      <!– esta chamada pode ser a ultima linha dentro do body –>
      <script>loading()</script>
</body>
</html>
Acima utilizei dentro do conteúdo da página (div conteudo) um iframe, nada de especial, foi apenas uma forma que encontrei de fazer com que a página demorasse mais que 1 segundo para carregar dando tempo aparecer o texto “Carregando…”. Não vá me colocar um iframe na sua página hein! Coloque o conteúdo normalmente, basta que estejam dentro da DIV conteudo. :)
Vamos ao arquivo JavaScript – salve-o como load.js
function loading()
{
    //criando um novo elemento div
    x = document.createElement(“div”)
//atribuindo o id ao novo elemento
x.id = “loader”
   //adicionando conteudo formatado pelo CSS na div loader
   x.innerHTML   = ’<div id=”info” class=”info”>’
   x.innerHTML += ’<p>Carregando…</p></div>’
   // nova div ira aparecer depois da div conteudo
   conteudoDiv = document.getElementById(“conteudo”)
   //inserindo a div loader dentro do body e apos a div conteudo
   document.body.insertBefore(x, conteudoDiv)
}
//função aguarda a pagina carregar para alterar
//propriedade display do elem. fazendo sumir
window.onload = function(){
    //obtendo as propriedades do elemento div conteudo
    obj2 = document.getElementById(“conteudo”)
    //exibindo a div conteudo (display none no CSS)
    obj2.style.display = ‘block’
//obtendo as propriedades do elemento div loader
   obj = document.getElementById(“loader”)
   //removendo o conteudo da div loader
    obj.innerHTML = “”
//ocultando a div loader apos o carregamento da pagina
   obj.style.display = ‘none’
}
Muito simples, mas foi a forma que encontrei de faze-lo, lembrando que eu também estou aprendendo e procurando explorar ao máximo os recursos do JS.
Vamos ver o arquivo CSS – salve-o como load.css
body{
margin:0px;
padding:0px;
}
#loader{
position:absolute;
width:100%;
height:600px;
}
#conteudo{
display:none;
}
.info{
width:100px;
float:right;
margin-right:2px;
margin-top: 2px;
}
.info P{
margin:0;
padding:3px;
background-color:red;
font:11px verdana;
color:#fff;
text-align:center;
}
Como perceberam o que acontece é que a o atributo DISPLAY do elemento DIV Conteudo dentro do BODY em primeira instância está definida no CSS como NONE, fazendo com que seu conteúdo não apareca no html, em seguida a chamada a função loading() é feita criando um novo elemento DIV dentro do BODY com o texto carregando e sua formatação no CSS, após o carregamento da página, nesse caso apenas um IFRAME, a DIV conteudo tem sua propriedade DISPLAY alterada para BLOCK, ou seja, passa a aparecer no HTML, após isso no window.onload a propriedade da DIV Loader que foi criada tem sua propriedade DISPLAY alterada para NONE, ou seja, deixa de aparecer e como essa div foi criada pelo javascript, mais precisamante pela função loading(), ela não aparece no código HTML.
É isso, não há muito segredo nesse exemplo, nada mais justo agora do que ver funfando!
Mas só uma coisa antes, se esse exemplo lhe ajudar por favor comente. agora veja o Exemplo Loader do Google
via blog do Rafael Clares

DISCUSSION

Como Testar o Android no PC

Oque É Android (Serio Você Não Sabe ?)
Android é o último sistema operacional para celulars, mas nem todo mundo tem acesso aos ultimos celulares. Mas tem um jeitinho de rodar o Android no Windows, Mac ou Linux. O Google provê um emulador do Android junto com o seu SDK, que é designado para desenvolvedores testarem seus programas, antes de mandarem para os celulares.

Começando

O emulador requer Java para rodar, se você ainda não tiver o java instalado baixe e instale normalmente.

Depois faça download do SDK do Android compatível com a versão do seu sistema operacional. No windows rode o arquivo SDK Setup.exe.

O SDK checará os servidores do Google por arquivos.

Se você ver um mensagem de erro de SSL, click em Settings na esquerda da janela que abriu atrás. Desabilite a opção Force https, click em OK e reabra o setup.

Agora o instalador de pacotes irá abrir. Você poderá escolher o que instalar e clicar em Install para começar a instalar o emulador no seu computador.

Por padrão todas as plataformas, exemplos e APIs estarão selecionadas para instalar. Isso pode demorar um pouco para fazer o download, pois há várias versões do Android, se você só quer brincar com o Android selecione só a versão que você precisa.

Uma vez começado a instalação, você verá uma janela mostrando o progresso do download e da instalação. Isso levará alguns minutos, dependendo da velocidade da sua internet.

Configurando o Emulador

Uma vez o download completo, você poderá configurar e testar o Android no seu computador. Selecione Virtual Devices no menu esquerdo, e clique no botão New na direita.

Coloque um nome para o seu Android virtual, e selecione a versão do Android que você quer usar.

Coloque um tamanho no campo SD Card, na verdade esse é um cartão SD virtual que o Android vai usar para armazenar suas configurações e arquivos. Depois escolha o tamanho da tela, o padrão é Nexus One mas tem vários tamanhos incluindo BlackBerry.

Clique em Create AVD quando você terminar.

O programa vai parecer que travou enquanto está criando o AVD, só espere até ver a janela de confirmação.

Agora está pronto para rodar o Android no seu PC! Selecione seu Android Virtual e clique em Start na direita.

O Android começará a carregar no seu emulador, várias janelas irão aparecer até que abra o próprio emulador, note que o tamanho de tela padrão irá mostrar o keypad e botões virtuais do lado direito da tela emulada.

Na primeira vez pode ser que demore mais para carregar. Finalmente você verá a tela inicial do Android.

tutorial retirado do blog www.mundonerd.org

DISCUSSION

maior site de programadores do brasil

Sem duvida estamos falando do www.codigofonte.com.br/

Um Pouco de História

A idéia para a construção de um site de códigos, começou no ano de 2002 quando Gabriel, percebeu que precisava guardar em algum lugar os códigos que desenvolvia, pois em vários projetos ele reutilizava muitos destes códigos. Nascia nesse momento um site chamado RoccoFroes.com. Este site acabou se tornando muito mais que um simples site para pesquisa pessoal de códigos.

    Gabriel percebeu que além dele, milhares de desenvolvedores tinham a necessidade de consultar códigos regularmente. Foi quando que surgiu a idéia de ampliar o conceito do site.
Primeiramente era preciso encontrar um novo nome para o novo site, pois RoccoFroes.com não era nada sugestivo :-).

    Gabriel não pensou 2 vezes, escolheu o domínio www.codigofonte.com.br. A idéia era, além de desenvolver um site de códigos e scripts, ampliar os horizontes e criar funcionalidades e ferramentas para que o site fosse atrativo e interativo, e este é o resultado...

    CodigoFonte.com.br é o site onde os membros são o centro das atenções. Contribuindo com conteúdo nossos membros acumulam pontos e ganham estrelas e com isso mais destaque no site . Os pontos podem ser trocados por produtos como: Camisetas, Pen Drives, MP3 Players, Livros, e muitos outros.

DISCUSSION

API Do Google Maps

bom dias atras estava dando uma olhada no Google Code é achei algo muito simples e divertido
criar imagens a partir de locais no Google Maps para você inserir em seu Site, Blog, Tumblr ...

(lembrando sempre que existe um limite de 1.000 consultas diárias )

DISCUSSION