Nesse artigo, vamos mostrar o básico que todo webdesigner precisa ter desse framework javascript.

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á ;)

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

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

Foram semanas de planejamento e vários dias executando aquele logo para que ele ficasse simplesmente perfeito. Sua defesa está pronta e você cobriu tudo por todos os ângulos possíveis, não dando margem para o cliente dizer “Não dá pra trocar o vermelho por azul?“. Você colocou sua melhor roupa, limpou a área de trabalho do seu notebook e levou ele pra reunião de apresentação.

Chegando lá, o cliente chamou toda a banca de diretores da empresa e pessoas de alto calão e te colocou pra apresentar a nova identidade visual. Você abre aquela apresentação em PowerPoint (ou Keynote), super bem elaborada e sem clip-arts. No final, o logo terminado. Mas tem um porém: você só mostrou o logo. Não aplicou em nada.

Oras, como você espera o cliente visualizar como será a aplicação?

Quando alguém contrata um designer para criar um logo ou um web designer para criar um site, ele espera que o resultado seja de cair o queixo (afinal, ele deixou de contratar o sobrinho dele que “mexe no Photoshop” e escolheu você!). Embora muitas vezes aquele JPG com fundo branco já pode ser o suficiente, você quer ter certeza que você não será enviado de volta ao seu escritório ou casa para redesenhar algo só porque não ficou simplesmente fantástico.

Foi pensando nisto que o Thiago Paulino, do DesignTuts, criou o ProMockup. Com estes arquivos PSDs em alta resolução e super realistas você pode montar a sua aplicação de logo em questão de segundos, mesmo se você não souber usar o Photoshop muito bem.

Parece real, não é? E você pode inserir o seu cartão ali facilmente!

Por um preço promocional de R$34,40 em três vezes, você pode aplicar sua arte a um cartão de visitas, mostrar o site num dispositivo móvel, na tela do computador, na capa e dentro de um folder e até mesmo na capa e contra capa de um DVD.

Todos os arquivos do ProMockup possuem tutoriais em vídeo explicando como usar. E o melhor: se você não gostar dos produtos, eles te garantem a devolução do seu dinheiro. Mas te garanto: você vai amar.

E não é só eu falando: vários designers estão recomendando (inclusive o pessoal do Choco La Design e CuteDrop).

Se você quiser melhorar a qualidade das suas apresentações, o investimento vale muito a pena e você não vai se arrepender. Aproveite que o preço promocional deles é só por esta semana! Acesse o site do ProMockup e compre hoje seu pacote com 5 PSDs e ganhe um grátis!

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• Como conseguir emprego de designer
• A importância de parceiros confiáveis
• jQuery: o básico que todo designer precisa saber – parte I

Parceiros que fazem o que não fazemos

Quando começamos com o xCakeBlogs, o objetivo foi de facilitar ao máximo a vida de nossos clientes: fazíamos o design, a programação, o registro de domínios, a hospedagem, a configuração do WordPress e prestávamos assistência técnica. Nosso lema era simples: “Blogar é gostoso. Deixa o difícil com a gente”. Mas uma coisa nos trazia muita dor de cabeça: a hospedagem.

Tínhamos um plano de revenda de uma empresa. Não era ruim e nem sequer apresentava muitos problemas. O problema mesmo era com o cliente: se o blog ficasse fora do ar por 20 segundos, o cliente ligava pra gente cobrando. Se ele não conseguia acessar o e-mail, ligava. Se quisesse configurar um e-mail, ligava. Logo, terminávamos um projeto em 15 dias mas tínhamos contato constante com o cliente por 2 meses.

Mesmo cobrando um valor mensal pela hospedagem, muitas vezes o trabalho que dava ultrapassava o valor que ganhávamos. E quando você trabalha demais e ganha de menos, tem algo errado. É aqui onde entra a importância de ter um parceiro.

Dos seguidores no Twitter, o Cláudio Garcia sugeriu o serviço de hospedagem dele para cuidar dos nossos clientes – a Brasilserv. Testamos e vimos que era um servidor estável com atendimento rápido – algo importante nos dias de hoje, onde aguardar 24h por uma resposta é inadmissível. Não foi uma decisão fácil (pois não poderíamos correr o risco de trazer dor de cabeça ao cliente), mas transferimos todos os clientes hospedados conosco para a Brasilserv e paramos de oferecer um serviço de hospedagem.

Isto faz um ano e meio. Hoje, temos uma relação ótima com a equipe da Brasilserv. Se eu tenho algum problema ao hospedar algum site, eles resolvem. Quero abrir uma conta as 2 da manhã? Feito. E se houver algum erro na programação que deixe o site mais lento? Eles me informam (ao invés de avisar ao cliente) e eu resolvo.

Passamos em média 5 clientes por mês para o serviço deles, e eles cuidam do cliente como nós cuidamos – algo muito importante na nossa filosofia interna. E o melhor: eles entendem muito melhor de como funciona um servidor do que nós. Se algo dava errado na hora de hospedar alguém no nosso serviço, tínhamos que abrir um chamado no host e aguardar resposta (enquanto isto, o cliente gralhava no telefone). Um parceiro que faça o que você não sabe fazer é vital para oferecer um serviço completo ao cliente.

Parceiros para as horas de aperto

Recentemente tivemos férias coletivas no escritório, para compensar as férias que não tiramos durante o carnaval. Na semana antes, a correria para finalizar os projetos em aberto pois passaríamos uma semana longe do trabalho. Foi aí que um parceiro salvou a gente de novo.

Ironicamente, o próprio Cláudio Garcia (que nos indicou a empresa dele) nos ajudou nesta de novo. Tínhamos dois layouts prontos, só faltando passar pra HTML/CSS e fazer funcionar com o WordPress. Devido a experiências anteriores com ele, sabíamos que ele conseguiria quebrar esse galho.

Dito e feito: em pouco tempo ele conseguiu desenvolver tudo e colocar no ar. Fez até mais do que deveria, nos salvando de ter um cliente reclamão na volta das nossas férias.

Ter algum profissional competente como parceiro é importante. Não dá pra evitar qualquer designer ou programador e tratá-lo como inimigo profissional ou como concorrente; tem cliente o suficiente para todos no mar do design. Se você não tem alguém com que possa terceirizar seu trabalho nas horas de aperto, está na hora de colocar seu networking em prática. Assim, se você ficar doente algum dia ou tiver excesso de trabalho, pode encaminhar o trabalho para esta pessoa sem perder o cliente.

Desnecessário falar que você precisa dividir os lucros com seu parceiro, né? Afinal de contas, você pode ter conseguido o cliente: mas seu parceiro foi quem fez o trabalho.

Parceiros para troca de idéias

Sabe quando você está tentando resolver aquele problema macabro, mas não sabe como? Aquela cor de fundo não vai com a cor do texto, a imagem falta algo, o logo parece estranho, etc. São os problemas típicos de quem está a muito tempo no projeto e precisa de uma visão nova.

Eu, por exemplo, estou sempre batendo papo com o Filipe Fernandes – o rapaz maroto responsável pelo Choco La Design. Quando estou com alguma dúvida se a cor tá certa, se o alinhamento parece bom, ou o que quer que seja, mando uma mensagem e ele me fornece uma visão sob aspecto diferente. Em vez de passar as próximas horas tentando descobrir uma solução, em 5 minutos de conversa consigo descobrir como resolver o problema.

Parceiro nem sempre precisa ser o top da área

Claro que as vezes é importante ter um ponto de vista completamente diferente. Ou seja, “o mundo visto pelos olhos de quem não entende o que você faz”. Pode parecer bizarro, mas é verdade. Um exemplo: você criou um menu bem bacana pro seu site, mas está com medo que não pareça um menu. O risco do usuário não ver isto e assumir que não existem mais páginas internas no seu site é alto, e é um prejuízo com o qual você não pode arcar. Entra mais uma parceira minha: minha mãe.

Sim, ela sabe apenas ligar o computador para acessar o Facebook, falar no Skype com os parentes e jogar os joguinhos dela. Ela não sabe a importância da Gestalt no design, ou o que é proporção áurea. Ela é perfeita para conduzir testes de usabilidade. Ela representa a população mais leiga em termos de internet, então se ela consegue entender a mensagem que estou tentando passar com o meu projeto, eu obtive sucesso.

Procure parceiros

Não estou dizendo que você precisa ter o Cláudio, o Filipe, a Brasilserv ou minha mãe como parceiros – estou falando que você deve ter pessoas que podem te apoiar e te ajudar no que for necessário. E como falei: não importa se você é freelancer ou trabalha em uma empresa grande – um parceiro realmente pode ajudar.

Procure por parceiros em redes sociais, vire amigo deles acima de tudo (a relação profissional flui muito melhor quando você tem um nível alto de amizade com seu parceiro) e procure pessoas que façam parte de diferentes áreas – não só de design. Eles podem salvar tua pele no futuro.

Você tem alguma história interessante que envolva algum parceiro? Ou você está procurando alguém com quem trabalhar? Deixe um comentário!

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• Workflow – sites e softwares
• Um espaço para designers brasileiros
• jQuery: o básico que todo designer precisa saber – parte I

Em vez de você ficar procurando por imagens que tenham a ver com o site do seu cliente, o Flickholdr já te retorna uma imagem no tamanho certo e com um tema relacionado ao site que você está criando. A imagem acima, por exemplo, foi gerada usando ele.

É só inserir uma tag de imagem (“<img>”) e escolher a tag (ou palavra-chave) que melhor define seu site. O Flickholdr vai buscar no banco de dados do Flickr uma imagem com sua tag e mostrar no seu site.

Basta usar a seguinte fórmula:

http://flickholdr.com/largura/altura/tag

Na imagem acima, por exemplo, digitei o seguinte: http://flickholdr.com/620/150/webdesign (620 pixels de largura por 150 pixels de altura, com a tag “webdesign”). Se quiser adicionar mais tags, basta adicionar uma vírgula e escrever a outra tag (sem espaço entre as tags!). Caso queira uma imagem em preto e branco, basta colocar /bw no final do endereço.

Ah, e caso você seja iniciante e não saiba como colocar isso numa tag de imagem, basta digitar <img src=”http://flickholdr.com/620/150/webdesign” /> (usando o meu exemplo).

Lembre-se que não precisa colocar nenhuma extensão no final. E além disto, o site não requer registro – basta usar o endereço e ser feliz!

Ah, vale informar que não é uma boa idéia usar esse serviço em sites abertos – nunca se sabe quanto tempo um serviço assim vai durar, então use ele apenas como maneira de popular temporariamente o site do seu cliente!

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• Regulamentar a profissão de designer – sim ou não?
• Mega sorteio Design Blog e Adobe!
• Código comentado salva vidas!

A máquina

Minha máquina é um MacBook Preto rodando OS X Leopard, 2.4 Ghz Core 2 Duo, 3 GB RAM com um monitor LCD extra de 17″. Uso o Google Chrome como navegador principal, mas não abandonei 100% o Firefox por ele ter um Developer Toolbar mais decente.

Sempre aberto

Existe uma lista de coisas que procuro sempre deixar aberto. Uma dela é o Hootsuite (de onde controlo meu Twitter e o Twitter do Design Blog). Me eduquei para não passar o tempo todo vendo quem tá falando o que no Twitter, ou seja, não gasto meu tempo lá :)

Outro é meu e-mail corporativo (do xCakeBlogs) para ficar de olho se algo urgente aparece. Quando um e-mail novo aparece, olho apenas o assunto. Se parecer algo urgente, abro. Caso contrário, deixo para responder ou como primeiro item da lista do dia, ou como último item.

Também aproveito para abrir o Skype, e ocasionalmente o iChat (GTalk). Evito o MSN quando der, já que culturamente o pessoal do MSN não sabe respeitar status de “Ocupado”.

Outro site que fica aberto o dia todo é o Grooveshark. Faz tempo que não faço download de músicas, então facilito escutando tudo online mesmo.

Hootsuite para administrar meus Twitters

Café da manhã

De manhã, começo abrindo o Hootsuite e e-mail, vendo qual a ordem do dia. Em seguida, vejo as novidades no mundo através do G1 – leitura rápida – e parto para minhas web comics que acompanho. Entre eles:

• XKCD
• Penny Arcade
• Least I Could Do
• Questionable Content
• Saturday Morning

Penny Arcade - recomendo a leitura.

Aproveito para dar uma passada no Digg para ver se acho algum artigo interessante ou imagem engraçada. Depois ainda dou uma olhada rápida nos meus feeds via Google Reader e vejo se algo que vale a pena ser postado no Twitter do Design Blog, e já pré-programo os twitts do dia.

Trabalho

Como aqui trabalho geralmente com CSS/xHTML e programação, na hora do trabalho abro o Coda (o editor de código que prefiro) e o Photoshop, para rodar os PSDs e transformá-los em sites funcionais.

No Coda, tenho o plugin TEA for Coda instalado, que infelizmente não é mais atualizado pelo autor. Ele aumenta a produtividade, pois permite usar shortcodes (abreviação de códigos), e com uma combinação de teclas transforma-o em código completo.

Por exemplo, para criar uma DIV, digito apenas:
div.centro#teste
Aí aperto Control + , e aparece na tela uma div com classe “centro” e ID “teste”. Diminuição instantânea de tempo!

Abro sempre um arquivo-base que eu mesmo criei. Tenho vários templates já pré-prontos que facilitam o trabalho. Primeiro, crio o HTML já visualizando como ficará o código. Em seguida, utilizo o Primer – serviço online – que pega meu HTML e extrai todas as classes e IDs, prontos para serem colados no meu arquivo de CSS.

Quando trabalho no CSS, uso bastante o Typograph (outro serviço online) para ver qual o tamanho de fontes que vou usar.

Mesmo não trabalhando com desenvolvimento em IE6, o site CSS Quirksmode tem um tabela de consulta rápida para saber se algum dado código CSS vai funcionar em todos os navegadores.

Quando tá tudo pronto, rodo os testes finais, testo em IE 7 e 8 pelo VMware (máquina virtual rodando Windows XP), subo o site pelo FileZilla – meu programa de FTP. Aí é só terminar as últimas configurações do WordPress, mandar e-mail pro cliente avisando que o site tá pronto e pronto!

Almoço

Por volta do horário do almoço ou café da tarde, aproveito para verificar como andam meus sites através do Google Analytics, vejo a quantidade de leitores de feed que surgiram pelo Feedburner, analiso quantos novos assinantes apareceram na lista de mailing do Exército do Design pelo TeContato, dou uma olhada no meu Facebook e vejo se tem algum dowload novo na FileWarez.

Meu desktop (duas telas) até o meio dia. Piora até o final.

Janta

Pra fechar o dia, dou uma lida no artigo do dia do Cracked, vejo novamente se existe alguma notícia nova no mundo, respondo e-mails que apareceram e vejo se surgiu algum comentário novo no blog. Depois disto, é partir pra cama com a esposa e o note para assistir qualquer coisa nova que tenha baixado.

Acho que isso resume bem meu dia e todos os sites que acesso. Espero que tenha sido útil a quem procura outras formas de trabalhar.

E você? Qual site ou software é indispensável no seu dia-a-dia? Comente!

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• A importância de parceiros confiáveis
• jQuery: o básico que todo designer precisa saber – parte I
• Como virar a noite trabalhando e ainda manter-se produtivo?

(Clique na imagem acima para ver em tamanho maior)

Traduzido por Canha. Original por Information Is Beautiful

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• jQuery: o básico que todo designer precisa saber – parte I
• Patterns para download
• Teoria básica do design – Cor

O Page Chaser (de Hyeon Joo Lee) é um marcador simples e barato de ser manufaturado. É um pedaço de plástico que acompanha a página na qual você está sem ficar na frente do que você está lendo. A empresa que decidir comercializar essa idéia pode ganhar muito dinheiro.

Via: Yanko Design

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• Como a estética pode influenciar o usuário na facilidade em se usar algo?
• Por onde começo a estudar sobre design?
• Resultado do sorteio #Imprima3D

Essas patterns também podem ser utilizadas em fundos de Twitter, MySpace, e virtualmente qualquer outro projeto. O melhor que é tudo de graça.

No site do PatternCooler, você pode testar como ficaria a pattern em fundo infinito, e pode até alterar as cores dos elementos e fundo. Se registrando gratuitamente, também é possível adicionar patterns ao seus favoritos.

Para quem tem pressa em fazer algo e não quer ficar horas no Photoshop tentando criar algo que pode ser repetido ad infinitum, o PatternCooler é um baita de um quebra galho.

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• Tabela de cores por cultura
• Teoria básica do design – Cor
• Livros de teoria do Design

O sistema em Flash, chamado Adobe BrowserLab, permite que você teste seu site em navegadores tais como o Internet Explorer 6, 7 e 8, Firefox 2 e 3 no Windows XP. Você também pode testar em Safari 3, Firefox 2 e 3 pelo Mac OSX.

Embora o sistema seja gratuito (necessita de um rápido cadastro no próprio site se você não tiver um Adobe ID), há planos para monetizar o serviço em breve. No entanto, a Adobe está cogitando implementar esse sistema em uma versão futura do Dreamweaver – o que facilitaria muito a vida dos web designers.

Foi através dele que descobri que o Design Blog não fica legal em IE7 (Internet Explorer 6 já previa que não iria abrir direito – por outro lado, deixei de dar suporte a esse browser pré-histórico faz tempo). Ferramenta recomendada para todos os web designers por aí.

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• Novo Forum de Design
• Como melhorar a usabilidade no seu layout
• Mega sorteio Design Blog e Adobe!

O jeito mais fácil de identificar qual tipo de impressão foi usada em algo, é observando as letras pequenas da embalagem (por exemplo). Com um conta-fios em mãos (ou uma lupa comum), observando estas letras pequenas (é o melhor jeito de descobrir assim do que observando outros elementos gráficos) e de preferência de cor preta, alguns detalhes se revelam mostrando que tipo de impressão foi feita.

Conta-fio tradicional, usado para examinar a qualidade de impressos

Na impressão offset, as letras pequenas vão ficar chapadas, ou seja: com contorno “perfeito”.

Na impressão por rotogravura, como a chapa de impressão é reticulada (formado por inúmeros pontinhos minúsculos), as letras vão ficar com as bordas mais irregulares – coisa que não dá pra se notar a olho nú.

E finalmente, na impressão por flexografia, as bordas das letras vão ser como as bordas de um carimbo (ou seja, uma parte mais clara na borda seguida por uma parte mais borrada ou forte) – afinal de contas, a impressão por flexografia é feita prensando uma borracha em alto relevo com tinta contra o papel.

Por imagem, fica mais fácil:

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• A importância de parceiros confiáveis
• Como criar apresentações fantásticas
• Um guia prático para resolução de imagem