Desenvolva para a Web usando o Material Design com Materialize

O Material Design é uma forma de desenvolver interfaces, ela foi desenvolvida pela Google para ser usada em seu novo sistema operacional móvel o Android Lollipop.

Não demorou muito e esse padrão também começou a ser usado na web, é aí que surge o Materialize como framework de desenvolvimento de interfaces para web com o estilo do Material Design.

Esse framework disponibiliza vários elementos como botões, cards, listas, menus e muito mais, além de alguns elementos mais complexos que usam javascript em sua implementação.

Acesse a documentação e baixe o Materialize clicando aqui

Veja um demo do framework clicando aqui

Read More

Instalando e configurando o Cordova no Ubuntu 14.04

Neste artigo você confere a instalação e configuração do Cordova para desenvolvimento de aplicativos para Android,  esse tutorial funciona no Ubuntu 14.04 e 14.10, Elementary OS, Linux Mint e outros derivados do Ubuntu.

Instale o Node Package Manager (NPM) e o Node.js:

sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs
sudo npm install npm -g

Agora instale o Cordova:

sudo npm install cordova -g

Agora que instalamos o Cordova vamos configurar o ambiente de desenvolvimento do Android.
Vamos instalar o Java com os comandos:

sudo add-apt-repository ppa:webupd8team/java
sudo apt-get update
sudo apt-get install oracle-java8-installer

Agora você precisa baixar a SDK do Android clique aqui para baixar a versão certa para o seu sistema, baixe o "SDK Tools only".

Extraia o arquivo baixado, mova a pasta extraída para sua home e altere o nome para .android-sdk para ela ficar como pasta oculta.

Agora abra o arquivo ~/.bashrc (esse arquivo está na sua pasta home).

Adicione as seguintes linhas ao arquivo.

export ANDROID_HOME=$HOME/.android-sdk
export PATH=$PATH:$ANDROID_HOME/tools

Lembrando que se você colocar a pasta do Android SDK em um diretório diferente você o caminho acima será diferente também.

Agora digite o comando:

source ~/.bashrc

Agora digite o comando android e pressione enter, na tela que aparecerá marque Android SDK build-tools Rev. 19 em Tools, marque também Android 4.4.3 (API 19), os que estão marcados deixe como estão, clique em install, aceite as licenças e então install.
Feito isso, instale o ant com o comando:

sudo apt-get install ant

Agora encontre o id da versão correta do android para criar a máquina virtual, com o comando:

android list targets

Encontre a seguinte versão:

id: 4 or "android-19"
     Name: Android 4.4.2
     Type: Platform
     API level: 19
     Revision: 4
     Skins: HVGA, QVGA, WQVGA400, WQVGA432, WSVGA, WVGA800 (default), WVGA854, WXGA720, WXGA800, WXGA800-7in
 Tag/ABIs : default/armeabi-v7a, default/x86

Como podemos ver no meu caso o id é 4, no seu caso pode ser diferente

Agora crie a máquina virtual Android usando o comando abaixo:

android create avd --name android44 --target idDaVersãoDoAndroid --abi x86

Agora seu computador estará pronto para criar aplicativos para Android utilizando o Cordova.

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

Como executar uma função após o método .load() do jQuery

O jQuery é um framework JS usado para desenvolvimento web, com o código abaixo você poderá executar uma função após o carregamento da página referenciada no método .load()

$('body').load('notas.html', function() {
       alert('Sua página carregou');
});

O método acima carrega a página notas dentro da tag body da página atual, após isso ele exibirá um alerta informando o fim do carregamento.
Qualquer dúvida deixe o seu comentário.

Read More