Instalando o Apache2 (com mod rewrite), PHP7, MariaDB (esqueça o MySQL) e PHPMyAdmin no Ubuntu

A long time ago fiz um tutorial ensinando a realizar a instalação conjunto, também conhecido como LAMP (Linux, Apache, Mysql, PHP) no Ubuntu. Hoje volto para ensinar a instalar as versões mais recentes para ter seu Web Server mais seguro e com melhor desempenho.

Além dos itens já mencionados também instalaremos e ativaremos alguns modulos do Apache como o módulo de rewrite para URLs amigáveis e bibliotecas do PHP que são exigidos em diversos frameworks e soluções como o Magento por exemplo, que exige o mcrypt.

Preparando o sistema

Os primeiros passos todos sabem: obter permissões root e atualizar a lista de pacotes.

Pegando root, digite o comando abaixo e informe sua senha quando ele pedir:

sudo su

Atualizando a lista de pacotes:

apt-get update

Em seguida vamos instalar o apache2

apt-get install -y apache2

Vamos ativar o módulo de rewrite:

a2enmod rewrite

Agora vamos instalar o PHP

apt-get install -y php7.0

Vamos aproveitar o momento para instalar aqueles módulos que falei mais cedo.

apt-get install -y libapache2-mod-php7.0 php7.0-mysql php7.0-curl php7.0-json php-memcached php7.0-dev php7.0-mcrypt php7.0-sqlite3 php7.0-mbstring

Agora vamos instalar o MariaDB

Essa é uma distribuição baseada no MySQL, porém com mais atualizações. Funciona do mesmo modo que o MySQL, não notei nenhuma diferença em sintaxes e outras funcionalidades. Pelo que pesquisei entendi que ele recebe mais atualizações de segurança e tem um desempenho melhor. Por que não?

apt-get install -y mariadb-server mariadb-client

Agora, vamos dar um pouco de segurança pra instalação do MariaDB, pois, assim como o MySQL, ela vem com algumas configurações padrão que são perigosas.

mysql_secure_installation

Falta pouco agora, vamos rodar o MySQL para poder instalar o PhpMyAdmin que por sua vez cria uma tabela e um usuário, por isso precisamos do serviço rodando.

service mysql start

Agora vamos instalar o PHPMyAdmin

apt-get install -y phpmyadmin

 

Por último, basta rodar o apache2 para que tudo esteja funcionando.

service apache2 start

O diretório padrão onde você vai colocar seus arquivos é:

[code]/var/www/html/[/code]

Observações

O Magento 1.9.x não é compatível com o PHP7.

Se estiver querendo instalar o LAMP por causa dele prefira seguir esse tutorial.

Abraços.

Git Push via SSH

Tutorial objetivo e rápido. Não entrarei em detalhes.

1 – Criar a chave SSH:

ssh-keygen -t rsa -b 4096 -C "[email protected]"

– Pode dar enter nas 3 perguntas sem responder nada.

2 – Adicionar ao ssh-agent:

ssh-add git-rsa

Se não funcionar use esse:

ssh-add ~/.ssh/id_rsa

Se também não funcionar é porque o ssh-agent está desativado. Ative com esse comando:

eval $(ssh-agent)

Depois tente o primeiro comando desse passo 2 novamente.

3 – Adicionar a chave nas configurações do seu github:
– Acesse https://github.com/settings/keys
– Clique em [New SSH Key]
– Digite um nome qualquer e cole no campo de texto o conteúdo do arquivo id_rsa.pub (que é sua chave pública)

4 – Configurando seu usuário e e-mail no git
Primeiro certifique-se de estar na pasta anterior à pasta do git

cd ~

Agora configure:

git config user.name "seu-usuario"
git config user.email "[email protected]"

Se der algum erro ao digitar esse comandos tente isso primeiro:

mkdir ~/.git

Depois tente configurar novamente.

5 – Testar a conexão

ssh -T [email protected]

Você deverá receber um aviso assim:
[code]Hi seu-usuario! You’ve successfully authenticated, but GitHub does not provide shell access.[/code]
Se for isso deu tudo certo.

6 – Clonar o repositório:

https://github.com/seu-usuario/seu-repositorio.git

7 – Se clonou por HTTPS (como fiz acima), você precisará configurar o git origin para ser SSH ou ele te pedirá pelo e-mail e senha.

git remote set-url origin [email protected]:seu-usuario/seu-repositorio.git

8 – Pronto, depois disso é o de sempre:

git add .
git commit -am "comentário"
git push origin

Postando em uma Página do Facebook com PHP (CURL)

Obs: Tem um vídeo no final do post onde ensino tudo isso.

Resolvi criar esse tutorial para ajudar pessoas que precisam publicar um texto ou link em uma página do Facebook.

Exemplo de utilização: você tem um site e quer que logo após postar uma notícia que ela seja seja compartilhada no Facebook em forma de link para trazer leitores pro seu site.

Minha motivação para esse tutorial foi que depois de perder horas pesquisando na internet e na documentação do Facebook, descobri que é simples fazer isso sem o SDK deles.

Primeiro, temos que pegar o token de acesso para o local em que desejamos postar, seja na timeline de uma pessoa ou de uma página.

Nesse exemplo vamos publicar em uma página, mas o procedimento para publicar em uma timeline de pessoa é ainda mais simples, abordarei isso rapidamente no vídeo do final.

Acessamos o seguinte link para pegar o token:

https://developers.facebook.com/tools/explorer/

Primeiro selecionamos o app que será utilizado.

Em seguida clicamos em “Get token” e depois em “Get user access token”, e na janela que se abre marcamos uma dessas opções: manage_pages e publish_stream.

Após marcar as opções clicamos em “Get Access Token”.

Nas telas seguintes autorize o que o Facebook perguntar.

Segundo passo é pegar o ID da página desejada.

Clique novamente no botão “Get Token” e note que agora ele mostra todas as páginas que você tem acesso, selecione a desejada e clique no botão azul Submit.

Isso exibirá o ID da página, copie ele e também o “Access Token” que fica no input acima (o access token tem validade curta, no vídeo ensino como pegar um de maior duração).

Com essas duas informações vamos ao código necessário:

Obs.: caso não tenha o CURL instalado, clique aqui.

<?php
$page_access_token = 'XXXXXXX';
$page_id = 'YYYYYYYY';

// E as informações do que será postado.
$data['picture'] = "http://www.exemplo.com/imagem.jpg";
$data['link'] = "http://www.seulink.com.br/";
$data['message'] = "Mensagem (opcional)";
$data['caption'] = "Legenda (opcional)";
$data['description'] = "Descrição do link (opcional)";

Na verdade todos os campos acima são opcionais desde que ou o link ou o message estejam presentes.

Para mais informações aqui está a documentação: https://developers.facebook.com/docs/reference/api/post/

Continuando…

$data['access_token'] = $page_access_token;
$post_url = 'https://graph.facebook.com/'.$page_id.'/feed';

// E pra finalizar fazemos o post para o Facebook:

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $post_url);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$return = curl_exec($ch);
curl_close($ch);
?>

O retorno o ID do post que poderia ser utilizado para apaga-lo ou edita-lo ou um erro.

Espero que isso resolva o problema de muita gente, pois a documentação do Facebook é péssima quando você quer uma coisa mais prática, eles tentam sempre te empurrar o SDK, o que não é necessário para coisas simples como essa.

Links úteis:

 

Habilitando usuário root para o SSH no Ubuntu Server

Logado como root no terminal digite:

vi /etc/ssh/sshd_config

Adicione uma linha contendo “PermitRootLogin yes”. Talvez essa linha já exista e esteja comentada com um “#”. Nesse caso apenas remova o “#”.

Para entrar no modo de edição do vi basta teclar [a].

Ficaria assim:

# Authentication:
#LoginGraceTime 2m
PermitRootLogin yes
#StrictModes yes
#MaxAuthTries 6
#MaxSessions 10

Salve as alterações teclando nessa ordem: [esq][:][q][w][enter]

Agora vamos reiniciar:

shutdown -r now

Agora você pode se conectar como root pelo SSH.

Talvez te interesse: Configurando IP estático no Ubuntu Server

Referências:
https://access.redhat.com/documentation/en-US/Red_Hat_Enterprise_Linux/6/html/V2V_Guide/Preperation_Before_the_P2V_Migration-Enable_Root_Login_over_SSH.html

Encontrando arquivos pela data no Linux

Há momentos em que você precisa encontrar arquivos no linux que foram criados ou modificados em um determinado intervalo de tempo.

Por exemplo, você tem aquele WordPress de um cliente que não costuma atualizar os plugins e o próprio WordPress e acaba sendo vítima daquele código malicioso que muitas vezes acaba gerando um alerta no Google e o site acaba bloqueado com aquele aviso vermelho quando você tenta editar.

Então você cadastra o site no Google Webmaster Tools e descobre quais arquivos estão infectados.

Mas acredite, isso é só o começo.

Além dessa ferramenta do Google e outras ferramentas não dizerem todos os arquivos infectados, eles normalmente não dizem como resolver.

Mas você é esperto, você tinha um backup do site sem os arquivos infectados.

Então você sobe os arquivos do backup substituindo todos os infectados e problema resolvido.

#SóQueNão!

É bem comum eles criarem novos arquivos infectados, pois esperam que a primeira coisa que o dono do site faça é jogar um backup lá.

Então qual a solução?

São várias, mas uma bem prática é o assunto desse artigo.

Vamos encontrar arquivos editados dentre um intervalo de datas, pois como você já identificou um ou mais arquivos, é bem provável que os outros sejam da mesma data.

Encontrando arquivos mais novos do que a data X (sempre no formato americano yyyy-mm-dd):

find ./ -newermt "2016-03-05"

Encontrando arquivos editados nos últimos 15 dias:

find ./ -mtime -15 -print

Lembrando que você pode procurar em tipos espefíficos de arquivos, como arquivos PHP, adicionando no comando:

-iname "*.php"

Então ficaria:

find ./ -iname "*.php" -mtime -15 -print

Encontrando arquivos do dia X ao dia Y:

find ./ -newermt "2016-02-04" -and -not -newermt "2016-03-03"

 

Referências:
http://www.cyberciti.biz/faq/howto-finding-files-by-date/
http://www.cyberciti.biz/faq/linux-unix-osxfind-files-by-date/
http://stackoverflow.com/questions/158044/how-to-use-find-to-search-for-files-created-on-a-specific-date

 

Problema com banco de dados WordPress utf8mb4 e utf8

Se você assim como eu teve problemas quando foi publicar um site em WordPress e o servidor que você tinha que instalar não aceitava o novo utf8mb4, então acalme-se.

Esqueça tudo que você leu antes de chegar aqui, ou se esse foi seu primeiro artigo sobre esse problema, fique feliz, vou salvar sua vida.

Quando eu digo esqueça tudo, estou falando de soluções que envolvem comandos no MySQL ou um código PHP que vai converter as coisas.

Tem soluções pior ainda que te mandam pegar o arquivo exportado e sair substituindo alguns termos.

O caminho não é por aí, isso é gambiarra!

Existe uma solução bem mais profissional e envolve o uso de um plugin.

Isso mesmo, um plugin de WordPress que vai te salvar.

Nome dele: WP Migrate DB

Após instalar, acesse sua aba em Ferramentas > Migrar Banco de Dados

É interessante informar duas coisa a serem substituídas:

  1. O link do blog antigo e o link novo.
    Normalmente quando estamos desenvolvendo ele fica com nosso IP, normalmente http://127.0.0.1/www.meublog.com.br que será substituído pelo endereço oficial do blog.
  2. O endereço físico da pasta.
    Isso é mais por garantia, nem sempre é necessário, mas é melhor prevenir do que remediar. Então caso você utilize Windows e esteja publicando o blog em um linux, você vai substituir aquele D:/www/www.meublog.com.br pelo endereço físico do servidor linux, que normalmente é /var/www/ ou /public_html/ depende da sua hospedagem.

Finalizando isso você recebe um arquivo SQL que será importado na nova hospedagem.

Só isso, sem nada complicado e de forma profissional.

Deixe que o plugin se preocupa em arrumar as coisas pra você.

Instalando o Bittorrent Sync no Ubuntu Server

Instalar o Bittorrent Sync no Ubuntu é bem simples.

O bom do Sync é poder manter os projetos sempre sincronizados entre os membros da equipe, principalmente quando algum deles não tem acesso à rede local do servidor, como um home office por exemplo ou em uma empresa que tem duas sedes, como a que trabalho.

Sem mais delongas…

Adicionando o repositório.

sudo add-apt-repository -y ppa:tuxpoldo/btsync

Instalando o Bittorrent Sync

sudo apt-get update; sudo apt-get -y install btsync

Após a instalação aparecerá uma tela de configuração.

Recomendo fortemente que você faça isso nesse momento ou terá que fazer de forma muito complicada depois de forma manual.

A tela será mais ou menos como essa:

configuração-do-sync-no-ubuntu-server

 

Após isso siga o “wizard” e complete a instalação com as configurações de sua preferência.

Se por acaso você cometer algum erro, a dica que dou é desinstalar e instalar novamente, já que ainda não começou a utilizar.

Depois disso acesse o endereço do servidor dele e comece a compartilhar:

http://127.0.0.1:8888/

Se estiver em outra maquina na mesma rede é só ajustar o IP de acorco com o necessário.

É isso.

Boa sorte!

Localizar e substituir em grandes arquivos com sed

Hoje precisei localizar e substituir todas as ocorrencias de uma string dentro de um arquivo muito grande de um dump de um banco de dados MySQL de uma loja magento que mudou de domínio. Normalmente eu fazia isso com o Notepad++ que tem o melhor desempenho nessa tarefa em comparação com outros editores como Sublime Text, Dreamweaver, Bloco de Notas, etc. Porém alguma coisa estava saindo errado no processo e eu não estava conseguindo importar o banco. E como o arquivo era muito pesado não tinha possibilidade de eu encontrar a linha com erro e corrigir.

Então encontrei um comando que substitui lá no linux, chamado sed. Isso salvou minha vida e do cliente que estava atendendo.

O comando é bem simples, no meu caso, como queria mudar um domínio por outro, o comando que executei foi:

$ sed -i 's/dominioantigo.com/novodominio.com/g' database.sql

Como é uma expressão regular, recomendo escapar todos os símbolos presentes na string. No meu caso como o único símbolo era um ponto, e mesmo ele sendo um coringa nas expressões regulares, não achei que poderia prejudicar e no fim deu tudo certo, mas o correto seria eu ter executado este comando:

$ sed -i 's/dominioantigo\.com/novodominio\.com/g' database.sql

É uma solução prática para muitas tarefas, mas acho que o que mais acontece por aí que exige essa tarefa é mudança de domínio.

Instalando e ativando a extensão PHP mCrypt no Ubuntu

Alguns frameworks como o Magento precisam dessa extensão.

Mãos à obra!

Obter permissões de root

sudo su

Instalando as bibliotecas necessárias

apt-get install php5-mcrypt

Ativando a extensão

php5enmod mcrypt

Reiniciando o apache

service apache2 restart

Feito!

Configurando IP estático no Ubuntu Server

Para configurar um endereço estático no servidor seguiremos os passos:

Obter privilégios de root:

sudo su

Abrir o arquivo interfaces com um editor:

vim /etc/network/interfaces

Troque o texto abaixo:

auto eth0
iface eth0 inet dhcp

Por:

auto eth0
iface eth0 inet static
dns-nameservers 8.8.8.8 8.8.4.4
address 192.168.25.50
netmask 255.255.255.0
network 192.168.25.0
broadcast 192.168.25.255
gateway 192.168.25.1

Os endereços acima são baseados na minha rede, que é 192.168.25.xxx.

Você deve fazer de acordo com a sua.

Reinicie a interface de rede:

/etc/init.d/networking restart

Testando:

ping www.google.com

É isso.

Boa sorte!

Instalando a biblioteca cURL do PHP no Ubuntu

Alguns frameworks como a API do Facebook, sistemas como o Magento e vários outros precisam de algumas bibliotecas.

Passos para instalação:

1 – Obter permissões de root

sudo su

2 – Instalando as bibliotecas necessárias

apt-get install curl libcurl3 libcurl3-dev php5-curl

3 – Reiniciando o apache

service apache2 restart

Gerador de CSS em Cascata

Antes de falar do gerador, vou falar um pouco da construção do CSS de forma organizada e sugestiva.

 

  • Introdução

Cada programador tem sua forma de organizar seu código e seus troques adquiridos com a experiência.

Com o CSS temos que tomar alguns cuidados para que um estilo não conflite onde não deve.

Veja o código abaixo:


<body>

	<div id="topo">
		<ul class="menu">
			<li><a href="#">Item 1</a></li>
			<li><a href="#">Item 2</a></li>
			<li><a href="#">Item 3</a></li>
			<li><a href="#">Item 4</a></li>
		</ul>
	</div>
	
	<div id="conteudo">
	
		<div class="coluna-esquerda">
			<ul class="categorias">
				<li><a href="#">Categoria 1</a></li>
				<li><a href="#">Categoria 2</a></li>
				<li><a href="#">Categoria 3</a></li>
				<li><a href="#">Categoria 4</a></li>
			</ul>
		</div>
		
		<div class="coluna-direita">
			...
		</div>
	
	</div>
	
	<div id="rodape">
		<ul class="menu">
			<li><a href="#">Item 1</a></li>
			<li><a href="#">Item 2</a></li>
			<li><a href="#">Item 3</a></li>
			<li><a href="#">Item 4</a></li>
		</ul>
		<div class="direitos">Todos os direitos reservados</div>
	</div>

</body>


Note que temos dois menus no site, um no topo e outro no rodapé.

Podemos criar um estilo genérico com o nome .menu{} que afetará os dois e podemos criar estilos específicos como #topo .menu{} e #rodape .menu{}

A vantagem de nunca utilizar estilos genéricos para itens visuais é que uma hora podemos utilizar aquela classe em outra página e termos uma surpresa.

Então para evitarmos ficar criando .menu2{}, .menu3{}, .menu4{} é que utilizamos a técnica de cascata.

Eu aconselho utilizar estilos genéricos apenas para itens importantes, que podem se repetir em vários lugares e que não são vistos pelo usuário.

Como por exemplo:


* { margin: 0; padding: 0; }

.clear { clear: both; } /* escapa os floats */

.center { width: 990px; margin: 0 auto; } /* centraliza o conteúdo */

body { font-family : Arial; font-size: 12px; }

img { border: 0; } /* remove as bordas das imagens no IE */

a { text-decoration: none; } /* remove o underline */

li { ... } /* remove o estilo de lista */

input { ... }

textarea { ... }

select { ... }

button { ... }


Esses são os estilos padrões que eu coloco sempre que inicio um site.

Agora vamos aos estilos específicos para cada parte do site.

Vamos fazer a folha de estilos do HTML apresentado lá em cima.


#topo {}

#topo .menu {}

#topo .menu li {}

#topo .menu li a {}

#conteudo {}

#conteudo .coluna-esquerda {}

#conteudo .coluna-esquerda .categorias {}

#conteudo .coluna-esquerda .categorias li {}

#conteudo .coluna-esquerda .categorias li a {}

/* e etc... */


Nos estilos acima, os que são do menu do topo não afetarão o menu do footer.

 

  • Mas por que utilizar o CSS em cascata?

Eu não quero ensinar como construir um CSS, mas sim como fazer um de forma organizada.

Um mal costume de alguns programadores é fazer o código de maneira nada sugestiva como usar .m{} ao invés de .menu{}

Ou então .esq{} ou invés de .coluna-esquerda{}

Sei que é chato digitar o código inteiro e que como sou eu que estou fazendo o site vou saber o que aquele .m{} representa.

Mas será que daqui a 1 ano vou lembrar? E se outra pessoa tiver que dar manutenção no meu código?

Por isso que criar um código organizado e sugestivo é sempre aconselhável.

E para que não hajam desculpas de preguiça (como um dia eu tive),.

Eu vos apresento o meu gerador de folha de estilo em cascata.

Lembra aquele código HTML ali em cima?

Olha o CSS completo dele:


html body {}

html body div#topo {}

html body div#topo ul.menu {}

html body div#topo ul.menu li {}

html body div#topo ul.menu li a {}

html body div#conteudo {}

html body div#conteudo div.coluna-esquerda {}

html body div#conteudo div.coluna-esquerda ul.categorias {}

html body div#conteudo div.coluna-esquerda ul.categorias li {}

html body div#conteudo div.coluna-esquerda ul.categorias li a {}

html body div#conteudo div.coluna-direita {}

html body div#rodape {}

html body div#rodape ul.menu {}

html body div#rodape ul.menu li {}

html body div#rodape ul.menu li a {}

html body div#rodape div.direitos {}


Eu não precisei digitar uma única letra desse CSS.

 

  • Como utilizar o gerador?

É simples: Basta executar esse código no console do seu Firebug. (Sim, Firebug. Você vai entender o porque quando tentar no Chrome).

Obs.: Você precisa ter o jQuery funcionando na página.

function copiarCSS(){var aa=prompt('A partir de qual setor o css deve ser criado?\nEx.: body ou .header\n\nFrom which sector the css should be created?\nEg: body or .header');if($(aa).size()==0){if(confirm('Setor não encontrado\nTentar novamente?\n\nSector not found\nTentar again?')){copiarCSS();} return;} var ba="";function entrar(aa){aa=$(aa)[0];var ca="";var da=$(aa).parents();for(i=da.size()-1;i>=0;i--){ca+=da[i].tagName.toLowerCase()+(da[i].id?'#'+da[i].id:'')+(da[i].classList.length>0?"."+da[i].classList[0]:'')+" ";}if(aa.tagName=='SCRIPT'||aa.tagName=='STYLE'||aa.tagName=='HEAD'||aa.tagName=='META'||aa.tagName=='LINK'||aa.tagName=='TITLE')return;ca+=aa.tagName.toLowerCase()+(aa.id?"#"+aa.id:"")+(aa.classList.length>0?"."+aa.classList[0]:"")+" {}";if(ba.indexOf(ca)==-1)ba+=ca+";";if($(aa).children().size()>0){$($(aa).children().get()).each(function(){entrar(this);});}};entrar(aa);ba=ba.split(';');saida="";for(i=0;i<ba.length;i++){saida+=(ba[i]+'\n');}console.log(saida);alert(saida);}copiarCSS();

Caso goste do meu código e adote ele, você pode criar um favorito no seu firefox com esse código.

É só adicionar javascript: no início do código.

Ficaria assim:

 

  • Google Code do projeto

Link: http://code.google.com/p/jquery-fred-css-cascading-creator/source/browse/#svn%2Ftrunk

 
Espero ter contribuído um pouco com a internet.

Dicas para desenvolvimento de Wireframes (by Richard Barros)

Olá você!

Encontrei umas dicas muito legais sobre a criação de Wireframes escrita por Richard Barros e queria compartilhar.

O que acho mais interessante sobre os Wireframes é podermos identificar antes da prodição do layout erros na usabilidade ou a falta de algum requisito importante.

Fora isso, o Wireframe ajuda na organização do desenvolvimento e agiliza o lado do designer.

Veja a matéria do Richard Barros:

 

No planejamento de uma interface, o profissional de arquitetura de informação precisa fazer alguns testes até chegar a um modelo estrutural para ser usado como base. Este modelo é conhecido como Wireframe.

 

Wireframe é um rascunho com marcações de peso e posicionamento do conteúdo de uma interface. Ele será usado posteriormente pelo designer como guia para desenvolvimento do layout final do website, sistema ou aplicativo.

Ainda vejo muitos profissionais com receio de usar wireframes e alegam que o cliente não entende ou que o trabalho demora mais, mas eu acredito que é uma etapa primordial na criação de uma interface e portanto, levantei alguns pontos que podem ajudar novos profissionais a entender ou incorporar com naturalidade o desenvolvimento desses esboços.

 

Nunca pule a etapa do wireframe.

 

Passar pela etapa de wireframe não é trabalhoso e é essencial para o progresso do projeto. Criar um esboço e pensar na navegação antes de ter um layout desenhado pode fazer com que perceba algum erro de usabilidade ou algum bloco de conteúdo que não está sendo exibido com o devido destaque. É muito melhor perceber essas coisas antes, né?

 

Não tenha medo.

 

Arquitetos de informação não são necessariamente designers, mas não saber desenhar não significa que tenha que ter medo de criar wireframes. Supere esse medo e expresse suas ideias no esboço de alguma forma. Desenvolver wireframe é como projetar seu website em voz alta.

 

Papel e caneta.

 

Não é porque a interface é digital que todo o processo deve acontecer dentro do computador. Pegue papel e caneta e rabisque muito. Coloque todas as ideias no papel. Você pode recortar pedaços de papel ou usar post-its para reposicionar os blocos de conteúdo com maior facilidade, é uma baita mão na roda.

 

Teste seu wireframe.

Questione cada interação do seu wireframe. Imagine um usuário específico tentando acessar aquela interface e peça opiniões de outras pessoas da equipe que não participaram diretamente da elaboração dos esboços (por que não incluir o cliente nessa também?). Essa discussão pode levantar pontos importantes que você deixou passar em um primeiro momento.

Inspire-se.

Procure por novos wireframes, compartilhe ideias com amigos que não trabalham com você. Visite sites de referência como o I <3 Wireframes ou até o Flickr.

Existe ainda um projeto chamado Paper Browser, que é um modelo de navegador web com um canvas milimetrado para você imprimir e poder desenhar em cima facilmente. Eu recomendo!

Ferramentas.

Embora eu ainda use o Photoshop para meus wireframes, há quem use programas não muito convencionais, como o Flash. Mas existe também uma grande variedade de ferramentas para auxiliar no desenvolvimento de wireframes que você pode escolher. E a lista não é pequena:

Ferramentas para Desktop (freeware em negrito)

Ferramentas Online

Google Analytics no Ajax, Flash e OnePage site

Essa técnica é boa para sites que abrem o conteúdo sem atualizar a página, como ajax e sites feitos em flash.

Basta apenas uma linha de código para que isso aconteça:

ga('send', 'pageview', '/pagina-que-sera-registrada');

Então,

Se eu quero rastrear que a pessoa entrou na página contato, via ajax ou flash, o código seria:

ga('send', 'pageview', '/contato');

Essa técnica pode ser utilizada também para rastrear a rolagem de página de um site feito em uma única página.

E se eu quiser rastrear uma ação?

As possibilidades são ilimitadas.

Se você quiser rastrear a ação do envio do formulário de contato, você pode colocar por exemplo:

ga('send', 'pageview', '/contato/enviado');

E no Flash?

Se você mexe no flash deve saber como abrir uma página.

Suponto que a página que você quer registrar fica no quadro 70, você colocaria assim, certo?

gotoAndPlay(70);
getURL("javascript:ga('send', 'pageview', '/sua-pagina');");

Simples e fácil.

Left 4 Dead 2 Server

Este é um aplicativo bem útil para quem gosta de jogar com os amigos.

Bom ele é possível abrir qualquer fase do jogo no modo multilplayer.

O aplicativo ajuda também na seleção do IP que será usado como hoster do game e ele me memoriza as ultimas opções escolhidas.

Esta é a interface do aplicativo:

Tudo que você tem que fazer é encontrar o jogo, escolher o IP que já vem selecionado o do hamachi se você o tiver, escolher a fase e iniciar.

Dowlonad: clique aqui

Encurtador de Links

Esse programa ajuda na hora de encurtar links. Com ele você encurta um ou vários links com apenas 1 click.

Tem duas formas de usar ele: uma é pela interface e a outra é pelo icone que fica ali perto do relógio do windows, a famosa panela de pressão.

A interface dele é bem simples: de um lado você insere os links e do outro você obtém os links encurtados.

A outra forma de encurtar é pelo icone lá perto do relógio, que tem três funções.

Botão esquerdo: abre a interface do programa.

Botão direito: Exibe o menu de contexto como mostrado abaixo:

Com o direito você vê essas opções de encurtamento que irá pegar o link que está copiado e te devolverá o link encurtado já copiado pronto para você colar e compartilhar.

Nessa opção do botão direito não é possível encurtar mais de um link.

Botão do meio: A ultima funcionalidade é a do botão do meio do mouse, que é a rolagem do mouse. Você sabia que tem um botão ali? Sim, tem! Ao pressionar o botão do meio ele vai encurtar usando a ultima opção escolhida no botão direito. Se você clicou com o botão direito e escolheu Migre.me quando clicou com o botão direito, então quando clicar com o botão do meio, o Migre.me que será escolhido.

Caso deseje que ele inicie automaticamente com o windows, basta marcar a caixinha: Iniciar com o windows.

Link para download: link