]]>

O que preciso ter?

Para se ter um site, é necessário duas coisas: um domínio e uma hospedagem. Claro, você pode facilmente criar um blog no WordPress.com ou um perfil no Behance mas este não é o objetivo deste artigo.

E para criar um site, basta um programa editor de HTML, um software de FTP e um navegador. Neste artigo não vou ensinar a programar um site completo pois existem dezenas de outros sites dedicados inteiramente a isto, mas sabendo o básico do básico já é de grande ajuda.

O domínio

O domínio nada mais é que o endereço do seu site. Todo site precisa ter um domínio – assim como toda a casa precisa ter um endereço. Como que as pessoas vão encontrar o seu site sem o endereço, né?

Domínio é todo aquele endereço que começa com www e termina com um .com, .com.br, .net, .org ou o que quer que seja. Geralmente os sites brasileiros terminam com .br (.com.br, .net.br, .org.br, etc) e podem ser registrados diretamente no órgão nacional Registro.br. Já os domínios internacionais – como os famigerados .com, .net, .org, .me, .info são de propriedade do ICANN e você pode registrar através de sites diferentes – super recomendo o GoDaddy, pois eles tem os melhores preços.

E falando em preços, os domínios nacionais (.br) tem uma taxa anual de R$ 30. Para registrar, você precisa de um número de CPF válido pois é um domínio reservado para residentes do Brasil.

Já para domínios internacionais, não é necessário nenhum documento específico. No GoDaddy, você consegue comprar domínios .com a partir de R$ 17 anuais (os preços mudam com frequência). Se você realmente quiser economizar, compre um domínio .info (que custa menos de R$ 10 anuais).

Infelizmente, é necessário ter um cartão de crédito internacional para comprar um domínio no GoDaddy. Mas existem soluções nacionais também, como a UOLhost que permite você comprar em moeda brasileira e pagar até por boleto.

A hospedagem

Pense que o seu site é uma pessoa. A pessoa precisa não só ter um endereço (“domínio”), mas precisa também de uma casa onde morar – essa seria o servidor (ou, a hospedagem). A hospedagem nada mais é que um computador onde o seu site fica “instalado” e pode ser acessado de qualquer lugar do mundo.

Uma pergunta que recebo com frequência é “posso deixar meu site instalado no meu computador?“. Sim, até pode. Mas é um processo um pouco complicado, já que você precisaria configurar seu computador para isto, além de ter uma linha ADSL com IP fixo. Outro problema é que o consumo de memória pode ser constante, deixando o seu computador praticamente inutilizável para suas tarefas – além de ser um risco de segurança (servidores são mais preparados para ameaças de invasão). O ideal é deixar a hospedagem para uma empresa especializada.

Existem inúmeras empresas de hospedagem mundo afora – desde os mais baratos (com serviço meia-boca) até os mais caros que resolvem qualquer coisa pra você. Já passei por alguns bons e alguns terríveis. O host atual aqui do Design Blog, por exemplo, é a Brasilserv – eles tem um preço barato (R$ 10 mensais é o único plano) e possuem um diferencial que é importante pra mim: atendimento personalizado.

Eu procuro fugir das grandes empresas de hospedagem (brasileiras e gringas) justamente por causa do atendimento. Tive péssimas experiências com a Locaweb e a UOL (as brasileiras), além de ouvir mal da Bluehost e Dreamhost (gringas). É uma questão de experimentar e encontrar a ideal para você. Lembre-se que nem toda hospedagem que cobra caro é boa, e nem toda que cobra barato vai te deixar na mão. Pesquise bem antes de se comprometer com uma.

Depois de comprar o domínio e a hospedagem, você ainda precisa configurar o servidor DNS do domínio. Isto serve para que, quando a pessoa digite o endereço do seu site, ela seja redirecionada para o servidor onde seu site está. Na grande maioria das vezes, as empresas de hospedagem te informam como configurar isto. Caso tenha dúvidas, uma rápida pesquisa no Google resolve os seus problemas.

Criando o site

Com o domínio configurado corretamente e a hospedagem contratada, agora tá na hora de começar a criar o seu site.

Para montar o layout, eu prefiro utilizar o bom e velho “papel e caneta” para diagramar a idéia, e depois o Photoshop para finalizar ela. Com as imagens recortadas, já é possível começar a trabalhar no HTML.

Existe uma gama de aplicativos que permitem criar o HTML. No Mac, eu uso o Coda. Para Windows, o Notepad++ é excelente. Se você quiser algo mais completo (mas não necessariamente funcional), o Adobe Dreamweaver é muito bom. Fuja do Frontpage ;)

Como já avisei, não vou ensinar como criar um site HTML neste post pois foge ao escopo – você encontra facilmente tutoriais na internet ensinando o básico de HTML.

Depois de criar o site em HTML está na hora de colocar ele no ar. Para isto, você precisa de um bom programa de FTP. Recomendo o FileZilla – que é grátis e roda em Mac, Windows e até Linux. Utilize as informações que o seu sistema de hospedagem fornece, conecte e envie os arquivos para a pasta. Pronto! Seu site já está no ar e rodando!

Concluíndo

Esse post só risca a superfície do que é criar um site. Não falei sobre como criar um site dinâmico (usando um CMS ou programando um em PHP ou equivalente), a importância de não criar ele todo em Flash ou técnicas de SEO. Mas pelo menos com estas dicas você pode ter uma base do que é necessário para se criar um site.

Quem leu isto também leu:

• Curso online Web para Designers
• Novo visual 2012 do Twitter
• jQuery: o básico que todo designer precisa saber – parte I

]]>

Blogueiros experientes sabem aproveitar todas as oportunidades para aumentar seu apelo para motores de busca. Por que você se importaria com isso? Porque cada vez que seu post aparece nos resultados dos motores de busca, você tem a oportunidade de dirigir mais tráfego para seu blog – isso significa mais leitores e se você estiver vendendo algo, mais clientes!

4 Passos para a Otimização das Imagens

Aqui estão algumas maneiras fáceis de usar as imagens que você coloca em seu blog para SEO finalidades:

1. Otimizar começa com o nome

Só porque sua câmera nomeia automaticamente uma imagem “234455.jpg” não significa que este é o melhor nome. Os motores de busca não têm idéia do que fazer com isso! Renomeie suas imagens para algo distinguível e de acordo com o assunto tratado na imagem, como por exemplo “cachorro-quente-barato.jpg” em uma foto de um cachorro quente.

Faça o nome da imagem descritiva, com algumas de suas palavras-chave, só não vai se empolgar e colocar um título de 10 palavras.

2. Alt: Use sempre o Texto Alternativo

Além de ser útil do ponto de vista de usabilidade, motores de busca utilizam o campo de atributo alt para ajudar a determinar o conteúdo da imagem. Se o campo alt está vazio, os motores de busca nem sempre sabem a melhor maneira de interpretar a imagem.

Se você estiver usando o WordPress, é simples alterar as informações de alt. Basta fazer upload de sua imagem usando o ” Adicionar Imagem “, e depois no campo “Texto Alternativo”, adicionar suas informações do “alt”, e mais uma vez usando as palavras-chaves descritivas.

3. O “Title” diz tudo

O título (atributo title) é o que aparece quando seu cursor passa sobre a imagem. Preencha as informações do título da mesma maneira que preencheu o atributo “alt”, usando o mesmo método do “Adicionar Imagem” no WordPress.

Com o exemplo acima o código da imagem ficaria assim:

<img src=” cachorro-quente-barato.jpg” alt=” Cachorro Quente Barato” title=”Cachorro Quente Barato”>

4. Mantenha as palavras chaves no artigo

Parece óbvio que você use suas palavras chaves no artigo, mas alguns blogueiros esquecem, pensando que é o suficiente mencioná-las no título. Não é bem assim. Se o seu artigo é sobre como fazer itens de decoração com palha, não faria sentido você colocar a foto do cachorro quente barato.

Para você entender melhor o SEO das imagens, pense sobre o que as pessoas pensam ao digitar no Google ou Bing, em seguida use a frase sempre que puder – sem exageros, lógico.

Quem leu isto também leu:

• Design Blog Podcast – Episódio 04

]]>

Circulos constantes no Design Web

Text-Shadow

Ajuda no contraste do text com o fundo, deve ser usado com muita inteligência, caso contrário da um ar de amadorismo.

Texto com o efeito text-shadow

Javascript e mais Javascript.

Fading links

Efeito OnHover acontece lentamente

Layout Fluído

Com o destaque que o plugin Isotope teve em 2011, tudo indica que os layouts buscarão cada vez mais ter um design diferenciado e que utilize o máximo de recurso para cada resolução.

Já faz um tempo que vem a utilização deste efeito sofrendo aumento, é suave e agradável aos olhos, tem tudo para continuar.

Sites que contam histórias.

Agora com destaque para o grande publico, sites que em 2011 mais conceituais e utilizados em testes, neste ano tem tudo para alavancar.

Hotsite que contam histórias na globo.com

Exemplos

• Especial Corinthians
• Intacto 10 anos

Pra esse ano, é isso que tende a virar ‘moda’ no Design Web. Mas você o que acha que pode ser tendência? COMENTE

Como é meu primeiro post no ano, um bom 2012 a todos.

Quem leu isto também leu:

• Tendência no webdesign de 2009
• Ascensão Tipográfica – O que faz uma fonte ser lembrada?
• Como melhorar a usabilidade no seu layout

]]>

O curso, que é realizado há 8 anos pela Arteccom, inicia o aluno no mundo da criação digital e aborda os requisitos básicos de cores, usabilidade, tipografia, gestalt e tudo mais que envolve o desenvolvimento de layouts para sites.

Para quem já está no mercado, o curso também é uma ótima ferramenta para reciclar conhecimentos e fazer novos contatos profissionais, tornando a troca de experiência entre os matriculados ainda mais interessante.

O curso é composto por 4 módulos, são eles: Design, Interface, Metodologia e Consultoria. Além disso, o curso é totalmente online e tem a duração de quatro meses.

Mais informações pelo site: http://www.arteccom.com.br/cursos/index.php/o-que-e-o-curso. Se você quiser um desconto, entre em contato com eles pelo email: cursos@arteccom.com.br.

Quem leu isto também leu:

• O lado negro do design
• Sites com 90% de desconto?
• Como conseguir emprego de designer

]]>

Mais informações: Salve a Web

Quem leu isto também leu:

• Como melhorar a usabilidade no seu layout
• Mega sorteio Design Blog e Adobe!
• Código comentado salva vidas!

]]>

Sou um apaixonado pelo Twitter. Minha conta pessoal foi criada em 2007 quando apenas os mais nerds estavam usando a ferramenta. Acompanhei todas as mudanças neste tempo e até a popularização dele. O que mais me impressiona é a mudança no design.

Layout antes das atualizações de 2010

A última atualização foi em setembro 2010 e até então foi a mudança mais significativa que tiveram. Conteúdo relacionado, visualização de midia e rápido acesso ao perfil de cada pessoa foi o que mais marcou. Claro que muita gente não gostou – ninguém gosta de mudanças, mas no geral o design foi bem aceito.

Versão de setembro de 2010

E agora, mudaram de novo. E não mudaram apenas a versão web: a versão web móvel, o Twitter pra iOS e Android e o Tweetdeck (que foi comprado pelo Twitter a pouco tempo) também ganharam mudanças interessantes no visual.

O time de design do novo Twitter mostrou como estão por dentro das últimas novidades e tendências do mercado, e o novo visual demonstra isto bem.

Texturas leves

O mercado está abandonando os gradientes simples em favor da mistura de gradientes com texturas – estamos vendo isto aumentar neste final de ano e algo que com certeza vai entrar com força total ano que vem.

Na barra de cabeçalho do Twitter, a barra dá um ar de algo quase tocável, sem deixar de ser bem leve e quase imperceptível. Uma diferença enorme!

Barra lateral do outro lado

Talvez uma das mudanças mais chocantes é a nova barra lateral da versão web. Desde o surgimento, a barra sempre esteve do lado direito e esta mudança gerou certa confusão (e um pouco de repúdio por parte de alguns).

Mas esta nova barra está mais simplificada e dá acesso rápido aos links de followers, following, favoritos e etc. Agora está bem mais compacto e mais direto ao ponto.

Largura fixa

O design antigo tinha algo que muita gente não gostava – a largura enorme. Tudo bem que ela se adaptava a tela do usuário, mas muita gente tinha pego o costume de criar fundos interessantes com informações importantes.

Com a nova versão, finalmente podemos enxergar o que existe no fundo. Uma jogada interessante que instiga a criatividade de cada um.

Versão móvel

A versão móvel do Twitter também sofreu mudanças. O visual está mais interessante e segue alguns dos mesmos detalhes da versão web.

Minhas únicas duas reclamações são: 1) agora é necessário clicar num tweet e depois clicar no botão de responder, dar RT ou favoritar em vez de simplesmente arrastar pro lado como na versão anterior; 2) pular entre uma conta e outra ficou também mais difícil – antes bastava clicar no botão “Contas” no topo da janela principal para ter acesso aos seus outros perfis.

Conclusão

O design novo do Twitter está seguindo as tendências de 2012 com suas texturas, simplificações e responsive design.

Pessoalmente, eu curti. E você? Aproveite para seguir o Design Blog no Twitter!

Quem leu isto também leu:

• Sites com 90% de desconto?
• Mais fracassos do redesign de logos
• Primeiros passos para criar um site

]]>

Mas espera aí, o que é um framework ?

“Framework é um conjunto de classes que colaboram para realizar uma responsabilidade para um domínio de um subsistema da aplicação.” — Fayad e Schmidt

Resumindo: é um conjunto de classes que fornecem facilidades genéricas, tornando o desenvolvimento cada vez mais rápido e organizado. (write less, do more / slogan do jQuery)

Javascript

Antes de começar com jQuery vamos ver o basicão de javascript:

Concatenando e declarando variáveis

//declarando variáveis
var foo = 'olá';
var bar = 'mundo';
// para concatenar, usa-se "+"
var foobar = foo + ', ' + bar; // resultado: "olá mundo"

Operadores de comparação

var foo = false;
/* as "chaves após o if são obrigatórias
* a condição só é executada se for verdadeira
*/

if(foo) {
//foo é false, esse código não será executado
alert('foo é verdadeiro');
} else {
//esse código será executado
alert('foo não é verdadeiro');
}

Javascript inline (onde vamos escrever os códigos acima)

Javascript inline (onde vamos escrever os códigos acima)

E aí, vamos ao jQuery?

jQuery()

Dependendo da velocidade da internet do usuário (e de alguns outros fatores também) alguns elementos do layout podem demorar um pouco para carregar completamente; com isso os objetos que queremos manipular com jQuery.

Para executar o código apenas quando o Javascript estiver pronto, usamos o $(document).ready:

$(document).ready(function() {
alert('javascript está pronto !');
});

$(function(){
alert('javascript está pronto !');
});

Okay! E agora ?

Se você não conseguiu entender (ou mesmo que tenha) aqui vai uma explicação do que são e para que servem os “seletores” de jQuery.

Um pouco da Estrutura

Em jQuery, vamos sempre usar essa estrutura básica: $(objeto) …

Entenda como objeto aquilo que queremos selecionar para manipular (trocar classe, mostrar, ocultar, animar, etc). “Selecionar” um objeto com jQuery é muito similar ao que fazemos no CSS (incluindo também suas pseudo-classes):

// selecionando tags
$('p');
$('h1');

// usando pseudo-classes
$('div:first'); // selection o primer div
$('div:visible'); // div's visiveis
$('#form :input'); // inputs dentro de form

Sendo assim, quando escrevemos $(document).ready(); o objeto em questão é o documento (document) chamando o evento ready() ;  que verifica se o documento está pronto. São os eventos e efeitos que fazem a “mágica” do jQuery acontecer.

Alguns dos eventos e efeitos mais usados

click()

Como o nome sugere, esse evento é ativado quando clicar  no objeto selecionado;

toggleClass() e toggle()

Esse evento serve para trocar a classe (toggleClass) ou o estado de visibilidade (toggle) de um determinado objeto;

fadeIn() e fadeOut()

Fazem o mesmo que show() e hide() – respectivamente – porém de forma mais elegante e menos “dura”.

css()

Com esse, é possível alterar qualquer prioridade css do objeto !

animate()

Esse é um dos mais legais. Faz animações com o objeto.

attr()

Funciona como um seletor, que “pega” o valor de determinado atributo ou “define” o seu valor.

html()

Define ou “pega” o valor que está entre as tags do objeto.

No próximo post vamos sair do lero-lero, colocar em prática o que vimos e criar alguns efeitos usando botões e formulários !

Até lá ;)

Quem leu isto também leu:

• A importância de parceiros confiáveis
• Design de mensagens de erros
• Workflow – sites e softwares

]]>

O objetivo do designer é transmitir uma mensagem: seja uma idéia, um aviso ou até um pedido de ação. Este último pode ser feito para manipular o usuário, especialmente na web atual.

Um exemplo clássico é o botão de “download” de algum arquivo. O usuário procura um arquivo específico para download, encontra o site e clica no primeiro botão de download que ele vê. Aí vem a surpresa: abre um site que pode ter vários objetivos malignos diferentes – desde forçar ao cliente inserir informações sensíveis (dados bancários, senhas, etc) a baixar um vírus achando que é o arquivo desejado. Existem até alguns sites que usam destes botões de download para enganar o usuário a visitar um outro site totalmente diferente, apenas para aumentar as suas visualizações de páginas.

Embora o Google já esteja punindo ações assim, alguns humanos não são tão inteligentes quanto as máquinas e dependem dos seus olhos para tomar ações em sites.

Como designers fazem isto?

Usando de princípios básicos do design e um pouco de psicologia. Ele sabe que o usuário vai acessar o site querendo fazer o download de algo, então ele deixa o botão verdadeiro de download mais escondido e coloca um outro botão, maior e mais chamativo, com o link para a página maligna.

Empregos brasil

No exemplo acima, o link falso está perto do texto corrido e possui uma área de respiro maior (note como os elementos estão mais afastados do botão, dando um destaque maior). Além disto, ele é maior que o botão original. E mesmo depois de clicar no botão correto, o usuário é levado a uma página onde ele pode clicar novamente no link de download falso:

Aposto que você viu primeiro o botão grande de download, certo?

No outro exemplo abaixo, o usuário lê a descrição do arquivo que ele quer baixar e clica no link errado. Por quê? Simples: lemos de cima para baixo da esquerda pra direita. O primeiro link escrito “download” que vemos, é o errado:

Além disto, estamos acostumados a dar mais atenção ao lado esquerdo da tela.

Isto é errado?

Depende da visão de cada um. Pro designer (ou pro cliente dele) que sobrevive destes clicks errados (ganhando dinheiro com publicidade, por exemplo), não há nada de errado. Pro designer que não criou, talvez seja. Pro usuário, sim. Se é imoral ou não, não cabe a mim julgar.

O mundo seria melhor sem gente querendo se aproveitar da ingenuidade dos outros? Sim, com certeza. Você acha isto certo? Comente!

Inspiração

Quem leu isto também leu:

• Curso online Web para Designers
• Sites com 90% de desconto?
• Como conseguir emprego de designer

]]>

Design interativo

Modelo de processo mais simples de pensar no design centrado no usuário. Quanto mais interação (interação = transmitir informações claras) o site tiver com o usuário final, melhor ficará. A medida que o usuário navega e busca por informações, o site responde para o navegante o seu status atual. Por exemplo: informar se encontrou ou não algo, mensagens de validações de formulário, pré-loading, sugestões de informações, dar um feedback para qualquer ação do usuário e etc.

Design paralelo

Esse modo não é tão complexo como se imagina, porém demanda mais tempo de planejamento, pois pode e deve ser feito pelo menos duas opções de wireframes. Depois, basta combinar o que todos os wireframes tem de melhor e produzir um design único para o site. Baseado nesse resultado, começar a pensar na navegação, como serão os feedbacks, interações, etc.

Conclusão

Os dois métodos compartilham uma idéia básica: não há um meio certo para criar a interface perfeita, e você pode não obter uma boa usabilidade comprando a primeira ideia. Você deve testar varias ideias, combinar… o importante é pensar no usuário final.

Quem leu isto também leu:

• Princípios e meios para melhorar a experiência do usuário
• Hierarquia visual de elementos
• Mega sorteio Design Blog e Adobe!

]]>

O braup.com foi criado para facilitar a vida dos designers e de seus clientes, que a partir de agora podem ter um gostinho de como irão ficar os layouts de seus sites no navegador antes de ter de escrever o HTML.

É muito simples. Funciona assim:

1. Você cria o layout do site no photoshop, no illustrator ou em qualquer outro programa que você utiliza.
2. Salva o layout no formato jpeg, png ou bmp.
3. Acessa o braup, clica em ‘Carregar layout’, escolhe o arquivo e pronto!

O braup exibe seu layout no navegador da maneira como ele vai ficar depois de publicado.

Além disso, o layout ganha um endereço próprio, como este: braup.com/JmL5, que você pode enviar para seu cliente e ele acessa como se fosse uma página normal.

É uma maneira profissional de apresentar layouts de sites para o cliente. Muito melhor que enviar o arquivo por email.

Outro ponto interessante é a opção de ‘layout de várias páginas’, na qual é possível carregar os layouts das diversas páginas do site, como a página inicial, a página de contato e a vitrine de produtos por exemplo, e simular uma navegação por elas. Basta ir clicando na tela para avançar para a próxima.

O braup.com é ótimo e muito útil. Tenho certeza que vocês não irão apresentar layouts de outra maneira.

Quem leu isto também leu:

• Como criar apresentações fantásticas
• Como conseguir emprego de designer
• Edted Curitiba – sorteio relâmpago de ingressos