Estender um background utilizando css

Usando o exemplo abaixo você consegue estender um background por toda a página HTML utilizando CSS.

body{
    background-image: url(url_da_imagem);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

background-image Diz qual imagem vamos usar.

background-size Diz o tamanho da imagem na página, nesse caso toda a página.

background-repeat Diz que não queremos que a imagem se repita na página(para preencher espaços vazios).

background-attachment Diz que queremos uma imagem fixa.

Read More

Como justificar um texto e quebrar palavras usando CSS

O código CSS abaixo cria uma classe que quebra palavras ao quebrar uma linha e ainda justifica o conteúdo.

.justificar{
  text-align: justify;
  word-break: break-all;
}

O conteúdo que usa essa classe deverá ficar como na imagem abaixo.

Read More

Compra de conta no Google Play

Essa semana comprei minha conta de desenvolvedor na Google Play, paguei o valor de 25 dólares que na cotação atual saiu pelo preço de 64 reais. E já publiquei meus primeiros apps, quem quiser acompanhar e instalar os apps clique aqui.

Estou desenvolvendo aplicativos usando Cordova com as linguagens HTML, JS e CSS, além de alguns frameworks para facilitar o trabalho. O próximo passo é aprender Angular JS durante as férias.

Read More

Simule um smartphone no Firefox

Se você trabalha com desenvolvimento web para dispositivos móveis o Firefox possui uma ferramenta que pode te ajudar a testar a interface em tamanhos de telas diferentes e ainda você pode testar eventos touch que são usado em smartphones e tablets.

Veja o exemplo abaixo:

Essa é a interface de teste em dispositivos móveis no Firefox, para ativar a função pressione as teclas Ctrl+Shift+M ao mesmo tempo.

Na interface que se abre o botão de x serve para fechar a interface, a caixa de seleção é usada para alterar a resolução, você pode configurar resoluções personalizadas, a setinha para a direita serve para girar a tela, o ícone de uma mão serve para ativar a simulação de eventos touch(ao ativar é necessário recarregar a página), e um botão muito útil com o ícone de uma câmera serve para tirar screenshots(imagem da tela, print).

É uma ferramenta muito útil para testar mobile web apps.

Se você não possui o Firefox instalado em seu computador baixe clicando aqui.

Read More

IDE online: Cloud9

O Cloud9 é uma ambiente de desenvolvimento online, nele você cria uma conta e pode ligar essa conta ao seu GitHub ou BitBucket e acessar os seus repositórios e transformá-los em projetos dentro do Cloud9, ele te oferece uma máquina virtual para que você possa instalar os pacotes necessários como o nodejs, npm, entre muitos outros, ele te oferece acesso a uma máquina virtual via terminal, ele oferece suporte a várias linguagens e frameworks como Python, Go, Meteor, C++, Julia, Mocha... ele oferece vários recursos que estão presentes em editores como o sublime text, recursos como o ctrl+d que a partir de um texto selecionado ele seleciona todos os outros iguais.

Para edição de código HTML ele exibe a página em um navegador embutido, também possível testar o conteúdo em uma nova página.

O mais incrível nele é a possibilidade de emular várias versões do Android, iPhone e iPad, isso é totalmente incrível, você pode desenvolver um website para dispositivos móveis e fazer os testes dentro do próprio site, além de tudo isso ele também é capaz de emular várias versões dos navegadores de internet mais populares que existem.

Para desenvolvimento web ele oferece ferramentas para debug, como breakpoints, variáveis de escopo, quando você está editando um código HTML em uma aba lateral ele marca para você o elemento selecionado e as suas dimensões, e alterações na página HTML são realizadas em tempo real no navegador embutido. Veja a imagem abaixo.

No exemplo a seguir eu utilizei o gcc pelo terminal para compilar e executar um programa em C.

Nesta imagem você pode ver também um olá mundo em Python.

Ele possui chat para trabalho colaborativo, dessa forma várias pessoas podem trabalhar no mesmo projeto.

O Cloud9 é ótimo para ser usado por iniciantes e por estudantes de programação, pois com ele você tem um ambiente de desenvolvimento completo e móvel.

Clique aqui e acesse e tenha 50 projetos de graça.

Read More

Palestra de desenvolvimento mobile com tecnologias web

No dia 18 eu ministrei uma palestra com o título "Desenvolvimento mobile com tecnologias web" em Teófilo Otoni para alunos do curso de Sistemas de informação, para alunos do curso técnico em informática da Doctum e para alunos do curso técnico de informática das cidades de Novo Cruzeiro, Padre Paraíso e Malacacheta, para mim foi uma ótima oportunidade de passar conhecimento adiante e espero que os alunos tenham absorvido bem esse conhecimento.

Durante a palestra eu apresentei ferramentas que podem ser usadas para desenvolver aplicativos, dentre elas o PhoneGap, jQuery, Ratchet e muitos outros.

Além disso fiz uma aplicação durante a palestra a aplicação obtêm a cotação atual do dólar e passa essa informação para o usuário por meio de uma notificação do sistema, dessa forma eu exemplifiquei uma aplicação que usa plugin do PhoneGap e também a comunicação com um servidor externo.

No link abaixo você irá encontrar o slide usado na palestra, o código fonte da aplicação que foi desenvolvida e o arquivo para instalar a aplicação no Android.

https://copy.com/G2H2izbBQtuGBtTw

Agradeço a todos que participaram e estou disposto a ajudar a quem se interessar a usar essas tecnologias e ferramentas.

Read More

jQuery: Inserir conteúdo com efeito fade

O código JS abaixo insere uma tag no body da página, e essa tag será mostrada com um efeito fade do jQuery.

$('body').append($('<div class="notification"><p>Você está deconectado!</p></div>').hide().fadeIn(800));

O comando .append() apenas insere uma tag na página e mostra ela, então para fazer o efeito fade nos escondemos a tag com .hide() e logo após mostramos ela com o .fadeIn(800), o valor entre parenteses pode ser alterado para alterar a velocidade do efeito.

Read More

Abrindo link no navegador do sistema operacional.

Usando o código abaixo como base é possível fazer com que um link seja aberto no navegador do Android.

<a onclick="window.open('asdasd.html', '_system')"> Clique aqui </a>

E fiz alguns teste e não adiante definir o href e colocar _system no atributo target isso não funciona, a única forma que consegui foi com o código acima.

Read More

Sair de um aplicativo usando PhoneGap

O PhoneGap é um framework usado para desenvolver apps para sistemas operacionais móveis usando HTML, CSS e JS, o código abaixo faz com que o aplicativo seja fechado, ele foi testado no Android e funciona corretamente.

navigator.app.exitApp();

Qualquer dúvida deixe seu comentário.

Read More