Como desenvolver aplicativos para Android

Fala galera!

A partir de agora vamos começar uma série de tutoriais sobre como desenvolver aplicativos para Android, desde aplicativos simples até aplicativos mais complexos que requerem conhecimentos específicos.

O que é Android?

Android é o sistema operacional da Google para dispositivos móveis, baseado no núcleo Linux. Lançado em 28 de setembro de 2008, o Android possui código aberto e trabalha com arquiteturas ARM, MIPS, Power e x86. Mais informações em www.android.com.

Quais são as ferramentas necessárias para começar a desenvolver aplicativos?

Inicialmente, você precisará de uma ideia para aplicativo! E também possuir conhecimento na linguagem de programação Java.

NÃO é necessário ter um telefone para testar seu aplicativo, você poderá fazê-lo por meio de emuladores.

Para começar, é necessário montar seu ambiente de desenvolvimento. Para tal, você precisa seguir os passos abaixo:

Download Java SDK

Após baixar e instalar o Java SDK (padrão next, next, nextfinish), baixe o Eclipse e descompacte o arquivo em algum diretório do seu computador. Eu utilizo o Eclipse Indigo, e descompacto o arquivo em um diretório Android que crio na raiz C:, porém você pode escolher qualquer outro diretório.

Download Eclipse

O próximo passo é baixar e instalar o Android SDK. Na página do site Android, é recomendado baixar o arquivo executável, porém baixe a versão zipada (para evitar problemas de permissão do Windows) e descompacte na mesma para em que está o Eclipse.

Download Android SDK

Depois de descompactar, execute o SDK Manager para baixar uma SDK do Android. Na lista de downloads, marque as opções Tools e Extras, e selecione qual ou quais versões do Android deseja.

Android SDK Manager

Vamos agora configurar o Eclipse. Vá até o seu diretório e execute o programa. Inicialmente, ele irá perguntar sobre qual workspace deve ser utilizada. A workspace é o diretório onde ficarão todos os seus projetos do Eclipse. Basta confirmar a padrão.

Para adicionar o Plugin ADT, clique no menu Help Install New Software, e na janela que abrir, clique em Add. Na próxima tela, digite o nome do plugin (ADT Plugin) e coloque a URL https://dl-ssl.google.com/android/eclipse no campo Location. Clique em OK e aguarde o carregamento do repositório. Depois de concluir, deixa a caixa Developer Tools marcada e clique em Next duas vezes. Aceite os termos de licença e clique em Finish. Provavelmente você será perguntado sobre conteúdo não-assinado. Neste caso, clique em OK para continuar.

Download ADT Plugin

Ao final da instalação, reinicie o Eclipse para concluir o processo. Depois, configure o local onde as SDKs estão instaladas: vá no menu Window Preferences, selecione a opção Android, clique no botão Browse… e indique o diretório onde você descompactou o Android SDK. Logo abaixo serão listadas as versões que você baixou.

Configurar Android SDK

E pronto! Seu ambiente de desenvolvimento está configurado e pronto para ser utilizado.

Como desenvolver aplicativos para Android

Nas próximas semanas, vamos aprender a criar aplicativos básicos e aprender dicas de programação para Android.

Até mais, galera!

Paginação em PHP

Fala galera!

Hoje vamos tratar de um assunto importante para os programadores PHP: paginação.

Para que serve a paginação em PHP?

Muitas vezes o retorno de uma consulta SQL traz vários registros, e para que a página não seja muito extensa, é necessário dividi-los em páginas. E para evitar que sejam criados vários arquivos com cada página, é adicionado um script que faz a paginação. Vamos aprender e entender como funciona essa paginação em PHP.

Preparando o script

Seguindo nosso tutorial para criar CRUD em PHP, vamos utilizar a tabela ‘produto’ neste tutorial. Mas antes, precisamos de algumas variáveis básicas para fazer a paginação:

$pagina = isset($_GET["pagina"]) ? $_GET["pagina"] : "1"; // página atual, caso não exista assume o valor 1
$limite = 10; // limite de registros por páginas
$links = 3; //número de links exibidos antes e depois da página atual
$inicio = ($pagina-1) * $limite; //define o início da consulta, no caso o primeiro parâmetro do LIMIT

IMPORTANTE: não devemos nos esquecer de adicionar o LIMIT na nossa query! É ele quem trará os registros para suas respectivas páginas.

Retornando os dados

Vamos agora fazer o SELECT que irá trazer os nossos registros. Para fazer a paginação, devemos ter duas queries: uma para trazer o total de registros, e outra para trazer as queries da página atual.

$sqlPaginacao = mysql_query("SELECT * FROM produto ORDER BY id ASC"); //retorna o total de registros da tabela
$paginas = intval((mysql_num_rows($sqlPaginacao)-1) / $limite); //faz o cálculo do número de páginas

$sql = mysql_query("SELECT * FROM produto ORDER BY id ASC LIMIT $inicio, $limite"); //retorna o registros da página atual
while($dados=mysql_fetch_array($sql)) {
    // faz a exibição dos dados
}

Finalmente: a paginação!

Depois de consultar e exibir os dados, vamos colocar a nossa paginação para funcionar.

A primeira parte é simples: um link para a primeira página e para a página anterior. Para tal, precisamos apenas de um IF verificando se a página atual não é a primeira.

if(($pagina) > 1) {
    echo '<a href="?pagina=1">&laquo; Primeira</a> ';
    $anterior = $pagina - 1;
    echo '<a href="?pagina='.$anterior.'">Anterior</a> ';
}

Vamos agora exibir a página atual, e os links das outras páginas. Precisamos de um laço FOR para percorrer as páginas, respeitando o limite de links a serem exibidos.

for ($i = ($pagina-1)-$links; $i<($paginas + 1); $i++) {
    if ($i == $pagina -1) { //verifica se não é a página atual
        echo ($i+1) . ' ';
    } else {
        if($i+1>0 && $i<$pagina+$links) {
            $pag = $i+1;
            echo '<a href="?pagina='.$pag.'">'.$pag.'</a>&nbsp;';
        }
    }
}

E por último, vamos exibir os links para próxima e última páginas.

if ($pagina-1 < $paginas) {
    $proxima = $pagina+1;
    echo '<a href="?pagina='.$proxima.'">Próxima &rsaquo;</a>';
    $ultima = $paginas + 1;
    echo '&nbsp;<a href="?pagina='.$ultima.'">Última &raquo;</a>';
}

Pronto! Nossa paginação em PHP está finalizada.

A princípio, talvez possa parecer um pouco confuso, mas seguindo a lógica linha-a-linha fica fácil de compreender o script completo.

Veja nosso tutorial de paginação em PHP em funcionamento.

Até mais, galera!

Como enviar e-mail autenticado usando PHPMailer

Como enviar e-mail autenticado usando PHPMailer

Fala galera!

Hoje vamos aprender a enviar e-mail autenticado usando PHPMailer, um script desenvolvido por Andy Prevost e Marcus Bointon para envio de e-mails pelo PHP.

Atualmente na versão 5.2.8, essa classe permite enviar e-mails pelo PHP através dos protocolos POP3 ou SMTP, e é amplamente recomendado e melhor que a função padrão mail(). Faça download da classe PHPMailer aqui.

Enviar e-mail autenticado usando PHPMailer

Primeiramente, precisamos chamar a classe no nosso script PHP. Neste tutorial, vamos utilizar a versão 5.1.

require_once('class.phpmailer.php');

O próximo passo será criar uma instância da classe PHP, passando um parâmetro único true, que indica que os erros ocorridos deverão ser retornados.

$mail = new PHPMailer(true);

Em seguida, vamos indicar que usaremos o protocolo SMTP para enviar os e-mails.

$mail->IsSMTP();

Agora vamos começar a configurar a classe para o envio. Porém, precisamos fazer essas configurações dentro de um try/catch. O try/catch é utilizado para tratamento de exceções e erros de execução sempre que um método de alguma classe é passível de causar algum erro.

try {

A primeira configuração é o endereço do servidor SMTP. Isso varia de acordo com as configurações do servidor de envio. No nosso exemplo, vamos configurar utilizando “localhost”. (Lembrando que a PHPMailer não funciona em ambiente local na sua máquina)

$mail->Host = "localhost";

Depois, vamos informar à classe que não vamos debugar o código.

$mail->SMTPDebug = false;

Agora sim vamos configurar o envio. E é aqui que está o pulo do gato!
São 3 parâmetros que devemos passar para que o e-mail seja autenticado:

$mail->SMTPAuth = true;
$mail->SMTPSecure = "tls";
$mail->Port = 587;

O primeiro parâmetro indica que vamos autenticar o e-mail que será enviado. Mas vamos complementar esse parâmetro com os dois próximos, que indicam o tipo de segurança e a porta utilizados. Em ambos, a configuração pode variar de acordo com o servidor. Uma dica rápida: essa configuração é utilizada para enviar pelo servidor do GMAIL (obrigado, de nada)!

Continuando, vamos agora passar os dados de acesso (usuário e senha).

$mail->Username = "seuemail@dominio.com.br";
$mail->Password = "suasenha";

Vamos agora adicionar o destinatário do e-mail.

$mail->AddAddress("destinatario@dominio.com.br", "Destinatário");

E agora o remetente. São duas funções: uma indica quem enviou, e a outra indica para quem deve ser respondido.

$mail->SetFrom("remetente@dominio.com.br", "Remetente");
$mail->AddReplyTo("remetente@dominio.com.br", "Remetente");

Em seguida, assunto do e-mail.

$mail->Subject = "Assunto do e-mail";

BÔNUS: vamos também configurar um anexo. Neste caso, vamos utilizar uma variável $anexo, que pegou um arquivo enviado de um formulário prévio.

$mail->AddAttachment($anexo["tmp_name"],$anexo["name"],"base64",$anexo["type"]);

PS: “base64” é o tipo de codificação que será utilizada para enviar o arquivo.

Agora vamos adicionar a mensagem do e-mail. Podemos fazê-lo em duas formas: e-mail com HTML, e e-mail padrão, sem formatação. Caso o gerenciador de e-mails do destinatário não consiga ler HTML, a mensagem sem HTML será exibida. Não é necessário configurar as duas, apenas uma delas já basta.

$mail->AltBody = $texto_sem_HTML;
$mail->MsgHTML($texto_com_HTML);

E, finamente, vamos solicitar o envio.

$mail->Send();

Porém, não vamos esquecer do nosso try/catch. Vamos fechar o try, e iniciar o catch.

} catch (phpmailerException $e) {
    echo $e;
} catch (Exception $e) {
    echo $e;
}

O primeiro catch trata a exceção phpmailerException. Essa exceção será chamada caso ocorra algum erro durante a execução da classe PHPMailer.

Já o segundo catch trata qualquer outra exceção que ocorra durante a execução do script.

E pronto! Agora você já sabe como enviar e-mail autenticado usando PHPMailer. Confira nosso código completo:

require_once('class.phpmailer.php');

$mail = new PHPMailer(true);
$mail->IsSMTP();

try {
    $mail->Host = "localhost";
    $mail->SMTPDebug = false;
    $mail->SMTPAuth = true;
    $mail->SMTPSecure = "tls";
    $mail->Port = 587;
    $mail->Username = "seuemail@dominio.com.br";
    $mail->Password = "suasenha";
    $mail->AddAddress("destinatario@dominio.com.br", "Destinatário");
    $mail->SetFrom("remetente@dominio.com.br", "Remetente");
    $mail->AddReplyTo("remetente@dominio.com.br", "Remetente");
    $mail->Subject = "Assunto do e-mail";
    $mail->AddAttachment($anexo["tmp_name"],$anexo["name"],"base64",$anexo["type"]);
    $mail->AltBody = $texto_sem_HTML;
    $mail->MsgHTML($texto_com_HTML);
    $mail->Send();
} catch (phpmailerException $e) {
    echo $e;
} catch (Exception $e) {
    echo $e;
}

Até a próxima, pessoal!

 

Como configurar e-mail no Android

Fala galera!

No post de hoje vamos aprender como configurar e-mail no Android.
Para isso, vamos usar o aplicativo padrão do Android, que já vem pré-instalado no aparelho. Caso esse aplicativo não venha instalado, as configurações podem ser aplicadas em outros aplicativos. Basta seguir a mesma lógica.

Após abrir o aplicativo, será necessário digitar seu e-mail e senha.

Como configurar e-mail no Android

Você pode optar por deixar o próprio aplicativo identificar as configurações automaticamente, ou configurar manualmente (recomendado). Vamos mostrar como proceder manualmente.

Como configurar e-mail no Android manualmente

O primeiro passo é escolher o tipo de conta que será configurado.

Como configurar e-mail no Android

POP3: Com o POP3, os e-mails da sua caixa de mensagens serão transferidos sequencialmente para o dispositivo, ou seja, serão copiados para o celular e removidos do servidor. Porém, podemos definir uma opção para que os e-mails não sejam removidos.

IMAP: Com o IMAP, o gerenciamento das mensagens é feito diretamente no servidor. Qualquer alteração realizada nas mensagens será automaticamente salva.

Exchange: Protocolo específico para Exchange Servers. Saiba mais sobre o Exchange Server no site da Microsoft.

No nosso caso vamos utilizar o POP3 com configurações adicionais para não remover as mensagens.

Na próxima tela vamos definir as configurações de recebimento de e-mails. O Android já deixa os campos preenchidos, porém alguns servidores possuem configurações personalizadas. Para ter acesso à essas informações, entre em contato com o prestador do serviço de e-mails.

Como configurar e-mail no Android

Observe que na opção Excluir e-mail do servidor vamos deixar selecionado Nunca, pois não queremos remover as mensagens do servidor.

O próximo passo será configurar o envio de e-mails. Da mesma maneira que o recebimento de entrada, os campos já vem preenchidos, mas as configurações podem ser diferentes.

Como configurar e-mail no Android

Após configurar o recebimento e envio dos e-mails, vamos definir as configurações de sincronização, ficando a critério do usuário.

Como configurar e-mail no Android

E por último, vamos definir os dados de identificação da conta.

Como configurar e-mail no Android

Pronto! Sua conta foi configurada com sucesso, e você verá na tela a lista dos e-mails que estão na sua caixa de mensagens.

Saiba como configurar seu e-mail em outras plataformas na nossa seção de Dicas e Tutoriais.

Até a próxima, pessoal!

Dicas para desenvolvedores de sites

Fala galera!

Hoje vamos ver algumas dicas para otimização do seu tempo ao desenvolver um site, mas de uma forma que facilite para você, desenvolvedor. Vamos estudar algumas “boas maneiras“ na hora de criar seu projeto.

Estrutura de diretórios

Um projeto bem organizado facilita (e muito!) quando se precisa alterar algum arquivo do site. E o primeiro passo é estruturar os diretórios.

Basicamente, um site possui, além das páginas, arquivos CSS para formatação de estilos, arquivos Javascript para alguns recursos visuais e complementos para praticidade, imagens e arquivos diversos (por exemplo, arquivo de upload). Caso você utilize alguma linguagem de programação, é uma boa dicas é manter também um diretório para os arquivos de conexão ao banco de dados e biblioteca de funções, e um diretório para os arquivos da administração do site.

Note na imagem abaixo a estrutura de diretórios de um site que utiliza folhas de estilo CSS, arquivos Javascript e linguagem de programação PHP para gerenciamento do site.

Estrutura de Diretórios

  • admin – arquivos da administração do site;
  • arquivos – arquivos de upload;
  • css – folhas de estilo
  • imagens – imagens utilizadas no site (pode também ser subdividido)
  • js – arquivos javascript
  • php – arquivos de conexão com banco de dados e biblioteca de funções

DICA: Particularmente, também crio um diretório chamado _FONTES, onde guardo todas os arquivos fonte do projeto. (imagens em alta resolução, arquivo do Corel, etc.)

Include de arquivos

Uma ótima técnica para agilizar o desenvolvimento é utilizar include de arquivos para áreas comuns do site. Isso acontece em praticamente todos os frameworks disponíveis.

Se o seu site mantém as mesmas informações do cabeçalho, não é necessário dar um “Ctrl C Ctrl V” em todas as páginas. Basta montar um único arquivo, e utilizar a função “include()” (no caso do PHP) para chamar esse arquivo.

Include

Neste exemplo, a linguagem de programação é o PHP. A função include() foi utilizada para chamar o arquivo header.php, que contém todas as informações do cabeçalho do site. No caso do PHP, existem também as funções include_once(), require() e require_once(), cada uma com suas particularidades. Em outras linguagens, as funções podem ser diferentes, com sintaxes diferentes.

IMPORTANTE: lembre que no include de arquivos, TODO o conteúdo é “adicionado” na página que o chamou. Se no arquivo do include você fechar a tag html, poderá ter problemas. É recomendado manter apenas os elementos do cabeçalho, sem as tags <html>, <head>, <meta>, etc.

Biblioteca de funções

Como citado na dica anterior, caso você utilize programação é extremamente útil ter um arquivo que armazena todas as funções utilizadas no sistema. Dessa maneira, não será necessário copiar o código para as páginas onde a mesma será utilizada.

Dúvidas (PHP)

  • Se eu alterar o conteúdo de um arquivo que é chamado pela função include(), preciso atualizar todos os arquivos que chamam ele?
    Não! E esse é a grande sacada do include. Basta você alterar o arquivo de include, que todas as outras páginas serão atualizadas automaticamente (porém, caso você altere o nome do arquivo, será necessário trocar todas as linhas de código do include()).
  • Posso utilizar um “include()” dentro do outro?
    Sim. Não existe limitação para tal. Apenas cuidado para não se perder nos includes.
  • Qual a diferença entre include(), require(), include_once() e require_once()?
    include(): tenta incluir a página indicada. Caso não consiga, retorna um WARNING e continua a execução do script. Aceita parâmetros GET.
    require(): o mesmo do include(), porém caso não consiga, gera um FATAL ERROR e aborta a execução do script. Não aceita parâmetros GET.
    include_once() e require_once(): idênticas as funções simples, porém se o arquivo em questão já foi referenciado anteriormente, retorna false e não inclui novamente.
    → Mais informações em PHP.Net
  • Existe algum limite para include de arquivos?
    Não. Não existe limitação para tal. Apenas cuidado para não se perder nos includes.

Caso tenha mais alguma dúvida ou dica, deixe nos comentários!

Nos próximos posts, vamos listar algumas funções básicas em PHP para salvar na biblioteca de funções. Não percam!

Flat Design – Nova tendência da web

Fala galera!

Vamos continuar nossa série sobre criação de sites, falando um pouco sobre flat design.

O que é flat design?

Flat design (design plano, traduzido para o português) nada mais é do que criar interfaces simples para sites, passando uma ideia de clareza. Seus elementos possuem uma aparência “clean”, sem muitos detalhes, e com cores vibrantes, porém sem muito brilho. Não utiliza detalhes, como sombras, bordas, gradientes, etc.

Pontos importantes

O conceito do Flat design é simplicidade através de formas planas sem perspectivas de profundidade. Basicamente, segue aquela velha frase: “Menos é mais”.

O sucesso deste tipo de layout se baseia nas cores utilizadas, e muitas vezes na tipografia. A ideia principal parte da hierarquia na concepção e colocação dos elementos para facilitar a interação com o usuário. Em telas pequenas, uma interface plana se torna mais fácil e prática de usar, utilizando menos botões e opções.

Outro ponto a ser considerado é que essa técnica se ajusta perfeitamente em layouts responsivos.

Alguns exemplos de Flat design

Existem vários sites que já adotaram essa técnica de desenvolvimento de layout. Vamos citar alguns exemplos para ilustrar a ideia principal do flat design. Veja nas imagens abaixo:

Flat Design - Google Now
Google Now

Flat Design Windows 8
Windows 8

Flat Design - Superplayer
Suplerplayer

Flat Design - YESbr
O próprio site da YESbr

E o que vem depois?

Atualmente, esse conceito está se tornando base para os sistemas operacionais, sendo que a Microsoft o aderiu nas versões do Windows 8, a Google implementou essa técnica no novo Android L e a Apple atualizou seu novo sistema operacional com o flat design.

Com a onda do modernismo atual, essa técnica se tornará uma tendência, mas logo menos os designers irão introduzir cuidadosamente dimensionalidades e novas maneiras de se estilizar um layout. Novos padrões surgirão, e o flat design vai acabar ficando para trás, infelizmente.

Até a próxima, pessoal!

Design Responsivo – A nova Web

O que é Design Responsivo?

Design responsivo nada mais é que elaborar sites que se adaptem aos diversos dispositivos disponíveis no mercado para acesso à internet, como os desktops, smartphones, tablets, iPhones, iPads, e até mesmo televisões.

Nos primórdios, a maioria dos computadores com acesso à internet tinham resoluções baixas e o mesmo navegador Internet Explorer. Então, todos os designers ajustavam seus layouts para uma melhor visualização nesse browser (lembra daqueles botõezinhos Melhor visualizado em…?). Como hoje em dia a internet se tornou indispensável no cotidiano, é essencial que os sites possam ser acessados de qualquer dispositivo. Daí a necessidade do design responsivo.

Design Responsivo

Design Responsivo e os buscadores

O design responsivo já era defendido por muitos desenvolvedores, mas ganhou mais destaque ainda depois que o Google confirmou indiretamente que para a área de SEO (search engine optimization, otimização para buscadores) essa técnica é a mais indicada. Para o Google, é mais fácil perceber que o site.com.br tem um layout se adapta a qualquer tela, do que entender que o m.site.com.br e tablet.site.com.br são o mesmo site e apenas copiam conteúdo alterando a estrutura do conteúdo.

A recomendação da página de ajuda do Google para design em smartphones diz o seguinte:

Google recomenda que os webmasters sigam a melhor prática da indústria usando design responsivos, oferecendo o mesmo código HTML para todos os dispositivos e usando apenas media queries de CSS para decidir como a informação deve ser renderizada.

Técnicas básicas de design responsivo

O design responsivo utiliza Media Queries (em tradução livre significa consulta de mídia). São expressões que indicam folhas de estilos de acordo com o dispositivo que ele estiver utilizando.

/* smartphones */
@media only screen and (max-width: 320px) {
    /* estilos formatados para smartphones */
}

/* tablets */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    /* estilos formatados para tablets */
}

Também é importante adicionar uma tag meta no início do seu código html:

<meta name="viewport" content="width=device-width,initial-scale=1" />

O viewport é a área em que seu site aparece. Quando o tamanho da tela varia muito, existe uma preocupação pelo fato de afetar diretamente a forma como o seu site é visualizado.

Por exemplo, um smartphone possui uma tela de 320px, porém sua resolução é 980px. Então, sem essa tag, se você adicionar uma imagem com largura 980px, não existirá barra de rolagem, e a imagem ficará parecendo uma miniatura.

Outra técnica importante é utilizar elementos fluídos, ou seja, utilizar porcentagens para definir o tamanho dos elementos. Isso fará com que o elemento se ajuste automaticamente.

Teste seu site com design responsivo

A Google possui uma ferramenta de recursos multi-screen para que você possa testar seu site com design responsivo, e ainda te dá várias dicas de como melhorar ainda mais o seu site.

Concluindo

Design responsivo é um assunto bastante extenso e muito interessante. Vale muito a pena pesquisar afundo sobre esse assunto afim de potencializar o uso dessa técnica, que se tornou essencial nos dias de hoje.

Até mais, galera!

Tableless: o que é e como funciona

Buenas, galera!

Hoje vamos tratar de um assunto bem legal: tableless, uma técnica de desenvolvimento de layouts muito utilizada hoje em dia.

O que é Tableless?

Tableless nada mais é que uma forma de criar layouts sem utilizar tabelas (daí o porquê do nome), e sim folhas de estilos (CSS). Isso não significa que as tabelas se tornaram inutilizáveis, mas sim que serão usadas apenas quando for necessário (em caso de dados tabulados). O termo tableless é mais utilizado aqui no Brasil, mas em outros países ele foi mais difundido, sendo conhecido também como CSS Layouts.

Originalmente os layouts eram diagramados usando tabelas (<table>) para dividir as seções das páginas e organizar o conteúdo do site. Porém, nessa época os browsers não tinham um padrão a ser seguido, pois a W3C (World Wide Web Consortium), um consórcio internacional onde são desenvolvidos os Web Standards (padrões web), tinha apenas “rascunhos” dos padrões atuais. Com isso, os desenvolvedores encontravam muitas dificuldades para criar um código que funcionasse igualmente em navegadores diferentes, e acabavam focando em apenas um browser específico (tipo aqueles “Melhor visualizado em …”).

Com o passar dos anos, e o aumento de integrantes na Guerra dos Browsers, criar um site que funcione nos principais browsers se tornou um requisito básico e indispensável na área de desenvolvimento web. Não basta apenas ter um layout bonito e bem diagramado, mas também que funcione da mesma maneira em navegadores diferentes. E é aí que entra o tableless.

Como funciona o Tableless?

Um site que utiliza o padrão tableless obrigatoriamente segue as regras de semântica. Ou seja, cada tag seja sua função. Por exemplo, um parágrafo de texto será representado pela tag <p></p>, as tabelas são usadas para dados tabulados, etc.

A grosso modo, trocamos o uso da tag table pela tag div, que pode assumir a forma desejada seguindo as orientações da folha de estilo (CSS). Essa folha de estilo é a grande responsável por toda a diagramação e estrutura do layout, facilitando para o desenvolvedor realizar qualquer alteração futura.

Um rápido estudo de caso para fixar a ideia do tableless:

Depois de várias reuniões e layouts, um grande projeto foi finalizado. Toda a estrutura do site está pronta, todas as inúmeras páginas estão diagramadas. Porém, de última hora, o cliente liga e pede para alterar a cor dos títulos, pois eles deveriam ser da mesma cor da logo.
O designer quase tem um infarto instantâneo, pois se lembra que cada página possui seu estilo no próprio código, e a única saída seria vasculhar documento por documento buscando os benditos títulos que seriam atualizados.

Neste caso, o desenvolvedor criou um grande problema para si mesmo pois criou o layout na forma “primitiva”. Se ele tivesse utilizado a técnica do tableless, bastava alterar apenas uma linha de código na folha de estilos. Agora imaginem se o cliente pedisse para mudar o site inteiro novamente?

Quais as vantagens do Tableless?

  • Utilização de folha de estilos: facilita caso haja necessidade de alteração;
  • Redução de banda: os navegadores atuais armazenam arquivos CSS e javascript em cache.
  • Maior velocidade na renderização da página;
  • Maior facilidade para adaptação à dispositivos mobile;
  • Apenas uma: requer um grande conhecimento das tags HTML e, principalmente, CSS.

E quais as desvantagens?

  • Apenas uma: requer um grande conhecimento das tags HTML e, principalmente, CSS.

 

Desenvolver seu site através de tabelas não é uma forma errada de fazê-lo. Porém, com o tableless, a facilidade em atualizar a folha de estilos e manter um padrão cross-browser é muito grande, e ainda possibilita ao desenvolvedor utilizar design responsivo, que será o próximo tema a ser comentado.

Até a próxima, pessoal!

Dicas para montar um layout agradável

Depois de realizar todo o planejamento de seu site, é necessário esboçar graficamente as suas páginas, dando “vida” a todos os elementos de sua interface para poder definir sua identidade visual. O layout do site é, basicamente, o seu esqueleto, que deve transmitir com eficiência a informação desejada.

Identidade Visual do layout

Primeiramente, é preciso elaborar um padrão para todos os elementos que serão exibidos comumente nas páginas, afim de gerar consistências de conteúdo e melhor usabilidade, ou seja, criar uma identidade visual. Essa tarefa facilita para o usuário, que saberá esperar o mesmo comportamento de certas funcionalidades se elas seguem um padrão já definido. É preciso que o layout do site seja condizente com seu objetivo, criando um elo de comunicação com o usuário final.

Cores – A ideia básica do site

A primeira parte do processo da identidade visual é definir quais serão as cores de todos os elementos (menus, links, textos, etc.) do layout. Estas cores serão fundamentais para transmitir aos usuários qual a energia do site e do conteúdo. Um layout agradável e bem elaborado deve conter um bom contraste de cores, prezando sempre pela harmonia e legibilidade, mantendo as características de acordo com seu conteúdo.

Veja uma lista de cores e seus respectivos padrões de representação na tabela abaixo:

COR REPRESENTAÇÃO
Branco Cor básica e limpa. Ideal para plano de fundo. Suaviza o layout e casa muito bem com cores claras ou escuras.
Preto Muito mórbido para ser usado como plano de fundo na internet, mas é válido de acordo com a ideia que será transmitida.
Pastel Cores delicadas, ideal para sites femininos, de culinária, ou sites sobre antiguidades.
Verde Saúde, medicina, natureza.
Azul Passa uma certa seriedade, confiança, calma e é uma cor que consegue expressar “tecnologia”.
Vermelho Transmite calor, vida, inovação. Chama a atenção para o tema.
Laranja Muito bom para sites teen e lazer, assim como amarelo e rosa. Aspectos de jovialidade, positividade e vida.

Deve-se procurar não usar planos de fundo com imagens ou cores escuras, pois visualizar a página no monitor é mais exaustivo. No caso de layouts com planos de fundo com cores escuras, o ideal é utilizar os textos com cores que fazem contraste com ele para não causar um grande problema de legibilidade.

Fontes – Facilitando a legibilidade

Escolher as fontes que serão utilizadas nas páginas também ajuda a melhorar a aparência do layout. A composição das famílias de fontes – tipografia – visa estudar questões como estrutura, legibilidade e estética das letras impressas para facilitar a comunicação visual dos textos.

A tabela abaixo lista as principais fontes e suas respectivas descrições:

FONTE          DESCRIÇÃO
Não serifadas (Arial, Tahoma, Verdana, Trebuchet MS) São as mais adequadas para leitura online. A maioria possui alta legibilidade.
Serifadas (Times new Roman, Geórgia, Courrier New) Possuem arestas nas extremidades das letras. São adequadas para impressão, mas não para corpo de texto na web. Oferecem elegância no caso de títulos ou textos de tamanhos grandes.
Fantasy (Comic Sans) Fontes decorativas, com o intuito apenas de enfeitar. Normalmente são mais usadas para desenvolver logotipos.
Cursivas (Monotype Cursiva, Staccato) Apresentam o estilo manuscrito.

É comum também utilizar imagens como detalhes de layout. Neste caso, elas devem ajudar a ilustrar a interface e envolver o usuário em seu conteúdo. Símbolos e ícones ajudam a fazer referência e a identificar a informações que será visualizada. Por exemplo, botões de fechar, impressão, aquela “casinha” (página inicial), “cartinha” (e-mail), etc. facilitam ao usuário localizar no layout qual é o caminho apra a informação desejada.

Após escolher todas as cores, fontes e imagens, é necessário cuidar da consistência entre os estilos para que um padrão seja mantido, sendo este o principal conceito da identidade visual. Ela indica uma familiaridade e continuidade de conteúdo. Um bom layout possui um padrão para todas as páginas.

É muito comum os designers de sites não diferenciarem as cores dos links das cores dos textos. Isso dificulta o usuário localizá-los. Não necessariamente as cores dos links precisam ser as padrões dos navegadores, mas devem ser diferentes da cor dos textos para facilitar a localização dos links.

Também é importante ressaltar as seguintes dicas abaixo:

  • Manter um estilo único para títulos e subtítulos, bem como o corpo do texto;
  • Imagens com mesmo tamanho, arte final e alinhamento;
  • Cabeçalhos e rodapés iguais;

Diagramação do layout – Distribuição dos elementos

O próximo passo é diagramar a página, distribuindo e organizando cada um dos elementos. Existem quatro fundamentos principais. São eles:

  • Alinhamento: importante tanto em questão de corpo de texto quanto aos elementos gerais. Deve-se evitar alinhamentos centralizados e à direita para corpo de texto, pois não trará uma boa visualização ao usuário. Esses modos são mais comuns em títulos. No caso dos elementos, é essencial manter uma linha base entre os mesmos para criar uma conexão visual entre os itens, unificando a página.
  • Proximidade: os elementos relacionados entre si devem estar próximos um do outro para formar unidades visuais. Essa proximidade ajuda o usuário a se localizar dentro do conteúdo final.
  • Repetição: nada mais é que o esforço para manter os elementos do design e interface unificados, para agrupar partes que estariam separadas e criar uma identificação e relacionamento.
  • Contraste: neste caso, não diz respeito às cores, e sim a uma hierarquia organização entre diferentes elementos.

Existem também outros itens importantes a serem considerados ao desenvolver o layout do site, como tableless, layout responsivo e flat design. Mas isso será tratado em posts futuros. Não perca!

Até mais, pessoal!

Como planejar seu site

Criar um site pode parecer fácil, porém é necessário um conhecimento avançado em relação ao assunto que será explorado. Somente a ideia não basta, é preciso também planejar e traçar estratégias para que os resultados sejam satisfatórios. Basicamente, são duas fases para um bom planejamento. A primeira fase do projeto é a mais importante, onde deverão ser definidas as informações essenciais e onde e como as mesmas serão dispostas nas páginas do seu site.

Briefing – Informações sobre o site

A primeira fase do planejamento é o briefing, que significa coletar todas as informações que serão disponibilizadas. Nesta fase, algumas perguntas são feitas diretamente ao responsável pelo site afim de organizar a distribuição das mesmas:

  • Qual é o objetivo principal do site?
  • Qual o ramo de atuação da empresa e quais são os serviços oferecidos pela mesma?
  • Quem será o público alvo?
  • Que imagem será transmitida para este público?
  • Quais são as vantagens/desvantagens da empresa sobre os concorrentes?
  • Qual será o conteúdo do site?

Outras questões poderão ser inseridas na fase do briefing, caso seja necessário. Alguns exemplos são prazo/cronograma de desenvolvimento, verba do projeto, ferramentas de marketing, etc.

Arquitetura de Dados

Após finalizar a coleta das principais informações, a próxima fase será definir a arquitetura destes dados. Isso nada mais é do que o design das informações do site, com o objetivo de organizar toda a hierarquia dos conteúdos entre si para garantir uma boa estruturação dos fluxos de navegação. Esse processo consiste em analisar a relevância de todo o conteúdo que foi coletado na fase anterior e desenvolver caminhos entre as páginas para criar uma navegação fácil e intuitiva, definindo o mapa do site e a hierarquia dos menus de navegação. Ou seja, facilitar ao usuário final a busca da informação desejada.

Definir o peso do conteúdo é analisar e definir a relevância dos elementos de interface, como blocos de texto, busca, menu, imagens, etc.

O primeiro passo da arquitetura da informação será agrupar o conteúdo em grupos, relacionando-os entre si e separando por assunto. Esses grupos deverão ser agrupados em áreas para definir a hierarquia entre os conteúdos. Esse processo, chamado taxonomia, consiste na classificação dos elementos dentro de um contexto para que eles possuam um sentido e proporcionem ao usuário final um acesso intuitivo à informação.

Exemplo de Arquitetura da Informação de um site
Exemplo de Arquitetura de Informação

Neste exemplo, a seção Quem Somos também está ligada à página Contato, mesmo esta não estando presente na hierarquia de Quem Somos. Isso significa que a seção Quem Somos poderá ser levada até a página Contato por meio de um hiperlink.

Lembre-se que quanto maior um site, mais complexa será a sua arquitetura de informação. Com esses fluxogramas, os designers conseguem identificar e organizar os caminhos que o usuário fará para encontrar a informação que seja com mais facilidade.

Um bom ingrediente para sites eficientes e persuasivos é uma boa arquitetura.

A arquitetura de informação organiza toda a hierarquia do site. Dentro de cada página existirão elementos que serão distribuídos de acordo com sua relevância. É preciso saber quais serão as tarefas executadas pelos usuários finais para definir estes elementos, e realçar os pontos mais importantes.

Toda ideia pode ser transformada em site, desde que seja bem elaborada e possua fundamentos que colaborem para o seu objetivo. A complexidade do desenvolvimento do site dependerá principalmente do seu planejamento. Por isso, um projeto bem montado e com um fluxograma de conteúdo bem diagramado facilitará a criação do site e agilizará sua publicação.

Até mais, pessoal!