Tag Archives: desenvolvimento

Desenvolvimento de aplicativos para Android no Ubuntu: primeiros passos e app Hello World

Desde maio de 2010,  o número de celulares usando Android comprovadamente já ultrapassa a quantidade de aparelhos rodando IOS (Iphones, Ipods, Ipads), e esses números vêm crescendo cada vez mais. Isso era de se esperar, considerando-se que o Android pertence ao Google, uma empresa que nunca fica para trás mediante concorrência, não é verdade? Dessa maneira, investir no desenvolvimento de aplicativos para a plataforma Android é o novo MUST do momento, e quem pegar o barco agora colherá um excelente retorno num futuro próximo. O quanto antes você entrar na onda, melhor.

Diferentemente do IOS, o Android não exige aplicativos “assinados”, não há licenças a serem pagas ou um sistema operacional específico a ser utilizado no desenvolvimento. Ou seja: qualquer pessoa pode desenvolver aplicativos para Android. Para colocá-los à venda na Android Market o desenvolvedor paga uma taxa única de 25 dólares, o que é bem mais acessível do que os salgados 100 dólares anuais que a Apple cobra de seus desenvolvedores IOS.

Nesse artigo da IDG Now! você pode entender porque a Android Market tem tudo para tomar o posto da Apple Store num futuro não muito distante: http://idgnow.uol.com.br/telecom/2010/10/26/artigo-5-razoes-para-a-android-market-superar-a-apple-store/ .

Movida por esses fatores, comecei meus estudos para desenvolver aplicativos para Android. Começo agora a postar alguns artigos relacionados a esse assunto, para ajudar quem está começando como eu.

A primeira coisa a fazer, obviamente, é preparar o seu ambiente para o desenvolvimento das aplicações. Nesse post, vou mostrar passo a passo essa preparação num Ubuntu 10.10. Antes de mais nada, é preciso deixar claro que a linguagem utilizada para o des. de apps Android é Java, por isso o ideal é que você tenha algum conhecimento básico da linguagem, e de preferência que já tenha utilizado anteriormente o Eclipse. Eu não sou programadora Java, mas mesmo assim consegui me aventurar nesse mundo porque já paguei uma cadeira de Java básico na faculdade. “O resto” você encontra na net e o Eclipse te ajuda a resolver, vá por mim!

E inclusive, está rolando um concurso que vai premiar com 20 mil reais o brasileiro que desenvolver a aplicação mais inovadora, confira detalhes aqui: http://www.androidbrasil.com/dev/477-atencao-desenvolvedor-android-quer-ganhar-r-20-mil

Então vamos lá:

1. Instalação do Eclipse

O Eclipse é um dos editores mais famosos do mundo Java, e por isso mesmo é o padrão usado pelo projeto Android, com plugins específicos para ele. A instalação é muito fácil, através do Ubuntu Software Center, que já vai instalar também a JDK e deixar tudo prontinho para o Java na sua máquina.

Acesse Applications -> Ubuntu Software Center. Faça a busca por “Eclipse”, e é só clicar no botão “install”.

2. Baixe e instale a SDK do Android

Agora é hora de baixar a SDK do Android. Acesse esse link: http://developer.android.com/sdk/index.html e faça download da versão para linux.

Após fazer o download, abra o pacote tgz e decompacte-o no seu home. Acesse a pasta gerada (no meu caso, android-sdk-linux_x86 ), entre na pasta “tools”, e execute o script “android”.

Vá na aba “Available Packages”, marque o checkbox ao lado do link do repositório. Uma série de opções irá aparecer para que você selecione o que você quer baixar. Você precisa selecionar pelo menos 1 SDK (eu marquei apenas a mais recente). Você pode baixar as outras versões depois, de maneira que possa testar sua aplicação em versões anteriores do Android.

Para maiores informações, acesse http://developer.android.com/sdk/installing.html .

3. Instalando o plugin do Eclipse

Depois que finalizar o download e e instalação da api, você já pode abrir o Eclipse. Acesse o menu “Help” -> “Install new Software” (ou Software Updates, caso sua versão seja a Ganymede).

Clique no botão “Add”. No campo “Name”, coloque “Android plugin”, e o no campo “Location” coloque o seguinte endereço: https://dl-ssl.google.com/android/eclipse/ . Dê ok.

Na lista de “available softwares” deverá aparecer um checkbox com a opção “Developer Tools”, que você deve marcar. Depois disso, vá clicando em “next” para realizar a instalação dos componentes. Você será perguntado para aceitar os termos de utilização, marque que aceita e finalize. O download vai começar, e depois que finalizar você deve reiniciar o Eclipse.

Agora, é hora de configurar o plugin. Acesse o menu “Window” -> “Preferences”. Selecione “Android” no menu esquerdo. Você deve indicar a localização do diretório da SDK que você instalou (no seu home, lembra?). Clique no botão “browser” e selecione o diretório onde você descompactou a sdk logo de início.

Clique em “Apply”, depois “OK”, e pronto.

4. Criando um Android Virtual Device (AVD)

No eclipse, acesse o menu “Window” -> Android SDK and AVD Manager . Selecione “Virtual Devices” no menu esquerdo. Clique em “New“, e a janela para criação da AVD vai aparecer. Defina o nome, e escolha o “target“, que é a versão do sdk que você vai usar (ou seja, a versão do Android que essa VM vai simular). Você pode ignorar os outros campos. Clique em “Create AVD” , e seu ambiente estará pronto.

5. Criando a aplicação “Hello World”

Agora que o seu ambiente de desenvolvimento está setado, é hora de testá-lo com uma aplicação “Hello World”. Comece criando o projeto no Eclipse. Clique em “File -> New -> Project”. Selecione “Android Project” e clique em “Next”. Preencha as informações pedidas com os seguintes dados:

  • Project name: HelloAndroid
  • Application name: Hello, Android
  • Package name: com.example.helloandroid
  • Create Activity: HelloAndroid

Selecione também o “Build Target” e Clique em “Finish”.

Agora, edite o arquivo HelloAndroid.java, que vai estar em: HelloAndroid -> src -> com.example.helloandroid . Esse código é o básico do básico, só para você testar o Hello World. Deverá ficar assim:

package com.example.helloandroid;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;

public class HelloAndroid extends Activity {
   /** Called when the activity is first created. */
   @Override
   public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       TextView tv = new TextView(this);
       tv.setText("Hello, Android");
       setContentView(tv);
   }
}

Depois de salvar o arquivo, é hora de rodar. Vá em “Run -> Run”, e selecione “Android App”. O Eclipse irá então rodar a aplicação no simulador, e depois de dar boot no Android (pode levar alguns minutos), você deverá ver o seguinte resultado:

Você pode encontrar tutoriais simples para aprendizado no site oficial do Android: http://developer.android.com/resources/tutorials/hello-world.html .

Lançamento TweetAuditor – monitore seu Twitter facilmente

TweetAuditor, meu mais recente projeto, desenvolvido totalmente em cima da biblioteca open source TwitterTools, acaba de ser lançado.

A versão beta do TweetAuditor foi lançada ontem (19/10/2010) à tarde, divulgada apenas dentro do Twitter, e em poucas horas depois já estava sendo utilizada por centenas de usuários.

Com o TweetAuditor, você pode monitorar facilmente a sua rede Twitter, obtendo informações extremamente úteis e estatísticas acerca de: seguidores, amigos (quem você segue), retweets recebidos, mentions (citações) recebidas, sua atividade semanal e mensal, além de outras funcionalidades que ainda serão implementadas.

Uma das funcionalidades mais interessantes do TweetAuditor é conseguir monitorar quem te deu unfollow recentemente (coisa que ficou ainda mais difícil depois do lançamento do novo Twitter – saber quem deixou de te seguir).  No dia seguinte ao que você se cadastrou, já é possível acompanhar diariamente esses números com muita facilidade no site. Mesmo quem não utiliza o Twitter profissionalmente vai adorar acompanhar esses dados.

Outra ferramenta muito útil é a listagem de todos os usuários que você segue e não seguem você, e também de quem segue você, e você não segue.

Quem utiliza a interface web do Twitter também sofre para acompanhar todos os retweets recebidos, e essa é outra opção que ficou um pouco mais complicada na nova interface do Twitter, segundo a opinião de várias pessoas. No TweetAuditor você acompanha seus tweets, mentions recebidas e retweets recebidos nos dias anteriores, tudo separado por data.

Tudo isso disponível em português por padrão, e também em inglês.

As funcionalidades adicionais que estão previstas ainda para esse mês de Outubro incluem uma versão mobile e mais gráficos de estatísticas comparativas. Também haverá futuramente a opção de criar um “watchpoint” em uma data específica, de maneira que você poderá marcar com tags dias em que fez algo diferente, como o lançamento de uma campanha, para monitorar o retorno recebido.

As atualizações são feitas automaticamente, de maneira que você não é obrigado a acessar o site todos os dias para que os dados sejam computados. Porém, se você mudar a senha do seu Twitter, não esqueça de acessar o site para atualizar suas chaves de acesso, caso contrário não será possível obter suas informações na atualização diária, o que resultará em dados zerados nas estatísticas.

Sigam o Twitter oficial do TweetAuditor e fiquem por dentro de todas as atualizações e novas funcionalidades do sistema: @TweetAuditor

Este é um projeto 100% brasileiro, com muito orgulho!

Update janeiro/2011: O TweetAuditor já está na versão 2.0, com visual novo e novas funcionalidades. :)

Manual do programador inexperiente

Hoje é o Dia do Programador. A data é comemorada no 256º dia do ano, já que “256″ é o número emblemático que simboliza a quantidade de valores distintos que podem ser representados com um byte de oito bits.

A cada ano dezenas, centenas de recém formados programadores entram no mercado, com pouca ou quase nenhuma experiência, para concorrerem com profissionais mais experientes, nem sempre formados.

É verdade que no quesito programação, a experiência vale mais que o diploma. Por melhor que um curso seja, não haverá tempo de ensinar tudo, e esse é o tipo de coisa que se aprende na prática. Após muitas tentativas, erros e acertos, um programador adquire a experiência necessária para poder dizer com segurança que pode resolver uma demanda, ou que isso não será possível na linguagem que ele domina, e terão de partir para uma alternativa. A experiência produz códigos mais limpos e organizados, com soluções otimizadas.

Mas enfim: você é inexperiente; acabou de sair da faculdade, ou simplesmente quer aprender a programar por conta própria. O que você deve saber, e por onde começar?

Se você já escolheu a linguagem que quer trabalhar, pode pular direto para o item 2.

1. Escolher uma linguagem.

Nas faculdades, somos obrigados a cursar cadeiras de lógica e algoritmos, e depois temos de aprender uma linguagem que é definida por eles como a básica. Mas quem vai definir a linguagem que será a sua especialidade, é você.

Para tanto, você precisará levar em consideração vários fatores: facilidade de aprendizado; facilidade de montar o ambiente de desenvolvimento; oportunidades no mercado de trabalho; possibilidades que a linguagem oferece; material disponível na internet gratuitamente.

Não existe melhor ou pior linguagem, porque tudo depende do uso que se deseja fazer, da finalidade, do tempo que você espera dedicar, e do retorno que você espera financeiramente.

Depois de estudar bem as possibilidades e decidir,  você pode partir para o próximo passo. As minhas humildes sugestões onde vejo um bom futuro são: Python, Ruby on Rails e o bom e velho PHP. Vendo pelo conjunto, eu continuo achando PHP a linguagem mais fácil tanto para montagem do ambiente, em questão de preços de servidor de hospedagem e facilidade de aprendizagem. Em compensação, o Python é a tendência pro futuro, e o mercado ainda não tem tantos programadores Python. O perigo é você não encontrar facilmente um emprego pra começar, pois a demanda é sempre maior pra PHP.

Obs: se você não tem experiência nenhuma com qualquer tipo de linguagem de programação, não tem idéia do que seja um IF ou WHILE, pode ser útil estudar algoritmos antes de começar pra valer. Mas não é obrigatório; algumas pessoas tem mais facilidade com a lógica da programação, e entendem o processo ao ver os exemplos da linguagem.

2. Montagem do ambiente de desenvolvimento no seu pc

Seja qual for a linguagem que você deseja trabalhar, precisará de um ambiente de desenvolvimento no seu computador, para começar a testar os códigos. Programação só se aprende na prática. Procure tutoriais de instalação dos programas necessários na internet e prepare a sua máquina.

No caso do PHP, você pode baixar o Wamp (para Windows), que já vem com PHP + Apache + MySQL + PhpMyAdmin. Se você usar Linux (Ubuntu), veja nesse artigo como preparar um bom ambiente de desenvolvimento para PHP .

3. Procure documentação

É sempre bom ter o site oficial de linguagem, com a referência completa de suas funções, aberto. Nenhum programador decora todas as funções da linguagem, a consulta é sempre necessária, nem que seja para relembrar os argumentos que devem ser passados para uma função.

Para começar, é importante também um manual ou tutorial, que irá guiá-lo pelos primeiros passos. Exemplos práticos são sempre a melhor maneira de assimilar, mas não adianta só olhar; é preciso copiar e repetir na sua máquina, ver o funcionamento, modificar, personalizar. Assim você fixa o que está estudando.

Depois de se acostumar bem com a sintaxe da linguagem, é hora de partir para o próximo passo.

4. Pratique criando coisas novas

Mais uma vez eu repito: programação se aprende na prática. Você precisa praticar bastante, criando coisas diferentes, personalizando o código, de preferência para criar algo útil. Criar um sistema / programinha / site com utilidade é ver o resultado do seu estudo, diferente de quando estamos só testando pequenos trechos de código.

5. Estágio – programação na vida real

Nada melhor que um estágio na área para ir ganhando experiência em casos reais. Programar para si mesmo é mais fácil, claro! Quando temos de resolver uma demanda, com prazo determinado, as coisas são diferentes. Isso é programação na vida real, coisa que a gente só aprende no estágio ou emprego.

Agora, o TopFive do bom programador:

  1. Seja organizado no seu código: utilize identação para aninhar blocos, tente usar um padrão para as variáveis. Limpe seu código sempre que possível, porque em programação (assim como em várias outras áreas), menos é mais.
  2. Deixe comentários quando necessário. Não precisa comentar linha por linha.
  3. Leia códigos de outras pessoas, linha por linha para compreender como foi feito. É muito bom compreender o raciocínio de outros programadores mais experientes, porque cada pessoa pensa de um jeito diferente para resolver um problema. Às vezes a solução é incrivelmente simples, mas a gente complica, muitas vezes por falta de experiência mesmo.
  4. Pratique sempre, de preferência todos os dias. A melhor maneira de fazer isso é criando um projeto real para manter e ir melhorando pouco a pouco, com novas implementações. Além de estar aprendendo, você irá gerar um resultado que poderá trazer retorno financeiro e/ou profissional.
  5. Compartilhe o conhecimento! Ajude quem está começando, afinal você já passou por isso um dia e sabe como é difícil.

Espero que essas dicas ajudem alguém. Abraços!

Quero ter um site, e agora? – Criando um site/blog com o WordPress passo a passo

Muitas pessoas chegam até mim com essa pergunta comum: “como faço para ter um site” ?

Em virtude disso, resolvi sintetizar tudo que eu sempre explico em um único post, que serve para leigos totais no negócio da internet, ou para “semi leigos”, pessoas que usam a internet e de repente até já têm ou tiveram um blog gratuito, mas não sabem como proceder para ter um site “de verdade”, um blog profissional, ou um simples portfolio online, com endereço próprio.

Quanto Custa

Além do conteúdo e sistema do site em si (em breve falaremos sobre isso), você vai precisar basicamente de 2 coisas separadas, mas que “trabalham juntas”: um servidor de hospedagem e um domínio. São essas duas coisas que você vai de fato precisar pagar para ter o seu espaço.

Fazendo uma analogia à vida real, o servidor de hospedagem é um aluguel que você paga para morar numa casa e as pessoas poderem te visitar lá. O domínio é o endereço, essencial pra que as pessoas consigam chegar na sua casa.

O domínio é o nome, o endereço que identificará o seu site. Existem muitas extensões de domínios disponíveis, porém os mais comuns ainda são o .com.br, o .com e o .net . Para registrar esses domínios, não precisa ter cnpj (antigamente, para registrar um .com.br precisava ). Você pode registrar em qualquer entidade reconhecida como Registrar, mas no caso de domínios .com.br eu recomendo que registre diretamente no registro.br .

O pagamento de um domínio é ANUAL. O custo varia, cada extensão tem preços diferenciados. O .com.br custa 30 reais (no registro.br), e há muitos anos esse valor não sofre nenhuma alteração. Já os domínios .com e .net, por exemplo, variam muito de empresa pra empresa, mas você consegue encontrá-los por 15 reais ( redehost.com.br ) em alguns sites, enquanto que em outros você só encontra a 30 reais.

A hospedagem do site costuma ser mais cara (considerando uma anualidade), mas nada muito exagerado; você tem opções de pagar anualmente, mensalmente, por semestre ou trimestre, e por aí vai.  O valor varia muito, pois depende das características do sevidor: espaço em disco, limite de transferência mensal, tecnologias disponíveis… Uma hospedagem básica, que suporte PHP e banco de dados MySQL (necessários para instalação do WordPress, que iremos ver neste artigo) pode custar a partir de R$ 5,00 mensais, uma pechincha não é verdade?

Ou seja: juntando o custo anual da hospedagem de um site básico, mais um domínio .com.br, sairia em torno de R$ 90,00 , o que dá R$ 7,50 por mês. Um valor módico comparado às possibilidades que você terá ao criar seu “espaço na internet” – um termo bem clichê, porém, que não deixa de ser verdadeiro. Pode inclusive sair mais barato, vale salientar. Essa conta aí é pra um caso comum, com domínio de 30 reais.

Agora você deve estar se perguntando: “afinal, por que é tão caro criar um site? Por que as empresas e profissionais cobram tanto?”

A resposta está na personalização, que gera um resultado profissional. Criar um site especificamente para sua empresa, com o layout direcionado para o seu conteúdo, sua marca, seus produtos etc – isso envolve a participação de profissionais capacitados que vão desenvolver um resultado único. Você não verá (pelo menos essa é a idéia!!!) layouts iguais ao seu em nenhum outro site, como acaba acontecendo quando usamos templates prontos. Você poderá cobrar modificações e suporte. Terá uma assistência, não estará à deriva na internet.

Além disso, no geral, quando você paga uma empresa ou profissional para desenvolver seu site, fica “livre” dessas burocracias de registro e do trabalho de instalação de sistemas.

Masssssssss, se a sua idéia é começar com um site básico ou blog, e gosta de resolver as coisas sozinho, sem abrir muito a carteira… O restante desse artigo é pra você :D Vamos ver como é o processo passo a passo para criação de um site usando WordPress como plataforma.

O WordPress é utilizado principalmente como blog, mas também pode ser personalizado para ter a aparência de um site empresarial. Para este artigo, vamos levar em consideração a criação de um Blog.

1. Registre o domínio desejado

Antes de registrar, escolha com carinho o nome! Ele será o seu endereço, então o ideal é que seja fácil de dizer, sem que você precise soletrar letra por letra quando falar para alguém. É melhor que seja um pouco maior e facilmente lembrável do que um conjunto de siglas que as pessoas não vão conseguir memorizar com facilidade (imagine-se naquela rodinha de amigos, e de repente quando tocarem no assunto, você for dar o endereço pra alguém! isso acontece sim). Você também poderá usar o domínio para seu e-mail, vale lembrar.

Hoje em dia não é tão fácil encontrar o domínio ideal, já que são tantos bilhões de sites por aí afora já com seus endereços registrados. Mas sempre tem algo legal disponível.

Se você for registrar no registro.br, deixe em branco os campos do DNS, pois você só terá essa informação depois de contratar o servidor de hospedagem.

A vantagem do registro.br é que assim que registrado, o domínio fica disponível para uso, mesmo antes de realizar o pagamento. Você tem um prazo de cerca de 1 mês para pagar, e já pode usar o domínio.

Em outros sites, o domínio só será liberado após a comprovação do pagamento (até 2 dias úteis no caso de boleto bancário).

2. Contrate a hospedagem

Contrate o serviço de hospedagem que você achar melhor (só hospedagem). Geralmente, eles liberam o serviço em pouco tempo, alguns até oferecem um teste gratuito por uns dias. No geral, após cadastrar-se, você terá um boleto para pagar (o pagamento é adiantado), e o serviço só será disponibilizado quando o pagamento for confirmado – o que leva até 2 dias úteis.

Dê preferência a empresas que trabalhem com CPanel, pois este é o painel de administração mais utilizado no mundo, que irá facilitar a manipulação dos serviços (criação de e-mails, por exemplo) e uma possível transferência mais tarde, caso você queira mudar para outro servidor de hospedagem.

Certifique-se de que o servidor suporte PHP 5 e MySQL.

3. Modifique o DNS do domínio

Após a contratação do serviço de hospedagem, quando for confirmado e ativado, você deverá receber da empresa contratada algumas informações, como login e senha de ftp (muito importante) e servidores DNS (muito importante também).

Você deverá acessar a página onde registrou o seu domínio, e modificar os servidores DNS dele. Essas informações são fornecidas pela empresa da hospedagem. Geralmente, são 2 endereços no formato: ns1.empresahospedagem.com.br e ns2.empresahospedagem.com.br  .

Após atualizar essa informação, pode levar horas ou até um dia para que seja replicada pela internet. A partir daí (quando a informação do DNS for atualizada), quando você digitar o domínio registrado no navegador, irá abrir na sua página (que estará em branco, é claro… no máximo com um aviso de “em breve” ).

4. Instale o WordPress

Agora que tudo já está no lugar, é hora de fazer a instalação do WordPress. Acesse http://br.wordpress.org/ e faça download da versão mais recente, descompacte-o. Você terá uma pasta chamada “wordpress”, é essa pasta que você vai enviar para o site.

Você agora precisará de um programa de FTP para enviar os arquivos do wordpress para o seu site. Minha sugestão é o FileZilla, que é gratuito e está disponível para todas as plataformas (Windows, Linux, Mac). Outra boa opção é a extensão FireFtp, para o Firefox.

As informações de conexão ao ftp (login, senha e host) são fornecidas pelo servidor de hospedagem, geralmente assim que sua conta é efetivada, por e-mail. Utilize esses dados para conexão.

Obs: na maioria dos servidores, ao conectar-se, você irá se deparar com a sua pasta “home”, onde poderá haver várias pastas, que fazem parte do sistema do servidor de hospedagem. A pasta onde os arquivos do site ficam é a pasta public_html ou www (na verdade, a pasta www é apenas um alias/atalho para a public_html). É nessa pasta onde deverá ficar a pasta do wordpress.

Depois de enviar toda a pasta do WordPress para o servidor, acesse http://seudominio.com.br/wordpress . Você deverá visualizar uma mensagem como essa:

Caso tenha aparecido algum erro, ou outra coisa qualquer diferente dessa mensagem,  procure a ajuda do WordPress para tentar resolver o problema em: http://br.forums.wordpress.org/

Antes de continuar com a instalação, precisamos criar um banco de dados MySQL, que será usado pelo WordPress. Algumas empresas de hospedagem já criam automaticamente o seu banco de dados e fornecem as informações no e-mail que é enviado após a ativação da conta, mas geralmente precisamos criar o banco manualmente.

Acesse o painel do seu servidor de hospedagem (caso tenha CPanel, ficará no endereço: http://seudominio.com.br/cpanel ). Você deverá fornecer o mesmo login e senha do ftp. Vá até a opção “Bancos de Dados MySQL” e crie um banco. Depois crie um usuário , definindo uma senha. Depois de ter criado o usuário, você precisará dar permissão completa a esse usuário no banco de dados que criou. No vídeo abaixo você confere um passo a passo detalhado desse processo (no CPanel):

Agora sim, podemos prosseguir com a instalação. Clique no botão “Criar um arquivo de configuração” que apareceu no seu site. A partir daí, basta seguir as instruções. A instalação é muito simples, são basicamente 2 telas onde você deve fornecer as informações que são pedidas: primeiro, o nome do banco de dados, o usuário do banco de dados e a senha, e o servidor do mysql (em 99% dos casos, deixe como está , “localhost”). O prefixo deixe como está.

A tela seguinte pedirá o título do seu blog / site, e o seu e-mail. E pronto! Após instalar, ele irá fornecer uma senha aleatória, que você usará com o login “admin” para acessar a administração do site – inicialmente em http://seudominio.com.br/wordpress/wp-admin .

Se você tiver dúvidas, nesse link tem um tutorial  bem detalhado com vídeos ensinando como instalar o WordPress: http://wp-brasil.org/dicas-e-tutoriais/instalando-o-wordpress

4. Coloque o wordpress na raiz do site

Para que o seu wordpress fique acessível no endereço raiz do site, ( http://seudominio.com.br , em vez de http://seudominio.com.br/wordpress ) existe uma configuração a ser feita. Acesse a administração ( http://seudominio.com.br/wordpress/wp-admin ) , vá no menu “Configurações” -> “Geral” . Altere a opção “Endereço do site (URL)” para o seu domínio (remova o /wordpress). Clique em salvar.

Copie (não mova, copie!) o arquivo index.php da pasta /wordpress e coloque-o na raiz. Edite o arquivo e altere o caminho definido nele. A linha estará assim:

require('./wp-blog-header.php');

Você deverá modificá-la para ficar assim:

require('./wordpress/wp-blog-header.php');

Depois de alterar e enviar o arquivo index.php via FTP para a raiz do site (a pasta WWW), acesse o endereço principal para ver se está ok. Já deve abrir o seu blog.

5. Personalize para os seus propósitos

Agora que está tudo funcionando, o trabalho é a customização do seu recém-instalado WordPress. Primeiramente, é bom procurar um template legal, que tenha a ver com o seu propósito. Para isso, acesse o menu “Aparência – Temas” e procure um template, você pode ver os que estão em destaque, os mais populares, e também pode buscar por termos específicos / cores / funcionalidades. A instalação é bem intuitiva, não tem erro.

Além do template, existem também os plugins, que são formas de extender e personalizar as funcionalidades do seu WordPress.

Confira nesse outro artigo 10 dicas e plugins essenciais que vão dar uma força pro seu WordPress: http://erikaheidi.com/2010/05/03/turbine-o-seu-wordpress-10-dicas-e-plugins-essenciais/

6. Comece a postar!

Depois disso tudo, só falta uma coisa: conteúdo! O mais importante, no final das contas :)

BOA SORTE!

PHP GD – Escrevendo texto em imagens com fontes TTF

Em mais um artigo sobre a utilização da biblioteca GD no php, vamos ver como podemos adicionar textos em imagens, escritos com qualquer fonte True Type.

A título de exemplo, vamos utilizar a foto abaixo:

Faremos um script que irá escrever exatamente no papelão que o carinha está segurando, e o resultado vocês já devem imaginar :D A idéia é ficar o mais realista possível, é claro!

O primeiro passo é encontrar uma fonte legal. Isso é fácil; sites de fontes para download gratuito não faltam na internet. Optei por uma fonte com estilo escrito à mão, para dar mais veracidade ao resultado. Baixei uma chamada “Handprinting” [ download aqui ].

Testando pouco a pouco na mão, cheguei às coordenadas, inclinação e tamanho ideal da fonte. O ideal é ir testando mesmo, até se ajustar. Pra ficar mais divertido, coloquei pra pegar o texto via GET, caso a pessoa queira definir dinamicamente :) Vamos ao código:

<?php
header("Content-type: image/jpeg");
// Set the enviroment variable for GD
putenv('GDFONTPATH=' . realpath('.'));

$result = imagecreatefromjpeg("placa.jpg");

if(!empty($_GET['texto']))
	$texto = $_GET['texto'];
else
	$texto = "dorgas, mano!";

$font = "Printing.ttf";
$black = imagecolorallocate($result, 0, 0, 0);
imagettftext($result, 60, 5, 250, 450, $black, $font, $texto);

imagejpeg($result);
?>

Resultado:


Demo online:

Digite uma frase:

 

Observações do script: A definição da constante GDFONTPATH é necessária quando não utilizamos um caminho absoluto ao definir a fonte ttf a ser usada. Retirando essa definição no exemplo acima, o script deixará de funcionar na maioria das instalações atuais do php, a não ser que você defina o caminho utilizando $_SERVER['DOCUMENT_ROOT'] para dizer o caminho completo da fonte.

Manipulação de imagens no PHP com a lib GD – Colagem de fotos

Em mais um post sobre manipulação de imagens usando a lib GD no PHP, veremos como é possível fazer sobreposição de imagens, resultando em uma espécie de colagem de fotos.

Primeiro Exemplo – Mural Warhol

Nesse primeiro exemplo vamos repetir a mesma foto em versões diferentes, aplicando filtro de cor para um resultado que lembra o estilo de Andy Warhol.

<?php
header("Content-type: image/jpeg");

$source = "foto_exemplos.jpg";

$tamanho = getimagesize($source);

$wi = $tamanho[0];
$he = $tamanho[1];

/* numero de colunas e linhas da montagem nXn, altere para modificar o n. de colagens */
$c = 2;
$l = 2;
$result = imagecreatetruecolor($wi*$c, $he*$l);

for($i=0;$i<$l;$i++)
{
	for($j=0;$j<$c;$j++)
	{
		$source = imagecreatefromjpeg("foto_exemplos.jpg");
		imagefilter($source, IMG_FILTER_COLORIZE, rand(0,255), rand(0,255), rand(0,255),40);
		imagecopyresampled($result, $source, $j*$wi, $i*$he, 0, 0, $wi, $he, $wi, $he);

	}

}

imagejpeg($result);

?>

O resultado será sempre diferente, pois os valores passados à função imagefilter são randômicos. Cada vez que você der reload no script ele irá gerar diferentes combinações de cores. Aqui está um exemplo de resultado:

Segundo Exemplo – Foto com Colagens / Moldura

Nesse exemplo você verá como é fácil colar imagens png com transparências em cima de uma foto. Vou colar um png de um passarinho no canto esquerdo superior, e depois uma árvore no canto direito inferior.

<?php
header("Content-type: image/jpeg");

$result = imagecreatefromjpeg("foto_exemplos.jpg");

$bird = imagecreatefrompng("bird.png");
imagecopyresampled($result, $bird, 0, 0, 0, 0, imagesx($bird), imagesy($bird),  imagesx($bird), imagesy($bird));

$tree = imagecreatefrompng("tree.png");
imagecopyresampled($result, $tree, imagesx($result)-imagesx($tree), imagesy($result)-imagesy($tree), 0, 0, imagesx($tree), imagesy($tree),  imagesx($tree), imagesy($tree));

imagejpeg($result);

?>

Resultado:

Seguindo esse mesmo princípio, é possível colar molduras e criar montagens bem interessantes. No exemplo abaixo, usando uma moldura com o mesmo tamanho da foto (o código é quase igual, colando a moldura na posição 0,0 da foto):

<?php
header("Content-type: image/jpeg");

$result = imagecreatefromjpeg("foto_exemplos.jpg");

$moldura = imagecreatefrompng("moldura.png");
imagecopyresampled($result, $moldura, 0, 0, 0, 0, imagesx($moldura), imagesy($moldura),  imagesx($moldura), imagesy($moldura));

imagejpeg($result);
?>

Resultado:

Como você pode ver, a aplicação de pngs e colagem de fotos é muito simples. O que dificulta mais o trabalho com esses métodos é o posicionamento e tamanho das imagens. Geralmente, você precisará utilizar algum esquema mais elaborado com javascript para definir a posição certa aonde colar as imagens, caso faça algo totalmente dinâmico. Redimensionamento também pode ser extremamente necessário.

Para maiores informações sobre a GD e referência das funções utilizadas aqui, verifique : http://www.php.net/manual/en/ref.image.php

Montando um site php com autenticação baseada em Twitter+OAuth e persistência

Neste artigo você verá como é possível criar um site em php com autenticação de usuários toda baseada no Twitter, usando a biblioteca Twittertools que desenvolvi.

Antes de começar, vamos ter uma idéia mais detalhada de como é feita a autenticação do usuário pelo Twitter através do seu site, que nesse fluxograma chamarei de APP:

  1. Usuário acessa APP. APP identifica que ele não está logado;
  2. APP faz uma requisição ao Twitter, identificando-se (com suas chaves consumer_key e consumer_key_secret )  os tokens de acesso (request_token e request_token_secret);
  3. APP faz nova requisição ao Twitter, identificando-se com suas chaves e passando o request_token, pedindo o link de autorização para o usuário; guarda o request_token_secret na sessão;
  4. Twitter retorna o link que APP deve passar para o usuário autorizá-la;
  5. Usuário acessa o link e autoriza APP;
  6. Usuário é redirecionado de volta para APP trazendo o request_token;
  7. APP recebe o request_token e faz uma nova requisição ao Twitter, informando o request_token e o request_token_secret, e solicitando o access_token e access_token_secret do usuário;
  8. Twitter responde com access_token e access_token_secret do usuário, e APP agora pode realizar qualquer requisição usando estas chaves.

As chaves consumer_key e consumer_key_secret devem ser obtidas ao registrar a sua aplicação no Twitter. Instruções detalhadas de como fazer isso podem ser encontradas aqui: http://erikafocke.com.br/twittertools . Uma vez com estas chaves, já é possível “começar a brincadeira”.

Download da biblioteca Twittertools: http://github.com/erikaheidi/Twittertools

No nosso exemplo, criaremos uma “mini” rede de usuários que serão listados na página principal. Veja a demonstração funcionando aqui: http://erikafocke.com.br/demos/happyelephant

Precisaremos criar uma tabela de usuários, para reconhecermos quando eles retornarem ao site. Guardaremos o id to usuário no Twitter, que será a nossa chave primária, e as chaves. A idéia de guardar as chaves é funcional para o caso de você realizar operações com a conta do usuário mesmo quando ele não estiver logado no seu site, ou quando você já possui um outro sistema de autenticação e quer apenas integrar o Twitter ao seu site, possibilitando que as pessoas façam login como de costume e possam postar atualizações no Twitter sem precisar repetir esse processo de autorização da aplicação.

A tabela básica para o nosso exemplo é a seguinte:

CREATE TABLE IF NOT EXISTS `tw_users` (
  `tw_id` int(11) NOT NULL,
  `access_token` varchar(200) NOT NULL,
  `access_token_secret` varchar(200) NOT NULL,
  `last_seen` datetime NOT NULL,
  PRIMARY KEY  (`tw_id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

Além das classes da TwitterTools, criei também uma classe de usuário, que irá salvar os dados em banco e atualizar a data/hora em que o usuário acessa o site, para sabermos quando foi a última vez que ele acessou. Essa classe também lista os usuários que já se “cadastraram” no site.

<?php

class User {

	var $tw_id;
	var $atoken;
	var $atoken_secret;
	var $last_seen;

	var $new;
	static $table = "tw_users";

	function __construct($tw_id,$atoken,$atoken_secret)
	{
		$this->tw_id = $tw_id;
		$this->atoken = $atoken;
		$this->atoken_secret = $atoken_secret;

	}

	function update()
	{
		$date = date("Y-m-d H:i:s");

		$query = mysql_query("SELECT last_seen FROM " . self::$table . " WHERE tw_id='$this->tw_id' ") or die(mysql_error());
		if(mysql_num_rows($query))
		{
			$this->last_seen = mysql_result($query,0);
			$upd = mysql_query("UPDATE " . self::$table . " SET last_seen='$date' WHERE tw_id='$this->tw_id' ") or die(mysql_error());
		}
		else
		{
			$this->new = 1;
			$ins = mysql_query("INSERT INTO " . self::$table . "(tw_id,access_token,access_token_secret,last_seen) VALUES('$this->tw_id','$this->atoken','$this->atoken_secret','$date') ") or die(mysq_error());
		}
	}

	static function getUsers($limit=30)
	{
		$query = mysql_query("SELECT tw_id FROM " . self::$table . " ORDER BY last_seen LIMIT $limit") or die(mysql_error());

		while($x = mysql_fetch_array($query))
		{
			if(empty($lista_users))
				$lista_users = $x['tw_id'];
			else
				$lista_users .= ",".$x['tw_id'];
		}
		return $lista_users;
	}

}
?>

No arquivo index.php você vai ver as coisas “funcionarem”. Não vou colar aqui pra não ficar grande demais o post! Vale mais a pena fazer o download :)

Você pode fazer download da pasta com todo o código completo desse exemplo aqui: happyelephant.zip

Dúvidas? Deixe um comentário :) Gostou? Comente também, aproveite e dê um retweet :P

Manipulação de imagens no PHP com a lib GD – gerar thumbnails

Continuando a série de posts sobre manipulação de imagens no PHP, dessa vez vamos trabalhar com outra funcionalidade muito comum e extremamente útil da GD: redimensionamento de imagens.

Ao se trabalhar com imagens enviadas pelo usuário através de um formulário, precisamos estabelecer limites de tamanho para que a imagem se enquadre ao nosso layout de site, além de evitar transtornos com o espaço em disco ocupado por imagens excessivamente grandes.

Para gerar um resultado fiel à imagem original, precisamos realizar um cálculo proporcional para definir o novo tamanho da imagem, baseado nos tamanhos máximos que iremos definir como limites.

O algoritmo é simples: passamos a largura e altura máximos, pegamos a largura e altura atuais da imagem. Caso ultrapassem os tamanhos máximos, iremos calcular usando regra de três quais serão os novos tamanhos da imagem (não podemos simplesmente definir que a imagem terá a largura e altura máximos definidos, pois isso poderá deixá-la com aspecto esticado em muitos casos). Após definir os novos tamanhos, criamos uma imagem em branco com o tamanho definido, copiamos a imagem original para dentro dessa nova imagem e salvamos o resultado.

Vamos ver como isso funciona na prática, usando a GD:

<?php
header("Content-type: image/jpeg");

$larguraMax = 200;
$alturaMax = 100;
$source = "foto_exemplos.jpg";

$tamanho = getimagesize($source);

$wi = $largura = $tamanho[0];
$he = $altura = $tamanho[1];

/* se for formato 'paisagem' */
if($largura > $larguraMax)
{
	$largura = $larguraMax;
	$altura = ($largura * $tamanho[1]) / $tamanho[0];
}
/* pode acontecer que mesmo depois do redimensionamento inicial baseado na LARGURA, a imagem continue
 * com a ALTURA maior que a permitida. por isso não usamos else aqui, e fazemos a checagem contraria.
 */
if($altura > $alturaMax)
{
	$altura = $alturaMax;
	$largura = ($tamanho[0] * $altura) / $tamanho[1];

	/* pode acontecer que mesmo depois do redimensionamento inicial baseado na ALTURA, a imagem continue
	 * com a LARGURA maior que a permitida. por isso não usamos else aqui, e fazemos a checagem contraria.
	 */
	if($largura > $larguraMax)
	{
		$largura = $larguraMax;
		$altura = ($largura * $tamanho[1]) / $tamanho[0];
	}
}

$thumb = imagecreatetruecolor($largura, $altura);
$imagem_orig = imagecreatefromjpeg($source);

/* argumentos da imagecopyresampled / imagecopyresized :
 * imagem destino, imagem origem, coordX destino, coordY destino, coordX origem, coordY origem,
 * largura destino, altura destino, largura origem, altura origem
 */
imagecopyresampled($thumb, $imagem_orig, 0, 0, 0, 0, $largura, $altura, $wi, $he);
/*
 * para salvar em disco, acrescente à imagejpeg os parâmetros: nome do arquivo e qualidade da imagem.
 * assim:	imagejpeg($thumb, "resultado.jpg", 100);
 * qdo você não define os dois parâmetros finais, o script joga a saída para STDOUT = browser
 */
imagejpeg($thumb);
?>

Veja o resultado após a execução do script. A imagem original de 300×300 foi redimensionada para 100×100, mantendo o aspecto e a proporção.

imagem original (300x300)

redimensionada = 100x100


Manipulação de imagens no PHP com a lib GD – efeitos

A manipulação/geração de imagens no PHP é um recurso muito útil e versátil, que pode ser usado tanto para operações comuns como o redimensionamento / corte de imagens, quanto para  operações mais complexas, como a criação de montagens, gifs animados e tratamento de fotos.

A biblioteca GD é a mais utilizada no php para essas operações, por já estar presente na maioria das instalações padrão de servidores por aí afora. Ela oferece muitos recursos interessantes, e apesar de ter limitações, serve para todas as operações básicas de manipulação de imagem: corte, redimensionamento, colagem, escrita com fontes true type, efeitos básicos para fotos, e geração de imagens diretamente para o browser (um arquivo .php se “transforma” em um jpg).

Para maiores informações e referência das funções da GD, acesse: http://www.php.net/manual/en/ref.image.php

Neste artigo você verá exemplos de utilização da GD para aplicar efeitos em fotos. Nos exemplos, utilizei a imagem “foto_exemplos.jpg”, no mesmo diretório do script, e joguei a saída diretamente para o browser, não salvando as alterações na imagem.

Brilho

No exemplo abaixo, aumentei o brilho da imagem em “50″. Para diminuir o brilho, basta passar um número negativo.

Brilho +50

<?php
$img = imagecreatefromjpeg("foto_exemplos.jpg");

if($img && imagefilter($img, IMG_FILTER_BRIGHTNESS, 50))
{
	header("Content-type: image/jpg");
	imagejpeg($img);
}
else
{
    echo "Ocorreu um erro.";
}

imagedestroy($img);

?>

Contraste

contraste -50

O contraste funciona de maneira similar ao brilho, porém para aumentar o contraste é que você passa um número negativo. Um número positivo irá diminuir o contraste.

<?php
$img = imagecreatefromjpeg("foto_exemplos.jpg");

if($img && imagefilter($img, IMG_FILTER_CONTRAST, -50))
{
	header("Content-type: image/jpg");
	imagejpeg($img);
}
else
{
    echo "Ocorreu um erro.";
}

imagedestroy($img);

?>

Filtro de Cor

O filtro COLORIZE permite a você aplicar um filtro de cor na imagem, passando os argumentos que definem a cor: R G B (red, green, blue), e mais um argumento opcional que define a transparência do filtro – de 0 a 127, onde 0 (o padrão) seria totalmente opaco e 127 totalmente transparente – que não fará diferença no resultado da imagem. No exemplo abaixo, usei 100% de verde e nenhuma transparência (R=0,G=255,B=0)

colorize

<?php
$img = imagecreatefromjpeg("foto_exemplos.jpg");

if($img && imagefilter($img, IMG_FILTER_COLORIZE, 0, 255, 0))
{
	header("Content-type: image/jpg");
	imagejpeg($img);
}
else
{
    echo "Ocorreu um erro.";
}

imagedestroy($img);

?>

No exemplo abaixo, defini a transparência para 100, acrescentando “100″ na lista dos argumentos.

colorize green c/ alpha=100

Preto e Branco

preto e branco

<?php
$img = imagecreatefromjpeg("foto_exemplos.jpg");

if($img && imagefilter($img, IMG_FILTER_GRAYSCALE))
{
	header("Content-type: image/jpg");
	imagejpeg($img);
}
else
{
    echo "Ocorreu um erro.";
}

imagedestroy($img);

?>

Sépia

Para atingirmos o efeito de “Sepia”, aplicamos dois filtros. Primeiro deixamos a imagem preto e branco, depois aplicamos um ‘colorize’ no tom de sépia (amarelado).

sepia tone

<?php
$img = imagecreatefromjpeg("foto_exemplos.jpg");

if($img && imagefilter($img, IMG_FILTER_GRAYSCALE))
{
	imagefilter($img, IMG_FILTER_COLORIZE, 90, 60, 40);
	header("Content-type: image/jpg");
	imagejpeg($img);
}
else
{
    echo "Ocorreu um erro.";
}

imagedestroy($img);

?>

Negativo

negativo

<?php
$img = imagecreatefromjpeg("foto_exemplos.jpg");

if($img && imagefilter($img, IMG_FILTER_NEGATE))
{
	header("Content-type: image/jpg");
	imagejpeg($img);
}
else
{
    echo "Ocorreu um erro.";
}

imagedestroy($img);

?>