desenvolvimento para web » miscelânea

8 maneiras de melhorar a performance de um site

Tárcio Zemel — Mon, 14 Jun 2010 13:00:44 +0000

Existem, literalmente, centenas de maneiras para aumentar a performance de um site. Os métodos variam e alguns, obviamente, são mais eficientes que outros. As três áreas principais que você pode trabalhar são: hardware (servidor web), otimização de scripts server-side (PHP, Python, Java, etc) e performance do front-end. Este artigo se concentra no terceiro ponto: performance do front-end.

Este é um artigo traduzido do original “10 Ways to Improve Your Web Page Performance“, do blog Six Revisions, e sofreu algumas adaptações.

Inspecione suas páginas para encontrar os culpados

É muito útil inspecionar suas página web para encontrar componentes desnecessários ou componentes que podem ser otimizados. Esse tipo de inspeção geralmente envolve uma ferramenta como o Firebug (mas existem outras ferramentas) para determinar quais os componentes (imagens, arquivos CSS, documentos HTML, arquivos javascript, etc) estão sendo solicitados pelo usuário, quanto tempo levam para carregar e o quão grandes são (tamanho em KB). Regra geral, deve-se mantê-los tão pequenos quanto possível (até 25KB é uma boa meta).

A aba “Rede” do Firebug pode ajudá-lo a caçar os arquivos que “atolam” o site. No exemplo acima, tem-se uma visão geral de todos os componentes da página, incluindo: o que é, onde está, o quão grande é e quanto tempo demorou para carregar.

Salve as imagens no formato correto

Se o site possui várias imagens, é essencial aprender sobre os diferentes formatos e qual é o ideal para cada imagem. Há três formatos comuns para imagens na web: JPG, GIF e PNG. Em geral, deve-se usar JPG para fotos realistas com gradações suaves e tons de cores (degradês) e GIF ou PNG para imagens com cores sólidas (tais como gráficos e logotipos).

Para mais informações a esse respeito, leia o artigo sobre como otimizar imagens para web – guia de otimização de imagens.

Minimize seu CSS e javascript

Minimização é o processo de remoção de caracteres desnecessários (tais como tabulações, espaços comentários do código fonte, etc) a partir do código fonte para reduzir o tamanho do arquivo. Por exemplo:

.classe {
color: #ffffff;
line-height: 20px;
font-size: 9px;
}

Pode ser “convertido” para:

.classe{color:#fff;line-height:20px;font-size:9px;}

E não se preocupe: não é preciso reformatar o código manualmente! Há uma infinidade de ferramentas gratuitas à disposição para minimizar arquivos CSS e javascript. Para CSS, é possível encontrar várias ferramentas no artigo sobre ferramentas e recursos para desenvolvimento web; para javascript, algumas opções são /packer/, JSMIN, YUI Compressor e JavaScript Code Improver. Lembre-se: uma boa minify tool é aquela que permite reverter o processo de minimização.

Combine arquivos CSS e javascript para fazer menos requisições HTTP

Para cada componente necessário para renderizar uma página web, é criada uma solicitação HTTP no servidor. Então, se você tiver cinco arquivos CSS para uma página, serão necessários, pelo menos, 5 requisições HTTP separadas. Ao combinar arquivos, é possível reduzir a sobrecarga de solicitações HTTP necessárias para gerar uma página web.

Confira o recomendadíssimo artigo de Niels Leenheer sobre como combinar arquivos CSS e JS usando PHP (pode ser adaptado para outras linguagens). SitePoint discute um método similar para “empacotar” CSS e javascript – eles conseguiram reduzir o tempo de resposta em 76% em relação ao tempo original!

Use sprites CSS

CSS Sprite é uma combinação de imagens menores em uma imagem grande (já comentado no artigo “Otimização WordPress: aumente a performance e desempenho de seu blog/site“). Para mostrar a imagem correta, é preciso ajustar os valores da propriedade CSS background-position. Combinando várias imagens desta forma, é possível reduzir os pedidos HTTP (e reduzir requisições HTTP é um importantíssimo passo rumo à melhora de performance e desempenho de um site).

É possível fazer Sprites CSS manualmente, mas há uma ferramenta online chamada CSS Sprite Generator que dá a opção de fazer upload de imagens para serem combinados em um único sprite, gerando o código CSS (os valores de background-position) para renderizar as imagens.

Use compressão server side para diminuir o tamanho dos arquivos

Fazendo uma analogia, compactar objetos da página via server side é semelhante a zipar um arquivo grande para enviar por e-mail: você (servidor web) zipa um retrato grande da família (o componente da página) e envia por e-mail para seu amigo (o browser) que, por sua vez, descompacta o arquivo zip para ver a imagem. Os métodos de compressão mais comuns são Deflate e gzip.

Se o site está sendo executado em servidor próprio dedicado ou há um serviço de VPS e a compactação não está ativada, confira este guia sobre como instalar mod_gzip no Apache. Se não for o caso, entre em contato com seu servidor de hospedagem e peça instruções sobre como ativar a compactação server side.

Evite CSS e javascript incorporado e inline

Por padrão, CSS externo e arquivos javascript são armazenados em cache pelo browser do usuário. Se esse usuário sai do site, ainda sim ele possui o javascript e CSS em sua máquina; então, da próxima vez em que retornar ao site, não haverá necessidade de baixar esses arquivos novamente. Se há um monte de CSS e JavaScript no documento HTML (inline ou incorporado), não é possível se valer do benefício de cache do navegador. Portanto, sempre que possível, dê preferência ao uso de folhas de estilo e scripts externos.

Utilize serviços terceirizados para seus componentes e recursos

Aliviar um pouco o site de componentes e recursos, utilizando serviços de terceiros, reduz enormemente o trabalho do seu servidor web. O princípio é que a “carga total” é compartilhada com outro(s) servidor(es).

É possível usar o Feedburner para gerenciar feeds, Flickr para as imagens (apesar de algumas implicações de uso), Google AJAX Libraries API para servir estruturas javascript populares (como Mootools, jQuery e Dojo), dentre outros.

E você, tem alguma dica de como melhorar a performance de um site?

dpw2010: novo tema do desenvolvimento para web

Tárcio Zemel — Mon, 10 May 2010 03:01:46 +0000

No dia 05/04 foi publicado o artigo “Promoção dpw2010: anuncie grátis no desenvolvimento para web“, que divulgava a promoção na qual o ganhador teria o direito de anunciar grátis no desenvolvimento para web. Esse anúncio grátis se daria para comemorar o novo tema do blog, tema este que foi inaugurado hoje: dpw2010!

Web design, estrutura e usabilidade

O web design foi feito com base na Proporção Áurea, com o objetivo de melhorar a distribuição do conteúdo e proporcionar melhor sensação ao visitante. A fim de dar ainda mais ênfase aos conteúdos, o estilo clean foi reforçado e aprimorado!

Página Inicial

Durante a análise do tema antigo, foi constatado que a página inicial não tinha uma apresentação muito boa. As imagens e demais elementos “incorporados” no texto faziam com que a index demorasse para carregar. Em função do peso, somente 3 artigos eram exibidos por vez e uma paginação era mostrada ao final.

No dpw2010 é diferente: priorizou-se, ao máximo, a performance e o desempenho do site! A página inicial, por exemplo, agora mostra 7 artigos, sendo que somente o mais atual, que recebe destaque, tem uma imagem vinculada sendo exibida. Quer dizer, é possível ao visitante visualizar uma quantidade bem maior de artigos de uma só vez, num tempo de carregamento super otimizado!

Páginas de Artigos

As páginas de artigos também receberam aprimoramentos. Agora vários efeitos visuais acontecem para proporcionar uma melhor experiência e facilitar o uso do site. Mas talvez, devido ao tempo, não tenha sido possível implementar os efeitos para todos os browsers… ;-)

Por exemplo, clique em “Sumário” e selecione algum dos itens. Uma rolagem suave acontece para levar até a âncora selecionada. Se a tela rolar o suficiente, um botão aparece à direita da tela para levar novamente ao sumário, facilitando a navegação e experiência no site.

Página de Categorias e Busca

Agora as Páginas de Categorias exibem todos os artigos de uma só vez! Com o novo tema, a questão da paginação pôde ser eliminada de vez, tanto na página inicial, quanto nas páginas de categorias. Já que, agora, as listagens de artigos são mostradas de forma fácil de “escanear” e com apresentação de somente título e descrição, mesmo as categorias que possuem mais artigos ficam leves de serem exibidas/carregadas.

A página de busca segue, basicamente, a mesma estrutura da Página de Categorias: tudo é exibido de uma só vez, com a oportunidade de todos os resultados serem visualizados em uma única página. Para quem faz buscas relativamente específicas, consegue ver o resultado com vários artigos mesmo “antes da dobra”.

Barra de ferramentas

Agora o desenvolvimento para web possui uma barra de ferramentas! Em qualquer lugar do site em que estiver, o visitante pode se valer da barra de ferramentas flutuante, sempre fixa no topo da tela. Opções são mostradas/ocultadas dependendo do tipo da página atual, como as opções de enviar a notícia para um amigo e compartilhar em diversas redes sociais – uma ênfase especial ao exclusivo Sistema DPW para Alteração do Tamanho de Textos ^®!

Análise de performance e desempenho

As diversas modificações no design, estrutura, otimização de função e todas as demais medidas feitas para aumentar a performance e desempenho do blog deram certo.

Gráfico de Peso de Arquivos: Antes

Na página inicial, por exemplo, utilizando o complemento para Firefox YSlow, foi possível notar que o número de requisições HTTP estava bem elevado e, pelo fato de as folhas de estilo e javascripts não estarem compactados, isso também contribuía para um carregamento não muito satisfatório. Depois de otimizar os scripts e CSS e retirar/implementar alguns plugins no WordPress, o ganho de performance é notável!

Gráfico de Peso de Arquivos: Depois

Habilitando o analisador de Rede do Firebug e vendo os resultados, os números não eram, lá, dos melhores…

Velocidade de carregamento: antes

Com os melhoramentos do novo tema do desenvolvimento para web e os já referidos meios para diminuição de requisições HTTP e compactação de scripts e folhas de estilo, as coisas ficaram bem melhores!

Velocidade de carregamento: depois

Na prática, houve uma melhora de quase 300%!

Resultado da promoção dpw2010

Como devidamente explicado no artigo da promoção, infelizmente uma mudança nos critérios de sorteio teve que ser realizada. De qualquer forma, como garantido, aqueles que haviam participado até então não estariam de fora.

A busca do twitter possui “prazo de validade”. Felizmente existem boas ferramentas para o twitter, como o HootSuite, que permitem armazenamento de mensagem definidas por critérios específicos. Com isso, ficou fácil: foi só jogar o nome de todos os participantes em uma planilha e gerar um número aleatório no random.org.

E a vencedora da promoção dpw2010 foi Raquel Oberg (@raqueloberg), da Thema Webdesign! Como vencedora, seu prêmio será um banner na barra lateral do blog que será exibido durante 2 meses.

Parabéns, Raquel, pela promoção e por seus trabalhos na Thema!

Considerações finais

Ocorreu uma mudança importante em relação à participação do desenvolvimento para web nas mídias sociais: a partir de agora, o twitter oficial do blog é @desenvolvweb! Peço aos seguidores do perfil @tarciozemel interessados estritamente em assuntos relativos a desenvolvimento web para seguirem @desenvolvweb, pois os assuntos da área serão tratados neste.

Existem diversos phantom labels no novo tema e diversas funcionalidades/ferramentas em desenvolvimento, que serão publicados em momentos oportunos. A intenção é fazer do blog um espaço cada vez mais agradável e com conteúdo cada vez de mais qualidade para os leitores! Os estudos feitos foram para que os implementos e melhorias no blog facilitem a navegação e garantam uma experiência prática e objetiva.

Fica nosso “Muito obrigado!” aos participantes e leitores, assinantes do feed, seguidores do twitter e para todos que contribuem para que o desenvolvimento para web seja um dos principais blogs sobre desenvolvimento web do Brasil!

Ferramentas gratuitas para testes de segurança em sites

Tárcio Zemel — Wed, 28 Apr 2010 17:56:24 +0000

Web sites estão ficando mais e mais complexos a cada dia e quase não há mais sites estáticos sendo desenvolvidos. Hoje, o site mais simples tem pelo menos um formulário de contato ou newsletter e muitos são construídos com CMSs ou usam plugins ou serviços de terceiros, que nem sempre oferecem 100% de controle.

Mesmo se o site é 100% “feito à mão”, quando nós confiamos em nosso próprio trabalho e pensamos que tudo está seguro, é possível que um caractere especial não tenha sido tratado ou não tenhamos conhecimento sobre novas técnicas de ataque.

Então, é realmente difícil dizer “meu site é seguro”, sem realizar alguns testes de segurança. A parte boa é que há ferramentas robustas e grátis para testes de segurança para ajudar a identificar quaisquer possíveis falhas.

Este é um artigo traduzido do original “10+ Free Web Application Security Testing Tools“, do blog WebResourcesDepot, e sofreu algumas adaptações.

Netsparker Community Edition

Esta é a edição gratuita, Netsparker Community Edition, para Windows XP, 7, Vista e 2003/2008. O aplicativo pode detectar SQL Injection + cross-site scripting. Depois de realizar uma varredura no site, apresenta as soluções para as possíveis questões apresentadas e permite que você veja a renderização do browser e requisições/respostas HTTP.

Websecurify

Websecurify (para Windows, Linux, Mac OS X) é uma ferramenta open source muito fácil de usar que identifica automaticamente as vulnerabilidades de aplicações web. Ele pode criar relatórios simples (que pode ser exportado em vários formatos). A ferramenta tem suporte a vários idiomas e é extensível, apresentando suporte a plugins.

Wapiti

Wapiti (Windows, Linux, Mac OS X) é uma ferramenta web open source que verifica as páginas de sites e aplicativos web procurando por scripts e formulários que podem injetar dados. É feito em Python e consegue detectar, dentre outros:

File Handling Errors (include/require locais e remotos, fopen e readfile)
Database, XSS, LDAP e CRLF injections (HTTP response splitting e session fixation)
Command Execution Detection (eval(), system() e passtru())

N-Stalker

A edição gratuita do N-Stalker para Windows realiza pode verificar até 100 páginas de uma só vez para realização de vários testes de segurança, incluindo cross-site scripting.

skipfish

skipfish (que funciona em Windows, Linux e Mac OS X) é ferramenta para teste de segurança em sites totalmente automatizada e é muito leve e muito rápido (podendo executar 2.000 pedidos por segundo). O software aprende sozinho sobre o que está analisando, sendo capaz de geração de wordlists em tempo real e autocompletar formulários. Assim como as demais ferramentas de segurança, possui diversos tipos de testes de segurança, incluindo Blind SQL Injection.

Scrawlr

Scrawlr (roda no Windows) é um software gratuito para escanear vulnerabilidades de SQL Injection em aplicações web. É desenvolvida pelo HP Web Security Research Group juntamente com o Microsoft Security Response Center.

Watcher

Watcher, para Windows, é um plugin para o Fiddler e funciona como uma ferramenta de análise passiva para aplicações web baseadas em HTTP. Ele é executado em segundo plano e interage com a aplicação web realizando mais de 30 testes (novos podem ser adicionados) enquanto você navega. Ele identifica questões como POSTs cross-domain, comutação perigosa entre HTTP e HTTPS, dentre outros.

x5s

X5s é outro plugin para o Fiddler, assim como o Watcher também é para Windows, projetado para trabalhar com falhas de segurança relativas à vulnerabilidades de XSS. Ele realiza testes de input com caracteres especiais como “<” e “>” e analisa como é o output resultante.

Exploit-Me

Ao invés de usar um proxy, como a maioria das ferramentas de teste de segurança, o Exploit-me é um plugin para o Firefox que realiza os testes pelo próprio browser. Na verdade ele é um “combinado” de 3 plugins de segurança:

XSS-Me: para testes de XSS
SQL Inject Me: testes de vulnerabilidades com SQL injection
Access-Me: testes de segurança com vulnerabilidades de acesso

Acunetix

Esta é a versão gratuita do Acunetix, programa para Windows que executa verificação através de testes de segurança para identificar vulnerabilidades de Cross Site Scripting (XSS).

Promoção dpw2010: anuncie grátis no desenvolvimento para web

Tárcio Zemel — Mon, 05 Apr 2010 18:09:15 +0000

Os que seguem o desenvolvimento para web no twitter já estavam sabendo que uma promoção logo iria acontecer e a hora é agora!

O desenvolvimento para web vai receber um novo tema, o dpw2010, e esse novo tema vai contar com algumas formas novas de interação e apresentação de conteúdos. Uma das novidades é um espaço para anúncios 150×150 na barra lateral.

O formato 150×150 foi escolhido a fim de inovar! Os “banners de blogueiros” 125×125 nós já encontramos por aí, então, com esse novo formato, além de diferenciação, é possível obter maior visibilidade ao banner do anunciante. Como não é intenção abarrotar a sidebar de anúncios, mas sim selecionar e segmentar bastante os anunciantes, este formato, pelo menos em teoria, parece ideal.

E você, que é leitor assíduo, assinante do feed ou visitante casual, pode aproveitar para anunciar grátis no desenvolvimento para web! Isso, mesmo: você pode participar da promoção e concorrer a um anúncio grátis – por período de tempo a ser definido. Por enquanto, números exatos de estatísticas de acesso não serão divulgados, mas você não acha interessante ter um anúncio grátis em um blog sobre desenvolvimento web, com público altamente selecionado, que cresceu 300% no último ano?

Regras da promoção

A base da promoção é a seguinte frase no twitter:

RT @tarciozemel WordPress, jQuery, CSS, blogs, web design e dicas para web é no desenvolvimentoparaweb.com ! http://ow.ly/1uM90

Então, para concorrer a um espaço de anúncio grátis, de formato 150×150, você deve, necessariamente, fazer o seguinte:

Seguir @tarciozemel no twitter;
RT a mensagem apresentada acima.

O sorteio será realizado no Sorteie.me e “filmado” através do Screenr – ferramentas citadas no artigo sobre ferramentas para twitter.

Pessoal, os critérios para seleção do ganhador da promoção terão que ser alterados! Por total falta de atenção minha, não percebi que o sorteie.me só aceita fazer sorteios baseados em URL caso o endereço seja encurtado pelo migre.me. Como a URL da promoção é através do ow.ly, não vai funcionar…

O novo critério ainda não foi decidido, mas o compromisso com aqueles que já fizeram seus tweets ou ainda farão, até a data limite, será mantido! Ainda dá tempo de participar! ;-)

Serão considerados os RTs enviados até o dia 5 de maio de 2010 (ou seja, cerca de 30 dias a partir da data de publicação deste artigo). O novo tema será inaugurado já com o banner de quem ganhar a promoção!

Boa sorte! ;-)

Perguntas ao cliente para antes e depois de um projeto

Tárcio Zemel — Mon, 01 Mar 2010 16:14:39 +0000

É através de perguntas ao cliente que podemos nortear todo o planejamento e desenvolvimento de um projeto. E existem perguntas apropriadas para se fazer antes e depois do desenvolvimento de um software para web. Perguntas essas que são de vital importância para se entender as regras de negócio, as especificações, expectativas e muitas outros imprescindíveis. Veja algumas perguntas que devem ser feitas aos clientes antes e depois de um projeto.

Este é um artigo traduzido do original “14 Questions To Ask Your Clients Before and After a Project”, do blog DesignReviver, e sofreu algumas adaptações.

Perguntas ao clientes antes do projeto

As perguntas que devem ser feitas ao cliente antes de o projeto se iniciar servem, justamente, para dar o “norte” ao que será realizado no job. É através dessas perguntas que se poderá conhecer melhor a empresa, saber quais as expectativas (de ambas as partes envolvidas) e ter uma noção melhor de como se dará o desenvolvimento, em si. Certamente as perguntas a seguir são excelentes complementos a um bom briefing de desenvolvimento de sites.

Qual é o tipo de negócio da sua empresa?

Esta é uma questão importante porque é o primeiro passo para conhecer a estrutura do negócio do seu cliente. Ela irá ajudá-lo a avaliar as necessidades da empresa, na seara de desenvolvimento web e é também uma porta de entrada para a reflexão estratégica.

Qual é a reputação de sua empresa?

No meio online, reputação é tudo. Você quer (e precisa) criar um site que reflete a reputação do negócio de seus clientes. Se a reputação de seu cliente está passando por um período difícil, então qualquer projeto que você desenvolva tem poder de seguir o mesmo caminho ou atrair “positividade” – logicamente ambos querem a segunda opção. Além disso, a empresa possui uma boa reputação de satisfação, qualidade e tempo de serviço? Esses são todos elementos que afetam o projeto.

Evidentemente que a pergunta não precisa ser feita de forma tão direta; o cliente pode até se sentir ofendido. Mas a pessoa responsável pelas negociações deve extrair esse tipo de informação do cliente a fim de prover recursos de qualidade para o desenvolvimento do projeto. A experiência mostra que a capacidade de abstrair respostas dos clientes para transformá-las em conceitos de desenvolvimento web é algo que valoriza bastante o projeto – tantos em termos financeiro, quanto em termos de qualidade.

Qual é seu cliente típico?

Esta questão irá ajudar a você ter uma idéia melhor do qual é a abrangência da empresa. O cliente típico está fora do mercado de atuação da empresa? Como a empresa interage com sua clientela? O cliente típico fala uma língua diferente?

Essas questões são vitais para a estética e/ou usabilidade de seu projeto. Se você estiver projetando um logotipo, por exemplo, e os clientes típicos de seu cliente não falam o mesmo idioma, então você teria a certeza de que o logotipo deve ser capaz de comunicar eficazmente em um outro nível.

Qual é o seu público-alvo?

Diferente do qual é o cliente típico, você deve ter uma profunda compreensão do público-alvo que o seu cliente está apontando. Talvez ele esteja tentando trocar seu nicho de atuação ou está procurando redefinir e expandir sua base de clientes; seja qual for, saber exatamente qual o público alvo de seu cliente é fundamental para o desenvolvimento e sucesso de seu projeto.

Você tem concorrentes? Como se diferencia deles?

Embora isso possa ter uma resposta óbvia (se você fez uma boa quantidade de pesquisas), você ainda deve fazer essa pergunta para ter uma idéia do que o cliente acredita que seja sua concorrência. Mais do que provavelmente, ele tem uma ideia muito melhor de quais são seus concorrentes. Conhecendo os concorrentes de seus clientes é possível excluir qualquer semelhança entre todos os seus projetos existentes. Isso ajudará a criar um design (e um projeto, em si) mais exclusivo e centralizado para o seu cliente.

Com que frequência você gostaria de atualizações?

Você não quer ser inconveniente e comunicar o cliente cada passo que dá no projeto. Esta questão irá ajudá-lo a estabelecer um alinhamento com o seu cliente para fazer comunicados sobre atualizações somente quando ele quiser (o que ele julgar que é conveniente, aliado ao que você considera ser importante para o projeto). Atualizações excessivas podem desencorajar um cliente a usar seus serviços no futuro…

O que é necessário para que considere o projeto finalizado?

Essa é a pergunta equivalente ao “aceite”, que consta no modelo do artigo sobre briefings para desenvolvimento de web sites.

Se você está projetando um site ou sistema virtual, então é importante perguntar ao seu cliente como pretende utilizar o site, e como eles prevê que será o resultado. Não seria nada bom se você estivesse finalizando um projeto e descobrisse que ele não tem as características que seu cliente solicitou ou não se comporta do modo como ele idealizou.

Quais formas de pagamento você usa?

Se você não tem intenção de elaborar um contrato antes de iniciar o projeto, então seria uma boa ideia pedir ao seu cliente para avaliar como eles planejam pagar por seus serviços. Talvez você só aceite o PagSeguro, mas o cliente só paga em cheque. Se não for combinada uma forma de pagamento antes, isto pode criar graves problemas e causar um desgaste irremediável na relação profissional.

Perguntas ao cliente depois do projeto

Essas são perguntas que podem ser feitas um pouco antes da entrega do projeto ou imediatamente depois. O objetivo é realizar uma “linha suave” desde a concepção do projeto até sua conclusão e saber em quais pontos você acertou e não acertou no decorrer do desenvolvimento. Aprender com os próprios erros para se aprimorar é básico.

Você está satisfeito com os resultados?

Esta questão irá ajudá-lo a analisar a qualidade de suas habilidades e como você é capaz de desenvolver um projeto baseado nas necessidades do seu cliente. A medida em que você avança em sua carreira, você vai ter muita chance de melhorar suas habilidades e saber o quão satisfeitos seus clientes ficam com os trabalhos que você faz cria oportunidades de você fazer exatamente isso.

Gostou da minha postura profissional durante o projeto?

Tão importante quanto saber se o cliente gostou do resultado final do projeto é saber se ele gostou da relação profissional que vocês tiveram neste ínterim. Desenvolver as relações interpessoais faz parte de qualquer negócio, não somente de desenvolvimento para web; portante, procure sempre aperfeiçoar suas habilidades de comunicação. Perguntar a opinião do cliente sobre isso é uma boa, vai permitir que você regule seu “termômetro sócio-profissional”.

Alguma outra dúvida?

Às vezes, um cliente pode ter algumas perguntas, mas ela pode receoso ou intimidado a perguntar, por motivos pessoais e profissionais. Qualquer razão que seja, você deve deixar claro para seu cliente que ele pode sempre vir a você com todas as perguntas que possa ter, mesmo agora, com o término do job, que o contato entre vocês não será tão frequente. Isso, por si só, poderia inspirar o cliente a perseguir os seus serviços para projetos no futuro. Ter um relacionamento digno de confiança com seu cliente é uma das coisas mais importantes que você pode fazer.

Não existem outras perguntas que se deve fazer ao cliente?

Obviamente que existem centenas de outras perguntas que podem – alguns casos, devem – ser feitas ao cliente, antes e depois de um projeto. As perguntas aqui apresentadas são somente um guia, um “esboço” das perguntas que você efetivamente fará ao cliente.

O mais importante não é “decorar” essas perguntas; o mais importante é ter consciência de que determinadas perguntas podem e devem ser feitas aos clientes antes e depois de um projeto. Antes para que ambos fiquem em sintonia com o projeto; depois, para aferir os resultados e esclarecer dúvidas (que existem, pode acreditar).

E você, quais perguntas faz a seus clientes antes e depois de um projeto?

Como otimizar imagens para web – guia de otimização de imagens

Tárcio Zemel — Fri, 11 Dec 2009 15:34:04 +0000

Otimizar imagens para web faz com que seu site carregue mais rápido e que seus visitantes não tenham que esperar tanto pelo carregamento. Os visitantes de seu site querem imagens otimizadas e de tamanho reduzido, portanto, é importante aprender a otimizar imagens para a web a fim de servir páginas rápidas e de qualidade. Entender o básico sobre compressão e otimização de imagens e seus formatos permite escolher não somente qual a melhor maneira de reduzir o tamanho de imagens, mas também melhorar a qualidade de imagens.

Este é um artigo traduzido do original “How to Optimize Images for Web – Image Optimization Ultimate Guide“, do blog Design Live, e a tradução (com pequenas adaptações) foi feita com autorização do autor, Michael Garmahis.

Retirar o excesso de espaço em branco

Às vezes uma imagem tem espaço branco ou tem um “excesso” de cor ao redor para que o texto e outros elementos não encostem na imagem. Ao invés disso, recorte esse excesso de espaço em branco e dê o espaçamento desejado usando a propriedade CSS padding.

Não redimensionar imagens pelo browser

Não use propriedades HTML ou CSS para redimensionar suas imagens pelo browser, ao invés disso, redimensione suas imagens em seu programa de editoração de imagens preferido, especificamento exatamente a dimensão de cada imagem que será usada.

Escolher o formato de imagem certo

Para otimizar imagens para web, escolher o formato de imagem correto é fundamental. Então, saiba quando optar entre JPG, GIF e PNG.

JPG

JPG é o formato para fotos. JPG pode ter milhões de cores e ainda conseguir uma excelente taxa de compressão. É um formato “de perda”, o que significa que ter qualidade 100% não significa menor perda). Então você perde qualidade a cada edição da imagem. JPG não suporta transparência.

GIF

GIF é o formato para animações. GIF é um tipo de imagem “paleta” (também chamado “indexed”), que contém até 256 cores indexadas. GIF é um formato sem perda, o que sigfnifica que quando você modifica e salva a imagem, não há perda de qualidade. GIF suporta transparência (os pixels em uma imagem em GIF ou são totalmente transparentes ou são totalmente opacos).

PNG 8

PNG 8 é o formato para logos, ilustrações, ícones, botões, backgrounds e gráficos. PNG 8 é um formato sem perda, assim como GIF. Diferente do GIF, PNG 8 costuma gerar um arquivo de tamanho menor e tem suporte a transparência alpha variável – gerando pixels semitransparentes (recurso não suportado pelo IE6).

PNG 24

PNG 24 é usado quando você precisa de transparência alpha e mais de 256 cores. PNG24 é também a única opção quando você precisa de uma imagem de qualidade superior e o tamanho do arquivo gerado não importa. O tamanho das imagens em PNG 24 é geralmente maior que JPG e PNG8. Truecolor PNG é um formato sem perda que pode ter milhões de cores (16 bits por canal) e pode servir perfeitamente como “intermediário” entre diversas edições.

Usar “Save for Web & Devices” ao invés de “Save as…” no Photoshop

O comando “Save for Web & Devices…” no Photoshop (Alt+Shift+Ctrl+S) existe para exportar imagens otimizadas para web, com um melhor balanceamento tamanho/qualidade. É possível ter um controle refinado através de previews para experimentar diversos tamanhos de imagem e qualidade. Essa opção tenta reduzir o tamanho dos arquivos retirando informações (metadata) dispensáveis – o que pode fazer com que uma imagem tenha o dobro do tamanho necessário quando se trata de imagens para web.

Usar poucas cores para imagens indexadas e experimentar a paleta “Selective”

Se está produzindo ou otimizando imagens para ícones, botões ou outro tipo que possa ser em PNG8, tente reduzir o número de cores para 32 ou 64. Isso pode reduzir significativamente o tamanho sem alterar na qualidade da imagem.

Usar a paleta “Selective” para imagens com cores chapadas permite uma compressão de imagem melhor e mais eficiente em comparação às paletas “Perceptual” ou “Adaptive”.

Converter PNG para Grayscale se você não precisa de cores

Converta as imagens para Grayscale ou Escala de Cinza (Image >Mode > Grayscale) antes de salvá-las em PNG. Isso ajuda a economizar alguns KBs, especialmente em se tratando de imagens semitransparentes.

Experimentar PNG24 ao invés de PNG8

Às vezes imagens pequenas e alguns tipos de gradientes ficam melhores (custo/benefício) em PNG24 ao invés de PNG8. Isso acontece devido à maneira com que os algoritmos de compressão de “sem perda” trabalham e à “sobrecarga” que cores indexed acrescenta.

Usar “Posterization” para reduzir o número de cores em PNG

“Posterization” reduz a quantidade de cores, convertendo cores similares em uma só. Para usar esta técnica vá em Image >Adjustment >Posterize, no Photoshop, e experimente um valor em torno de 40.

Evitar salvar em JPG Progressivo (Progressive JPEG)

Salvando um JPG no modo “Progressive” faz com que várias “cópias” em baixa resolução da imagem sejam feitas para aparecerem rapidamente na tela, enquanto, progressivamente, a qualidade vai aumentando.

Em algumas vezes pode ser que salvar no modo Progressivo gere uma imagem em tamanho menor, mas, na maioria das vezes, será maior. Além disso, imagens salvas no modo Progressivo não são exibidas em muitos dispositivos móveis.

Reduzir o “ruído” (noise) para diminuir o tamanho da imagem

Noise (“ruído”) faz com que o algoritmo do JPG precise de mais recursos para salvar, deixando menos espaço para a informação realmente útil, ou seja, a imagem em si. Isso significa que, eliminando o noise, você não somente tem uma imagem com tamanho melhor, mas também melhorar seu aspecto visual.

Você pode usar diversos plugins do Photoshop, como Noise Ninja ou Imagenomic Noiseware ou uma maneira fácil de reduzir o ruído no Photoshop é mudar para o modo de cor Lab e, em seguida, aplicar Filter > Mediana (2-4) para os canais A e B.

Embaçar o fundo

Embaçar o fundo de uma imagem JPG ajuda o mecanismo de compressão a gerar uma imagem de tamanho menor. Para usar essa técnica, faça uma selação no objeto principal da imagem, inverta a seleção (CTRL + I), aplique uma pequena quantidade de Gaussian Blur (1 ou 2px). Agora você pode salvar sua imagem como um JPG de tamanho menor.

Embaçar a imagem quando for Salvar para Web

Devido ao fato de o algoritmo de compressão JPG ter facilidade em lidar com transições sutis de cores, acrescentar um pequeno blur (0,2 ou 0,3) quando for Salvar para Web no Phosothop pode ajudar a reduzir e otimizar o tamanho do arquivo. Diminuir ligeiramente o Contraste e Saturação também tem um bom impacto no tamanho de arquivos JPG.

Otimizar imagens com ferramentas especiais

Existem excelentes ferramentas online e utilitários para download que podem ajudá-lo a reduzir e otimizar significativamente suas imagens sem perda de qualidade. É uma boa prática usar algumas dessas ferramentas para otimizar suas imagens e obter arquivos de tamanhos menores. Atenção aos termos de uso de algumas dessas ferramentas.

Smush.it

Smush.it é uma ferramenta online que utiliza técnicas de otimização diferentes para cada formato de imagem (PNG, GIF, JPEG) para remover bytes desnecessários da imagem sem perda de qualidade. Você também pode usar Smush.it integrado com o plugin do Firefox YSlow ou através de um plugin WordPress.

punypng

punypng usa diversas técnicas de otimização de imagens para web para reduzir o tamanho dos arquivos. Os desenvolvedores do punypng afirmam que a ferramenta é atualmente mais eficiente do que o Smush.it.

PNG Monster

PNG Monster é uma GUI para compressão de PNG projetada para converter com eficiência grandes números de arquivos PNG automaticamente. PNG Monster usa uma variedade de aplicações “command-line” (PNGRewrite, PNGCrush, OptiPNG, PNGOut, AdvPNG) para comprimir com variados métodos de compressão PNG.

SuperPNG

SuperPNG é um plugin grátis do Phosothop para salvar arquivos PNG significativamente menores em relação ao salvamento nativo do Phosothop. Também inclui algumas características avançadas de PNG, como suporte a 16 -bit color, compressão variável, correção de gama e salvamento de metadata.

SuperGIF

SuperGIF é um utilitário gratuito para Windows e MAC para otimizar imagens GIF. Ele permite comprimir um arquivo GIF em até 50%! A versão gratuita comprime somente um arquivo por vez.

jStrip

jStrip é um programa gratuito que reduz e otimiza imagens e JPG sem sacrificar a qualidade das imagens. JStrip trabalha removendo informações desnecessárias do arquivo JPG sem perda de qualidade ou recompressão.

Jetpack: explorando novas maneiras de ampliar e personalizar a web

Tárcio Zemel — Thu, 21 May 2009 18:48:37 +0000

Recentemente saiu no blog oficial da Mozilla no Brasil o anúncio do Jetpack, um projeto da Mozilla Labs para explorar novas formas de estender e personalizar a web! Há tempos quem mexe com desenvolvimento web sabe (e, recentemente, até o “usuário comum”) que os plugins para Firefox contribuíram e contribuem enormemente para o sucesso do Firefox. A Mozilla, obviamente, também sabe disso e, através do projeto Jetpack, promete estender e melhorar, e muito, o modo como os plugins são feitos e usados.

Atualmente existem mais de 12000 plugins para Firefox, feitos por mais de 8000 programadores. São extensões para o navegador que permitem de um tudo, desde funções para melhorar a usabilidade do Firefox, passando por players de música e ripadores de vídeo, até ferramentas direcionadas a nichos mais específicos, como, por exemplo, os indispensáveis Web Developer e Firebug. Mas, como consta no próprio comunicado oficial da Mozilla sobre o Jetpack, o atual sistema de plugins está apenas o começo!

Jetpack e a nova geração de plugins

Jetpack é uma plataforma para desenvolvimento de plugins para Firefox que, paradoxalmente, é uma extensão para Firefox e precisa ser instalada nos moldes “tradicionais”. Depois de instalada, o verdadeiro poder e potencialidade da nova geração de plugins está em suas mãos! Nas palavras da própria equipe Mozilla:

Especificamente, o Jetpack será uma exploração do uso das tecnologias da Web para melhorar o navegador (ex: HTML, CSS e Javascript), permitindo que qualquer um que saiba como fazer um site possa ajudar a tornar a Web um lugar melhor para trabalhar, se comunicar e se divertir.

Com Jetpack é possível desenvolver plugins sabendo somente (X)HTML, CSS e Javascript! É isso, mesmo! Utilizando somente estas tão conhecidas e usadas linguagens de desenvolvedores web, é possível criar, estender, personalizar, complementar e incrementar funções e funcionalidades!

Quer mais? Utilize javascript com o poder de jQuery! É possível escrever javascript utilizando as potencialidades do melhor e mais simples framework javascript da atualidade (e outros, também) para escrever seus plugins com o Jetpack da Mozilla! Quer ainda mais? Instale e use instantaneamente plugins feitos com JetPack sem reiniciar o Firefox!

Algumas das características do Jetpack:

“Web-based”
- HTML, Javascript e CSS são as únicas ferramentas necessárias;
- Tem o poder de AJAX e capacidades multimídia, incluindo , e ;
- Acessível através de um URL, tal como o resto da web;
- Pode ser debugado direto no navegador, sem necessidade de reiniciar, usando ferramentas como Firebug.
Robusto
- Trabalha com APIs para que você não tenha que atualizar e revalidar o seu código para cada nova versão do Firefox;
- Leve, mas com poderosos recursos, permitindo aplicações simples e complexas que aumentam a experiência da web, como os add-ons do Firefox fazem atualmente.
Seguro
- Oferece acesso apenas aos privilégios necessários, com questões de segurança sempre apresentados em termos sociais, e não termos técnicos;
- Código curto e fácil de rever, que garante que os potenciais problemas de segurança não sejam graves e tempos de revisão curtos.
Extensível
- Sua arquitetura permite a fácil inclusão de revisões (versionamento) e ferramentas de terceiros (por exemplo, jQuery, Dojo, etc) e bibliotecas API (por exemplo, Twitter, Delicious, Google Maps, etc)

Exemplo de funcionamento do Jetpack

Eu poderia realizar alguns exemplos aqui, para demonstrar toda a facilidade de uso do Jetpack. Entretanto, creio que vai ser mais “didático” eu mostrar um dos vídeos oficiais de exemplo.

Como começar com o Jetpack

Para dar os primeiros passos no Jetpack, além do básico, que é saber (X)HTML, CSS e javascript, você deve:

Acessar o site oficial e estudar os códigos dos exemplos de uso no site do Jetpack e na página com os primeiros plugins já disponíveis do Jetpack;
Passar pelo Tutorial Oficial do Jetpack (com o Jetpack instalado no navegador é possível alterar e testar os exemplos em tempo real);
Assinar o feed do desenvolvimento para web, que em breve vai trazer vários scripts para Jetpack! ;-)

Fique ligado no Jetpack

Esta é somente a primeira versão do Jetpack e, como podemos esperar da Mozilla, muita coisa boa ainda está por vir! O projeto tem tudo para dar certo e, segundo as expectativas, essa é realmente uma grande iniciativa em prol de uma web mais ampla, personalíssima e fácil de usar!

Acompanhe as novidades sobre o Jetpack:

Grupo de Discussão do Jetpack (em inglês);
Código-fonte do Jetpack;
Canal #jetpack em irc.mozilla.org, no IRC;
E, quando já estiver usando e abusando do Jetpack, reportar um bug.

Pronto para a revolução? :-D

Sobre parcerias de trabalhos em desenvolvimento web

Tárcio Zemel — Tue, 12 May 2009 14:44:00 +0000

No desenvolvimento para web o que não faltam são oportunidades para participar de projetos, quer seja individualmente, quer seja através de parcerias. Falando especificamente de trabalhos freelancers,é muito importante que se tenha uma boa rede de relacionamentos (o tão falado network) para não “deixar esfriar” a atuação no mercado “freela” de desenvolvimento web.

Entretanto – e infelizmente -, nem sempre as parcerias estabelecidas para o desenvolvimento de um projeto dão os frutos esperados, gerando desagradáveis situações entre as partes – muitas vezes causadas unilateralmente – que, de uma forma ou de outra, dão por consequência o descrédito e a não confiança na parte que não honrou com os compromissos previamente estabelecidos – pode-se falar, inclusive, em cancelamento da parceria no meio do projeto, o que, muitas vezes, culmina em cancelamento deste.

A escolha dos parceiros

Muito se diz e se escreve sobre ter uma excelente rede de relacionamentos. O que não se diz muito é como estimar que “tal” ou “qual” parceria/projeto dará certo; como saber qual pessoa dá mais indícios de que honrará com suas tarefas e demais acordos feitos.

Acredito eu que a resposta para estas perguntas pertence mais à seara da psicologia! Saber essas coisas, a meu ver, é impossível! Para quem desconhece o comportamento humano (eu, por exemplo), saber, de antemão, sem ter realizado algo com a pessoa anteriormente e/ou sem ter recebido uma indicação pessoal, é tarefa impossível! Se o “geral” já é complicado, imagine cada caso, individualmente; cada pessoa, com suas peculiaridades e jeito próprio…

Existem diversas maneiras de se escolher/trabalhar com parceiros de desenvolvimento. Cito algumas:

Indicação

Quando alguém que você já conhece/trabalha/trabalhou indica alguém para uma , um pouco da credibilidade e confiança que você nutre por esta pessoa será “transferido” para a indicação que esta fez – obviamente estou falando de pessoas sérias e compromissadas. É bem mais tranquilo conhecer e realizar projetos com uma pessoa que foi indicada por alguém que você já conhece. A própria indicação, em si, denota que quem indicou já realizou trabalhos com a pessoa e, por ter considerada a experiência positiva, fez a indicação.

Antigo colega de trabalho

É muito comum a situação de se trabalhar em uma agência, por exemplo, e, depois de ter saído daquele emprego, manter contato com alguma(s) pessoa(s) que permaneceu(ram). Neste caso, o fato de você já conhecer o estilo da pessoa, seu modus operandi, a “dinâmica”, o time, personalidade, dentre outras características – que você sabe por já ter trabalhado com a pessoa -, contribuem enormemente para que, no caso de um freela que necessita das capacidade do antigo colega de trabalho, você saber a quem recorrer.

Colega de faculdade

Outra situação comum é a pessoa ainda na faculdade conseguir freelas para fazer. Dependendo do projeto, a participação de mais pessoas é fundamental. Então, nada melhor que selecionar, dentre os colegas que levam os estudos a sério, qual(is) tem o melhor perfil para o projeto. Outra situação é, mesmo depois que a faculdade terminar, você ainda manter contato com alguns ex-colegas e, de forma semelhante, recorrer aos respectivos e-mails caso apareça algum job que necessite de pessoal extra.

Sites de projetos

Muito comuns são os sites que tem por objetivo o cadastro/divulgação de pessoas e jobs – como o excelente LimeExchange. Após realizar alguns projetos pelo site, você já começa a ficar conhecido e o volume de serviço pode aumentar. Principalmente nessa situação, onde você não conhece as pessoas com quem vai trabalhar, é preciso cuidado redobrado, preferencialmente com algum tipo de garantia que os seus serviços serão recompensados da maneira adequada e dentro do prazo combinado.

Blogs

Ter um blog é uma excelente oportunidade de, dentre outras vantagens, conseguir participar de projetos. A maioria dos meus freelas, por exemplo, foram frutos de contatos realizados pelo formulário de contato do blog por pessoas com dúvidas ou explicitamente querendo serviços em desenvolvimento web. Algumas estão comigo até hoje, seja para manutenir o que foi feito; seja para o desenvolvimento de novos projetos.

Social Medias / Redes Sociais / Sites de relacionamentos

Social medias, como diHITT e Rec6, apresentam excelentes oportunidades de conhecer pessoas e potenciais futuros colegas de freelancers – há casos de equipes inteiras terem se formado através de contatos iniciais em social medias. Então, se você tem um blog – pode ser sobre qualquer coisa, mas, no caso, estou falando sobre desenvolvimento web -, não deixe de enviar seus bons artigos para social medias.

Ter um perfil nos principais sites de relacionamentos também pode ser uma boa, já que a maioria permite que você divulgue endereços de seu site/blog, disponibilize feeds e, principalmente, que você se afilie a diversas comunidades relacionadas a sua área de atuação e faça diversos contatos relevantes, aumentando seu networking potencial.

Fóruns de discussão

Outra situação bem corriqueira é o anúncio de procura de parcerias em fóruns de discussão. Chega a ser óbvio o fato de, num ambiente em que se discute principalmente sobre um assunto, aparecerem oportunidades justamente sobre esse determinado assunto. No caso do desenvolvimento web, o que não faltam são pessoas procurando parceiros para projetos pagos, realização de boas ideias, reuniões de brainstormings, reposição de vagas em agências, etc.

Situações desagradáveis acontecem…

Mesmo tomando todos os cuidados, procurando saber coisas a respeito de seu(s) parceiro(s) na web (você faz isso, certo?), procurando pessoas que já trabalharam com “fulano”, enfim, tomando as devidas precauções para que tudo dê certo, esteja ciente: situações desagradáveis acontecem!

Não é nada pessoal, nada a ver especificamente com você; são fatos da vida! Aconteceram, acontecem e sempre acontecerão situações que fogem ao nosso controle, causadas por pessoas que não se importam muito com seus pares… É assim, mesmo, não adianta espernear nem chamar a mamãe!

Relato de uma experiência pessoal

Faço regularmente trabalhos de desenvolvimento web para uma pessoa – que também é da área – desde o início do ano, mais ou menos. A pessoa sempre pagou em dia, eu sempre entreguei os trabalhos em dia, tudo normal. Mas… Chegou o momento em que somente eu cumpri minhas obrigações.

Eu entreguei um material de qualidade (o trabalho era de desenvolvimento de temas WordPress), tudo dentro dos prazos, mas o pagamento não foi feito dentro do acordado… Pelo fato de já ter realizado diversos trabalhos com a pessoa e tudo correr bem, descuidei-me o suficiente para entregar os trabalhos antes de receber a totalidade do pagamento – coisa básica sobre “freelanceamento” quando não há contrato para regulamentar os serviços. Conclusão: trabalhei de graça…!

Conclusão sobre parcerias de trabalhos de desenvolvimento web

Não caia na mesma burrada no mesmo equívoco que eu, querido leitor! Só entregue os materiais a seu parceiro/cliente depois do pagamento total do que foi combinado! E outra: sempre que possível, faça contrato! Alguns usam o argumento de que um contrato tira a agilidade do projeto; fique atento a estes! Se a pessoa não quer fazer contrato, esteja certo de que alguma coisa tem – aprendi essas e outras lendo o Guia do Ilustrador que, apesar do nome, tem dicas para qualquer profissional freelancer.

E você, já passou por situações desagradáveis com parcerias? Gostaria de compartilhar alguma história triste? Comente!

Novo tema para o blog: dpw2009

Tárcio Zemel — Wed, 04 Mar 2009 20:27:51 +0000

Olá, pessoal! Como estão todos? Curtiram a última rodada de prêmios? ;-)

Escrevo mais este “meta artigo” para falar sobre as novidades do blog, principalmente a novidade visual, que é o novo tema para o desenvolvimento para web. Como havia comentado, este ano haverá muitas surpresas e, um tema desenvolvido especialmente para o blog, 100% exclusivo, é uma delas!

Web design

Algo que fui ver recentemente é que a versão anterior do blog ficava tenebrosa em outros navegadores que não o Firefox! É como dizem por aí: “Casa de ferreiro, espeto de pau”. Mas agora já testei na maioria dos navegadores e creio que a renderização das páginas está bastante semelhante em todos eles!

Optei por priorizar o conteúdo, que é o mais importante, mesmo. Mantive e aperfeiçoei a linha clean do site para, novamente, dar ênfase aos textos, imagens e outros elementos de informação.

O campo de busca recebeu bastante destaque e, de certa forma, eu até ousei ao passá-lo para o lado esquerdo, “desrespeitando” algumas normas de usabilidade existentes. Fiz isso para diferenciar o blog dos demais, evidenciar a “presença” do campo de pesquisa e, de certa maneira, estimular os visitantes à utilizarem – levando em conta que o blog já está bom um conteúdo considerável. Ah, e nada de botão “Enviar”, ele seria “demais” nesse caso.

Aproveitando a oportunidade, “aglomerei” os 3 tipos de feeds do blog também no mesmo espaço. Justamente em função da quantidade de conteúdos e pensando no que está por vir, certamente apresentar de forma clara como as pessoas podem subscrever ao feed é bem vindo! E, para os que tiverem dúvidas, confiram o “?” ao lado dos ícones.

Conteúdo

O espaço dedicado ao conteúdo, que é o que deve ser de mais importante no blog, foi aumentado consideravelmente. Ao invés de 510px do tema anterior, agora temos 730px! Esse aumento foi para enfatizar que os conteúdos são realmente o que importam e agora, como não poderia deixar de ser, têm seu devido espaço.

Um dos principais pedidos dos leitores foi para eu começar a fazer screencasts para disponibilizar no blog. Realmente é uma ótima pedida e eu vou acatar aos pedidos! Como não mexia com criação/edição de vídeos antes, será um tempinho até eu pegar o jeito da coisa e produzir screencasts de qualidade; de qualquer maneira, aguardem um para em breve – dicas e sugestões são bem-vindos!

Uma outra coisa muito interessante que foi pedida é para eu fazer mais tutoriais “passo-a-passo” sobre os assuntos relacionados ao desenvolvimento web. Também é algo que considero muito oportuno e, certamente, também farei isso.

Algo que retirei e que, ao final das contas, não tinha tanta utilidade assim, foram as 3 colunas no rodapé, que continham, respectivamente, “Artigos Recentes”, “Últimos Comentários” e “Mais Comentados”. Virtualmente falando, não era muito acessado e, além de tudo, com a retira o tempo de carregamento geral do site diminui, dado que algumas consultas ao banco de dados não são mais feitas.

Falando em tempo de carregamento, diversas extensões do WordPress desnecessárias foram sumariamente desativados e muitos outros excluídos da pasta de plugins. Eu tinha mais de 50 plugins (entre ativos e inativos) e isso já estava me deixando louco! Agora estou usando o estritamente necessário – embora esteja fazendo alguns testes de vez em quando. Portanto, mais rapidez e mais eficiência ao acessar o desenvolvimento para web!

Considerações últimas

Algo que me deixou bastante satisfeito foi o fato de a maioria dos visitantes utilizarem Firefox! Em relação ao Internet Explorer, a margem é ainda pequena (no momento da publicação deste artigo, 44,59% para FF e 42,93% para IE), mas só de ter ultrapassado o IEca já fico bastante feliz! Sinal de que as pessoas estão começando a perceber o que é melhor! Por falar nisso, aqueles que tentarem acessar o blog com IE6 terão uma surpresinha! ;-D

Ainda há algumas coisas para serem ajustadas no novo tema, coisas estas que só poderiam ser feitas depois que ele estivesse em atividade (inclusive, conto com a ajuda de todos para evidenciar bugs e falhas no novo tema). Infelizmente ainda estou sem internet em casa (o que me faz lembrar do bordão “Isso é um absurdo!”, dos comerciais tão divulgados nesses últimos dias pela própria prestadora de serviços que está me prejudicando), o que explica o grande hiato das minhas aparições por aqui.

Minha taxa de visitação caiu, meus feeds, idem, a credibilidade do blog, nem se fala… Mesmo com todos os contratempos, peço que tenham um pouco mais de paciência que as coisas já estão se resolvendo! Continuem ligados no desenvolvimento para web e aguardem as próximas novidades, promoções e prêmios que estão por vir!

Aproveitando o ensejo, peço novamente para que os que ainda tiverem sugestões, que as apresentem! Minha intenção é fazer o blog crescer para que aqueles que o acessam também cresçam! Se você quiser ajudar, fique à vontade e, desde já, meu “Muito obrigado“!

Quando o cliente (pensa que) sabe mais

Tárcio Zemel — Tue, 09 Dec 2008 17:56:06 +0000

Uma das coisas que sempre me intrigou em relação a clientes é o tipo que pensa saber mais que o profissional que está contratando. E isso não acontece somente no desenvolvimento para web; é caso até corriqueiro em diversas outras áreas de atuação, como design, publicidade, propaganda, e outros.

Situações causadas pelo “sabe tudo”

Um dos cenários críticos que pode acontecer é o cliente responder “de qualquer jeito” o briefing do site, achar que não ficou bom o trabalho que foi apresentado (sem explicar os motivos), alegar que tal ou qual coisa deveria mudar de lugar, a posição do elemento “x” não está boa, que as cores não combinam, etc, e ainda alterar o escopo do projeto no meio do desenvolvimento – para, no fim, reclamar que o prazo inicial não foi cumprido…

Não deve ser frequente que tudo isso aconteça de uma vez com o profissional, mas, com certeza, não raramente pelo menos um dos “itens” já fez, faz ou fará parte da vida de todo profissional de criação, em especial freelancers (ainda mais os iniciantes) que, justamente em função de sua modalidade de trabalho, muitas vezes passam como “parte fraca” da história e suas ações e juízos não são julgados com muito crédito e/ou de forma menos considerada.

Sempre que alguém levanta este assunto na blogosfera, em geral, vem as já “tradicionais” comparações com médicos, engenheiros, arquitetos, etc. Pessoalmente, acredito serem comparações muito válidas e pertinentes (por exemplo, “O Sr. diz ao médico como deve fazer a operação? Então…”), mas, sinceramente, acredito que não propiciem tanta eficácia quanto era de se esperar. Dependendo do caso, o potencial cliente pode até ficar ofendido com o “tom” com que se fala e, aí, você pode dizer “Adeus” ao job esperado…

Não digo que não sejam situações delicadas de se tratar e se passar; entretanto, há clientes que realmente passam dos limites e pensam, inclusive, saberem mais que o próprio profissinal que contrataram ou estão prestes a contratar. “Retire esta borda”, “Aumente este espaçamento”, “Faça isso”, “Faça aquilo”… São coisas desnecessárias que, no geral, comprometem o andamento e ânimo que se tem com o trabalho em questão.

Não estou afirmando que o cliente não tem a liberdade de opinar sobre o trabalho que ele mesmo está pagando para ser realizado; o que contesto é quando ele pensa, erroneamente, que tem maiores conhecimentos que os profissionais contratados. Ora, então por que ele mesmo não fez o site? Por que contratou um terceiro para fazer por ele, já que sabe tanto o que fica melhor ou pior em cada situaçao?

Possíveis soluções

Depende de cada caso, há quanto tempo a pessoa está atuante, dentre muitas outras coisas, mas, baseado na experiência que já tive e ainda tenho, os possíveis argumentos para os casos em que o cliente pensa que entende mais que a pessoa que ele contratou, no caso, pensa que sabe mais de desenvolvimento web do que o desenvolvedor, seriam:

Peça para explicar o motivo de não ter gostado de algo ou querer alguma mudança. Na maioria dos casos a pessoa não vai saber explicar… Você vai escutar um limitado “Aaa, não sei, simplesmente não gostei”, ou algo do tipo. Isso é bem favorável para você que, como bom(boa) menino(a) que é, já preparou seus argumentos antes da reunião e terá seus pontos fortes “na ponta da língua”. Assim que você apresentar os motivos racionais para cada coisa no site, provavelmente tudo estará resolvido.
Peça para sugerir a melhoria. Quando a pessoa diz que simplesmente não gostou, peça para que ele sugira a melhoria. “Então diga, por favor, o que poderia ser feito para ficar melhor”. Nesta situação, pode haver o caso de a pessoa realmente pensar que sabe do que está falando e propor coisas absurdas. Fique calmo e explique o motivo de aquilo não ser o melhor a se fazer.
Diga que ele está errado e pronto. Esta abordagem é um pouco mais “agressiva” mas, em determinadas situações, pode ser o que falta para tudo se resolver. Alguns clientes até acham bom um comportamento mais “rígido”, e sentem que a pessoa que demonstra tais atos é totalmente confiante e sabe bem do que está falando/fazendo. Mas, muito cuidado com isso! Isso é algo para se falar somente em determinados casos específicos; infelizmente não há uma “fórmula” para dizer quais situações são essas… Vai depender da experiência de cada um e do “feeling” do projeto.

Se tudo o mais falhar…

Quando todos seus – pertinentes – argumentos não funcionam, mesmo sendo bem sensato e convincente, é uma lástima… Há clientes que cismam com determinada coisa e, por mais que saibam que estão errados, “batem o pé”; a coisa se torna algo pessoal para ele.

Os profissionais, neste caso, costumam adotar medidas diferentes, bem diferentes, podendo chegar ao extremo de dispensar o cliente em função do desgaste psicológico e emocional que já passou e “prevê” que irá passar por muito tempo. Para quem já está consolidado no mercado e/ou tem uma boa carteira de clientes, penso ser esta a medida certa a se fazer. Concordo 100%!

Para os que ainda não se encontram nesta situação, também existem coisas a serem feitas. Conversando com minha colega Rúbia Gardini, fiquei sabendo de uma maneira muito eficiente e profissional de lidar com o fato: faça exatamente tudo o que o cliente quiser e simplesmente não coloque sua “assinatura”; simplesmente não informe ao mundo que foi você quem fez aquela “peça”. Caso o cliente ache isso ruim ou estranho – sim, acontece de o cliente achar isso -, simplesmente diga que, devido as alterações impostas, o site não ficou com a mesma “linha” de seu portfolio e, por tanto, você prefere não assinar.

Direto demais? Rude demais? Não! É simplesmente a verdade.

Conclusão

Veja este vídeo que vi no Digital Paper, num artigo que trata, mais ou menos, sobre o mesmo que este post, “Quando o cliente palpita demais“, que ilustra, de forma bem humorada, o que os criadores têm que passar.

Que fique bem claro que penso que o cliente deve, sim, ser ouvido em vários momentos do desenvolvimento do site. Afinal, é para o publico-alvo dele que tudo está sendo feito. Não raramente surgem boas propostas e sugestões sobre o próprio site e seu andamento e, justamente por ter ouvido o que o cliente tem a dizer, o resultado final fica melhor. Mas, convenhamos, não raramente falta respeito e bom senso…

Concorda? Discorda? Comente!

Ícones de setinhas para download (grátis)

Tárcio Zemel — Tue, 21 Oct 2008 22:50:20 +0000

Para os que ainda não sabem há, aqui no desenvolvimento para web, uma página para baixar ícones de alta definição e qualidade. Nesse artigo dos ícones de alta definição (que é atualizado constantemente), faço referência a sites que disponibilizam excelente ícones para download na web.

Para “complementar” este artigo que citei, sobre download de ícones, eu mesmo fiz alguns ícones para disponibilizar por aqui: ícones de setinhas! São ícones de setinha diversas, em várias formas, de vários jeitos, várias cores, várias direções, enfim, ícones de setinhas variadas para download grátis! São mais de 3800 ícones de setinhas para você baixar sem medo de ser processado no futuro e poder usar onde e quando quiser! As especificações são:

Formato. PNG;
Proporções. 20×20 pixels;
Uso. Irrestrito e gratuito.

Espero que seja útil para vocês e, caso alguém utilize em algum sistema online ou web site e quiser comentar, será muito bem vindo! ;-)

Baixar mais de 3800 ícones de setinhas totalmente de graça (5.44 MB)

30 extensões para Firefox que vão mudar sua vida na web (para melhor)

Tárcio Zemel — Fri, 12 Sep 2008 15:39:00 +0000

Sem sombra de dúvidas, um dos motivos que tornou o Firefox o melhor navegador do mundo é sua capacidade de aceitar extensões (ou plugins) para aprimorar suas funcionalidades e criar funcionalidades totalmente novas. E o fato de que qualquer – com conhecimento necessário – pode criar e disponibilizar sua própria extensão foi o “impulso final” para que os plugins do Firefox se tornassem queridos e populares.

Ante tamanha “oferta” de extensões para Firefox, ficar confuso e não saber qual instalar ou deixar de instalar é uma situação comum de acontecer. A compilação de plugins para Firefox a seguir – divididos em categorias, para facilitar – tem como objetivo ajudar a você se decidir e, quem sabe, conhecer algumas extensões que você nem imaginava existirem.

Extensões para Firefox: navegaçã por abas

Morning Coffee. Organize web sites para abrir em abas como parte de sua rotina diária (quais sites você visita na Terça? Visites todos somente quando for Terça).
Tab Mix Plus. Aumente as funcionalidades de abas no Firefox: duplicação de abas, controle de foco, opções para cliques, reabrir abas e janelas fechadas pora acidente, dentre outros.
ColorfulTabs. Especifique cores para as suas abas e se organize melhor para achar os diferentes web sites abertos em cada uma delas.
FaviconizeTab. Com esta extensão do Firefox você “faviconiza” suas abas: elas ficam menores e somente o favicon aparece em cada uma.
IE Tab. Bastante conhecida no “ramo”, esta extensão permite abrir uma aba com o modo de renderização do Internet Explorer (pessoalmente, prefiro abrir o próprio browser quando estou desenvolvendo).

Extensões para Firefox: segurança e anonimato

NoScript. Bloqueia a execução automática de Javascript, Java, Flash e outros tipos de formatos; é preciso declarar específica e individualmente para cada caso que se trata de um site confiável.
FoxyProxy. Percorra a web anonimamente, com diversas opções referentes a alterações de proxys para você ficar “oculto” através das páginas que visita.
Stealther. Apaga todos os seus rastros nos sites que visita, permitindo acessar a web através de um anonimato total (“Suas informações sob o mais absoluto sigilo”).
Adblock Plus. Bloqueia propagandas (“ads”) dos web sites que visita e permite navegar com mais rapidez e menos poluição visual (acredito eu que isso até melhora a produtividade pessoal).
Flashblock. Se você quer desabilitar somente os conteúdos em Flash dos web sites que visita, Flashblock é a escolha certa. Isso economiza banda e permite identificar rapidamente um conteúdo em Flash.

Extensões para Firefox: downloads e arquivos

Open IT Online. Permite abrir documentos e imagens on line, sem precisar de qualquer outro programa complementar (diversos formatos de arquivos sobre documentos, imagens, apresentações, planilhas e mais).
Video DownloadHelper. Permite baixar, de maneira fácil, diversos tipos de formatos de vídeo na web e convertê-los para os formatos “tradicionais” de vídeo.
PDF Download. Antes de abrir um arquivo .pdf no Firefox, PDF Download avisa a respeito e permite que escolha baixar o arquivo, abrir ou converter para HTML.
Download Embedded. Identifica e permite baixar diversos tipos de formatos de arquivos encontrados em web sites (mas não funciona para os vídeos embutidos por Flash, como os vídeos do YouTube, Google Videos, etc).
DownThemAll!. A proposta do DownThemAll! é aumentar as funcionalidades e performace dos downloads no Firefox, prometendo um aumento de velocidade de até 400%.

Extensões para Firefox: melhoria da experiência na web

Greasemonkey. Sinceramente, dispensa apresentações para um desenvolvedor web (para mais informações visite o Greasespot).
iMacros. Automatiza o Firefox, permitindo a criação e execução de macros para tarefas específicas (nunca ouviu falar em “macro”?).
URL Fixer. Corrige automaticamente os URLs quando você os digita errado (essa vai para os apressadinhos do teclado).
All-in-One Sidebar. Crie uma nova barra no Firefox que provê acesso às mais usadas funções de forma simples e eficiente.
FireGestures. Permite configurar ações e espeificar atalhos que são ativados através de “gestos do mouse”; é muito interessante e divertido.

Extensões para Firefox: desenvolvimento para web

Web Developer. Sem comentários, também. Se você se considera desenvolvedor web e não conhece, revise seus conceitos…
Firebug. E a observação da extensão anterior vale para esta, também: se não conhece o Firebug, pense seriamente em aprimorar seus conhecimento ou mudar de profissão.
YSlow. Esta é uma “extensão para extensão”; trata-se de uma extensão para o Firebug que incrementa as funcionalidades, inclusive evidenciando se o web site respeita as diretrizes de performance do Yahoo!.
ColorZilla. De forma simples e prática, permite selecionar qualquer cor que apareça na tela e permite passar para a área de transferência os valores em diferentes formatos (RGB, Hexadecimal, etc).
SEO for Firefox. Este plugin permite visualizar diversas estatísticas referentes ao posicionamento de determinado site nos principais – e outros – mecanismos de busca.

Extensões para Firefox: diversos

Delicious Bookmarks. Extensão oficial do delicious para Firefox, que permite controle total dos favoritos que você salva online, em ações como salvar um favorito, organizar, deletar e todas as outras possíveis.
Cooliris. Mais conhecida como “PicLens”, esta extensão cria uma galeria 3D para a exibição de imagens nos principais buscadores como Google, Yahoo!, Flickr, dentre outros.
ScribeFire Blog Editor. Permite publicar artigos em diversos tipos de blogs diretamente do Firefox. Integra um ambiente de publicação de artigos completo diretamente no navegador.
FoxyTunes. Acrescenta opções ao Firefox para escutar música enquanto navega pela web. Muito bom e permite economizar memória por não abrir um programa somente para tocar músicas.
FEBE. E, com tantas extensões assim, não poderia faltar a “meta-extensão”, que permite fazer backup de todos plugins e preferência do Firefox e restaurar posteriormente. Excelente!

Usabilidade na página de categorias + dicas sobre títulos de artigos de blogs: dobradinha de guest-posts

Tárcio Zemel — Fri, 22 Aug 2008 14:25:39 +0000

Esta semana tive o privilégio de receber 2 convites para guest-posts, de 2 blogs diferentes: o Professinoal Blogger e o Fique Rico. Dois dos blogs que eu assino o feed e considero excelentes! Senti-me feliz com os convites! :-D

Para o Professional Blogger escrevi um artigo no qual falo um pouco sobre a importância dos títulos dos artigos. Muita gente pensa que é somente escrever “qualquer coisa” para “funcionar” e, quando não recebe visitas oriundas dos mecanismos de buca, social medias, e afins, e ainda fica reclamando que as coisas que faz não funcionam. Há, também, os que tem títulos horríveis, mas que participam de empresas mantenedores de blogs que se ajudam entre si, mas isto é assunto para outro artigo…

Tem blog conhecido por aí que tem título “Promoção” e “Como assim?”… É bem esclarecedor para quem faz uma pesquisa e para os mecanismos de busca, não é? E é justamente disso que falo no artigo sobre títulos de posts, explicando pontos importantes sobre a questão dos títulos de artigos e expondo algumas dicas que considero bem importantes para se escrever posts que realmente digam sobre o que trata o assunto.

No Fique Rico foi um artigo sobre como melhorar a usabilidade da página de categorias de blogs Wordpress. Já há algum tempo o Paulo Faustino havia me pedido a lhe ensinar como fazer a página de categorias no mesmo “esquema” aqui do desenvolvimento para web; aproveitando o ensejo, escrevi um artigo explicando para as outras pessoas aprenderem, também, e aprimorar a usabilidade de seus blogs, em geral.

Como disse, fiquei muito contente ao escrever estes 2 guest-posts por considerar ambos os blogs, Professional Blogger, do “truta” Diego Soares, e o Fique Rico, do “portuga” Paulo Faustino, muito bons – fora a estima pessoal que tenho por estas duas figurassas que, diariamente, me aturam nos instant messengers da vida! ;-)

Acessem, aí:

Muito obrigado pelo convite, pessoal!

Caraterísticas de um bom problogger

Tárcio Zemel — Fri, 15 Aug 2008 13:48:48 +0000

Aproveitando o convite que recebi do Paulo Faustino, participei de outro guest-post em seu blog. Depois do artigo sobre Networking e das dicas para levar seu blog ao sucesso, agora foi a vez de escrever um pouco sobre características de um ProBlogger de sucesso.

No artigo, comento sobre características comportamentais que um blogueiro deve ter para alcançar o sucesso que, aliadas à lealdade e persevenrança, dão ensejo a se conseguir com que seu blog seja referência em seu nicho de atuação.

Acredito que o artigo ficou com um tamanho bom: um pouco mais curto que os anteriores, mas não tão curto ao ponto de parecer somente um “checklist a ser cumprido”. Muitas outras características para um blogueiro se tornar um problogger poderiam ter sido citadas, mas penso que aquelas que está no artigo constituem a base de muitas outras.

Por isso, quando visitar o artigo sobre características de um problogger de sucesso, não espere encontrar “milhares” de dicas; mas as que lá estão são informações sobre alguns caracteres essenciais que um blogueiro profissional deve ter a fim de se destacar em seu meio e alcançar o almejado sucesso!

Contribuam com os comentários e ajudem com a discussão que já se formou por lá! Aproveite e deixe sua dica, também! ;-)

Ler o artigo sobre características de um ProBlogger de sucesso

Web sites genéricos e a ilusão dos preços baixos

Tárcio Zemel — Fri, 08 Aug 2008 13:13:58 +0000

Quando se adentra no ramo de desenvolvimento para web e já se está nele a relativo tempo, é comum encontrar pela internet mensagens muito atrativas e “irresistíveis” de pessoas que vendem sites a preços baixíssimos, pessoas que fazem site barato, mesmo, com o simples e único motivo de vender!

Você, que já leu e/ou recebe frequentemente este tipo de mensagem em sua caixa de e-mail ou outro meio, fique atento aos perigos existentes em se comprar e se ter um site barato. Ao fim das contas, quase sempre o barato sai caro!

Analogia dos sites

Quando se recebe um anúncio deste tipo, onde a pessoa lhe oferece um site – ou conjunto de sites – muito barato, é para você ficar atento, muito atento!

Pense como se o site fosse um produto tangível, qualquer, como uma cadeira, por exemplo. Você recebe em sua casa uma propaganda de mesas a “X” dinheiros. É uma coisa inacreditável, fabulosa, já que o mínimo que se consegue encontrar em lojas de móveis da cidade é um preço de “10 X” (dez vezes o valor ofertado). Nesta situação, você não iria estranhar a propaganda que acabara de receber com um preço ínfimo, tão abaixo do preço encontrado na maioria das lojas?

O mesmo acontece no desenvolvimento para web; a diferença é que, geralmente, as pessoas desconhecer os preços cobrados na área… Talvez pelo fato de virem centenas de sites e saberem da existência de milhões, não vislumbrem ao certo o quão complexo é fazer um web site de qualidade, voltado unica e exclusivamente aos objetivos de quem o encomendou.

O fato de os web sites serem intangíveis também contribui para que as pessoas tenham uma noção errada quanto ao trabalho dispensado para sua feitura. Na cadeira a pessoa pode sentar, aconchegar-se, mudá-la de posição, suspendê-la, enfim, pode manuseá-la, já que é coisa tangível; no caso dos web sites, não.

A ilusão dos preços baixos

A mesma desconfiança que quem recebe em sua casa o panfleto com a oferta da cadeira de preço dez vezes inferior à média, você também deve ter quando se depara com anúncios que prometem sites espetaculares, com recursos dos mais modernos e automação completa a “preço de banana”.

Geralmente quem faz este tipo de oferta – que, provavelmente, é a mesma pessoa que faz o site ou sites – está “escondendo algo” e/ou deixa apresenta um serviço que deixa a desejar… Se não, vejamos:

Custo de formação profissional. O investimento pessoal para a formação de um desenvolvedor web medíocre (quer dizer, na média) vai mais além de cursos do tipo “Seja um webdesigner em 40 horas” (sic). Este tipo de curso apresenta, no máximo, as funções mais comuns das ferramentas Adobe, e olhe lá! Pergunte para qualquer um que já fez um curso destes sobre Gestalt, e veja a resposta… E eu nem cheguei nos cursos de formação superior, pós-graduações, etc, que custam milhares de reais para serem feitos!
Tempo de desenvolvimento. Desenvolver um web site de qualidade, até mesmo os pequenos, não é tarefa que se faça do dia para a noite. É preciso de tempo para fazer um bom briefing de web site, definir prazos, adaptar o desenvolvimento às necessidades do projeto, enfim, em alguns casos, antes mesmo de se sentar ao computador para começar o desenvolvimento são necessárioas várias semanas de planejamento!
Adequação ao projeto. Parecido com o Direito, em desenvolvimento web “cada caso é um caso”. Cada cliente e cada projeto tem suas próprias peculiaridades; cada um tem necessidades e expectativas diferenciadas e espera de forma diferente por um resultado único.

Então, pergunto: A pessoa que dedicou anos de sua vida e uma quantia considerável de dinheiro vai fazer um projeto a preços ultra-baixos, não valorizando seu investimento e sua formação? Alguém que, por ter uma boa formação na área e saber sobre prazos e métodos de desenvolvimento, vai mentir dizendo que tem um site para pronta-entrega ou que desenvolve um em 7 dias? Aquele que se preocupa com a qualidade de seus serviços e o resultado que seus clientes obtêm ao contratá-los apresenta soluções prontas e genéricas ao ser requisitado?

Respondendo somente a estas questões – poderia ser bem mais – é possível perceber qual é a ilusão dos preços baixos!

Você e/ou o seu negócio merece uma solução genérica?

Será que é realmente vantajoso para você e/ou sua adotar (comprar) uma solução genérica para expor sua imagem ou divulgar seus próprios serviços? E o que dizer ou pensar quando, depois de adquirir um site desses, ao navegar pela web você se depara com 2 ou 3 designs idênticos a de seu web site?

É certo que aquele que promete um site ou conjunto de sites a preços muito baixos e com “pronta entrega” vai lhe apresentar um set de projetos que foram desenvolvidos única e exclusivamente para entrar na “linha de produção”, quer dizer, formam feitos web sites genéricos para diversos tipos de negócios – notícias, imóveis, jornalismo, cobertura de festas, etc -, a fim de, depois de concluídos – com a “qualidade” já mencionada – serem vendidos para qualquer um, de preferência muitos, a qualquer preço que for.

Volto a perguntar: você e/ou sua empresa merece uma solução genérica para um caso específico?

Contra fatos não há argumentos

Conheço, pessoalmente e pelo meio virtual, diversos casos de pessoas que optaram por adotar uma destas soluções genéricas, comprando conjuntos de sites diversos por menos de R$500,00, pensando que estavam fazendo a maior vantagem (para não perder o mote das olimpíadas: pensavam fazer um negócio da China)! Num desses pacotes de sites vinha até “manual de instruções” (!) ensinando como configurar um banco de dados no servidor…

Qual não foi a surpresa destes infelizes ao constatar que sua solução online não era única, que muitíssimas outras pessoas haviam comprado a “solução”, também; que seu design era genérico e, consequentemente, seu negócio também era visto e tomado como tal…

Pode parecer muito bom comprar web sites de alta tecnologia, a preços baixíssimos, receber o “produto” no mesmo instante e ainda escutar que é tudo garantido! Entretanto, contra fatos não há argumento; e o fato é que você não estará fazendo ou tendo nenhuma vantagem! Tudo o que vai conseguir é jogar no lixo algumas centenas de dinheiros, ficar frustrado, com raiva e depois querer investir em realmente um bom profissional para desenvolver uma solução especificamente voltada à você e/ou ao seu negócio.

Quando isso acontecer, não venha com a desculpa de que não estava sabendo…

Como montar um portfolio sem ter clientes

Tárcio Zemel — Mon, 28 Jul 2008 14:56:10 +0000

Um profissional, de qualquer área de atuação que for, precisa ter um bom portfolio para apresentar a seus potenciais clientes e, também, aos atuais clientes que o queiram ver por algo motivo. Montar um portfolio é tarefa que, depois de iniciada, não termina jamais, pois a tendência é continuar desenvolvendo projetos e incrementando a “carteira de jobs” que se tem.

Há alguns dias, quando escrevi o artigo sobre fechamento de contratos e designs para web, surgiu a dúvida do leitor Nu sobre a situação de ainda não se ter um portfolio para mostragem dos trabalhos e pinta a indicação de um trabalho. Realmente é uma situação delicada e, pensando melhor sobre o assunto, resolvi escrever este artigo.

Sobre “portfolio”

Para começar, comunico que sou de acordo com o que escreveu Luiz Gonçalves, em seu artigo “Portfolio, portifólio e portfólio… qual a grafia correta?“, onde explica que, no caso de brasileiros, o mais conveniente é optar pelo uso da grafia “portfolio“, em detrimento a “portifólio” e “portfólio“.

Penso que um dos primeiros passos para fazer as coisas corretamente é estabelecer quais as terminologias você vai usar e, acompanhando opiniões sérias e estudos feitos sobre os assuntos de sua área de atuação, escolher as que julga pertinentes. É o caso para “portfolio”.

Algumas considerações sobre portfolio

Ter um portfolio serve, primariamente, para mostrar a clientes o que você já fez e como anda sua evolução de sua qualidade de trabalho – comparando trabalhos passados com projetos mais recentes -; o portfólio tem o objetivo de mostrar a qualidade de seu trabalho e se você se adapta às tendências de sua área de atuação.

Através de seu portfolio os clientes poderão avaliar seu trabalho, como é seu estilo, se você é capaz de “se adaptar”, se sabe contextualizar seus trabalhos às necessidades de cada cliente. O portfólio serve para mostrar do que você é capaz.

Como começar um portfolio

Ter um portfolio é de extrema importância para começar a conquistar novos clientes. Afinal, como bem disse Wellington Carrion, em seu artigo “Portfólio, inimigo ou aliado?“,

É complicado avaliar um profissional que não possui um portfólio. Como você avalia um professor de web que não possui sites de sua autoria? Será que um cliente aceitaria fazer um site com alguém que não tem o que mostrar? Você contrataria um pedreiro para trabalhar em sua casa sem referências? (sic)

Concordo plenamente com os dizeres mas, antes de discutir sobre estas questões, o importante é ter trabalhos prontos; é ter conteúdo de qualidade para se colocar no portfolio!

Essa é uma questão complicada porque, erroneamente, você pode pensar que acontece um “looping infinito”: não se consegue um cliente porque não se tem um portfolio; mas não se tem um portfolio porque não se consegue um cliente… Saiba de uma coisa, colega: as coisas não são bem assim. ;-)

Se você não tem algo, crie! Sempre foi assim com as invenções do mundo e vai continuar sendo! Sempre que alguém queria alguma coisa e essa “coisa” não existia, esse “alguém” a criava – e é assim até hoje. O mesmo se aplica para o caso dos portfolios: se você não tem um portfolio, crie um!

Algumas sugestões para se criar um portfolio, mesmo sem ter “clientes oficiais”:

Faça hot sites de eventos/acontecimentos da escola/faculdade onde estuda, festas de família, ocasiões com os amigos, etc. Fazer um hot site para eventos deste tipo é ótima atividade, que todos vão gostar e que serve de treino para os trabalhos profissionais;
Faça sites para pequenos negócios de amigos, parentes e conhecidos. Fazer um site para a padaria do seu tio-avô ou algumas páginas para a vendinha de seu primo é uma boa maneira de acrescentar alguns trabalhos ao portfolio. Pode parecer um tanto anti-ético não cobrar nada pelo serviço; mas estas dicas são para aqueles que ainda não são profissionais do ramo e, por isso, na verdade não têm um “código de ética” a seguir (na verdade, nem existe um código de ética formal para desenvolvedores web…);
Sites de fã-clubes que você faça parte. A Daniele Viana, em seu artigo “Portfolio – Técnicas, dicas e exemplos de criação“, faz esta bela sugestão de criar sites de fã-clubes dos quais você ou um amigo faça parte. Além de contar mais um job pra você, com certeza todos os envolvidos vão se divertir muito no desenvolvimento;
Web sites de casamentos, noivados, etc. Casamentos, noivados e bodas de seus familiares podem ser ótimas oportunidades para você fazer mais trabalhos. Dê o site como presente para os “pombinhos” que eles vão adorar!
Desenvolva sites para ONGs e instituições de caridade. Este é um “clássico” entre os desenvolvedores, de fazer web sites para ONGs, instituições de caridade, entidades filantrópicas e afins. Além de você desenvolver ainda mais suas habilidades de web developer / web designer, conta mais um job em seu portfolio e você ainda o desenvolvimento de uma causa nobre (teoricamente).

Considerações finais sobre ter um portfolio sem ter clientes

As sugestões sobre como iniciar um portfolio sem ter “clientes oficiais” não se limitam a isso; na verdade, a limitação é de sua mente ilimitada! Entendeu? ;-)

Começar a fazer trabalhos para terceiros não é tão difícil como parece; o mais importante é se manter atualizado em seu ramo de atuação e evoluir suas técnicas de desenvolvimento para tornar-se uma referência no que faz, seja em sua cidade, no seu país ou no mundo!

Depois de ter alguns projetos no portfolio – o número exato é uma questão controvertida, mas, pessoalmente, acredito que algo em torno de 10 sites está de bom tamanho – é hora de buscar os clientes “de verdade”, rumo à iniciação de sua carreira profissional no desenvolvimento web.

Então, quando fizer os (hot) sites para seus amigos, colegas, parentes, etc, divirta-se no processo, mas leve a sério! Afinal, são estes os primeiros trabalhos que você terá em seu portfolio e, tenha certeza, os clientes os levarão a sério no momento de decidir uma contratação, ou não. Faça o melhor que puder!

Como disse, as sugestões apresentadas sobre como iniciar um portfolio não se encerram naquela lista; você tem alguma sugestão de como iniciar trabalhos no desenvolvimento web para montar um portfolio?

Briefing para desenvolvimento de web sites: considerações, dicas e modelos

Tárcio Zemel — Mon, 23 Jun 2008 15:32:09 +0000

Um dos pilares do sucesso de um bom web site é fazer um bom briefing com o cliente. Um briefing bem feito e executado pode determinar se um site será bom ou ruim – baseado nas necessidades e expectativas de projeto que o cliente tem.

Para os iniciantes em desenvolvimento web, e mesmo para quem já atua na área a certo tempo, uma “pedra no sapato” muito comum é a falta de um bom briefing – ou modelo de briefing – e de uma boa entrevista com aquele que vai encomendar o web site (potencialmente falando). Não é incomum o fato de um cliente não gostar do resultado final de um projeto web em função de um briefing mal feito ou desfalcado, que não recebeu a devida atenção de quem o fez e não foi feito e estudado com bastante cuidado.

Neste artigo, falo um pouco sobre como fazer um bom briefing com o cliente e apresento uma proposta de briefing que, a meu ver, serve perfeitamente como base para qualquer pessoa fazer o seu próprio briefing de desenvolvimento de web sites, conforme suas preferências, necessidades e gosto pessoal.

O que é “Briefing”?

A definição de “briefing“, segundo o Novo Dicionário Eletrônico Aurélio versão 5.0:

1. Conjunto de informações básicas, instruções, diretrizes, etc., elaborado para a execução de um determinado trabalho, ou missão militar, etc.

2. Reunião onde se definem essas instruções, diretrizes, etc.

A Wikipédia, por sua vez, define briefing da seguinte maneira:

O briefing é um conjunto de informações passadas em uma reunião para o desenvolvimento de um trabalho, sendo muito utilizadas em administração e na publicidade.

O briefing é uma peça fundamental para a elaboração de uma proposta de pesquisa de mercado. É um elemento chave para o planejamento de todas as etapas da pesquisa de acordo com as necessidades do cliente.

Um amigo meu definiu briefing como “uma palavra ‘fresca’ para umas perguntinhas que se faz ao cliente sobre o que ele quer no site”. :-D

Basicamente, é mais ou menos isso, mesmo: o briefing é um conjunto de perguntas e/ou atividades que servem para determinar como se dará o projeto, elaboração e execução de determinada coisa – no caso, a “coisa” é um web site.

Como fazer um bom briefing?

Quando procuramos na internet sobre briefing e quais as melhores maneiras de se fazer um, encontramos diversas opiniões, modos de pensar, pareceres, dicas e até modelos prontos de briefing para web sites. Assim como acontece com muitas coisas que procuramos na internet (em especial na web), fica difícil “tomar um rumo” e escolher tal ou qual maneira ou resultado para seguir, em face à imensidão de resultados e possibilidades que nos são apresentadas.

Pessoalmente, creio que o melhor é filtrar alguns resultados/modelos que pareçam de melhor qualidade e confiabilidade – usando sempre o bom senso e discernimento pessoal para esta decisão – e, depois de uma filtragem inicial, pegar “o que sobrou” e, a partir disso, elaborar o próprio briefing, baseado nas escolhas pessoais e modo de trabalho.

O briefing deve ser feito na primeira reunião com o cliente, preferencialmente em um encontro pessoal. A vantagem de se encontrar pessoalmente com a pessoa que irá contratar seus serviços é poder “sentir” melhor o que a pessoa está realmente precisando e/ou buscando, além de você poder auxiliar e explicar melhor para o cliente o teor e objetivo de cada pergunta.

Encontrando-se cara-a-cara com a pessoa, é mais fácil de mostrar quem você realmente é e uma excelente forma de seu cliente e você estreitarem ainda mais os laços profissionais que, se tudo correr bem, irá uní-los.

Entretando, pode ser que fique complicado de se encontrar pessoalmente com o potencial comprador do web site. Para sanar essa questão, algumas medidas podem funcionar:

Briefings por e-mail. Esta abordagem seria a mais simples e “tradicional” quando o assunto é web. Enviar as perguntas do briefing por e-mail e receber as respostas também por e-mail é algo fácil, relativamente fácil e, até certo pronto, eficiente;
Conversa por mensageiros instantâneos. Os instant messengers são usados pela maioria das pessoas que trabalham com web – ou que acessam a rede mundial várias horas por dia. Fazer um briefing com o cliente através de um instant messenger é mais demorado, mas dá um toque mais pessoal a todo o processo;
Vídeo conferência. Realizar uma vídeo-conferência é bem próximo de se encontrar pessoalmente com o cliente. Para quem vai fazer um briefing com pessoas de outros estados ou países, este deve ser o meio de escolha adequado;
Sistema web de briefings. Para desenvolvedores web é bastante simples montar um sistema online para realização de briefing. Um exemplo seria definir um esquema de IDs para os clientes e programar um formulário com as perguntas separadamente, para cada um; as respostas seriam armazenadas em um banco de dados e/ou num arquivo, como um XML, por exemplo;
“Misturar” diversos técnicas. Dependendo do caso, pode ser eficiente “misturar” diversas destas técnicas de feitura de briefing. Por exemplo, pode-se enviar um e-mail com as perguntas e, em uma vídeo-conferência, fazer um acompanhamento com o cliente para auxiliá-lo a responde-las. Outro: elaborar um sistema online para a pessoa responder às perguntas do briefing e enviar as respostas para seu e-mail. Recorra à sua criatividade e certamente bons resultados serão encontrados.

Estratégias para fazer um briefing eficiente

Pessoalmente, sigo a metodologia de que são necessários, no mínimo, 2 encontros com o cliente com, conseqüentemente, 2 briefings:

“Briefing Preliminar”. Define-se, sem muito detalhamento, quais as necessidades do cliente, baseando-se em seu público-alvo, os objetivos que quer alcançar com o site, breves informações sobre sua concorrência, dentre outros. Este é o “briefing base”.
“Briefing Completo” ou “Briefing Detalhado”. Este, sim, é o briefing que trará maior nível de detalhamentos sobre o projeto, necessidades e especificações do site, estratégias de divulgação, informações sobre design e mais.

Briefing Preliminar

O primeiro briefing a ser feito serve para você ter um primeiro contato com as necessidades e ideias que do cliente. O interessante, nesta fase inicial, é conversar bastante com o cliente e tentar captar, ao máximo, o que está “oculto”. Sim, existem necessidades ocultas em todo projeto que, por motivos diversos, o cliente não pode ou não quer falar.

É papel de quem realiza o briefing “extrair” do cliente coisas que nem ele mesmo sabe que quer e/o precisa e, em função disso, trazer uma qualidade maior para o projeto e possível resultado final deste. Fazer um briefing de qualidade demanda prática!

As perguntas para este primeiro encontro podem ser de caráter mais geral, mas com o objetivo de um mínimo de informações sobre as características do projeto, tais como:

Público-alvo;
Objetivos do web site;
“Imagem” que o cliente quer passar para os visitantes;
Análise da concorrência.

Outras coisas mais podem ser abordadas; entretanto, estes são elementos básicos que devem figurar no primeiro briefing. É muito importante sair do encontro com pelo menos estas informações.

Muita gente, quando vai fazer este primeiro briefing, prefere levar papel e caneta; isso dá um toque pessoal à reunião e contato com o cliente. Pode parecer bobagem, mas o simples ato de mostrar sua caligrafia transmite pessoalidade e mostra que você não se importa de “perder tempo” escrevendo informações sobre o projeto ao invés de digitar tudo.

Em alguns casos, especialmente os que a pessoa que responderá às perguntas é muito ocupada ou terá que sair em breve para um compromisso, pode ser conveniente levar um notebook. Mas, como disse, este primeiro briefing é rápido e serve para obter as informações mais básicas sobre o site que deve ser desenvolvido.

Briefing Completo ou Briefing Detalhado

Como dito, este é o briefing que será feito posteriormente ao briefing preliminar e que serve para detalhar tudo o que foi aprendido por você sobre o negócio, produto ou empresa de seu potencial futuro cliente. As perguntas que formam esta segunda parte da “entrevista” feita com seu cliente lhe darão informações mais profundas, confiáveis e com qualidade superior.

Em função de, nesta fase, o número de perguntas ser maior e a necessidade de as respostas para estas perguntas também precisarem ser mais minuciosas, é importante que se disponha de mais tempo para a realização deste briefing. Para tanto, evite agendar o encontro em “horários de pico” da pessoa e, previamente, avise que o encontro de vocês precisa ser mais prolongado que da última vez.

Seja transparente e tenha em mente que “o combinado não sai caro”. Se você for honesto com aquele que responderá a essa segunda fase de perguntas e deixar claro, desde o início, que vocês precisarão de tempo maior para este segundo encontro, certamente a pessoa ficará satisfeita com sua sinceridade e feliz por poder fornecer mais informações que, conseqüentemente, farão com que o resultado final de seu web site seja melhor.

O briefing completo pode ser dividido em seções, para facilitar o entendimento da pessoa que responde às perguntas e evitar uma eventual fadiga por parte de quem o faz. Por exemplo, as perguntas deste briefing pode ser divididas da seguinte maneira:

Estratégia;
Informações gerais;
Público-alvo;
Conteúdo;
Aparência (design);
Outras informações.

Colocar cerca de 3 a 6 perguntas em cada uma das seções já deve bastar para colher as informações necessárias.

Considerações finais

Fazer um briefing de qualidade, que realmente “extraia” do cliente todas as informações que você precisa para elaborar um projeto que seja bom, é realmente uma questão de prática. Mesmo alguns daqueles que trabalham no ramo de desenvolvimento para web há anos consideram que ainda não sabem fazer um briefing que consiga, plenamente, fornecer o que é preciso para se fazer o site.

Portanto, não desanime caso fique um pouco nervoso e inquieto ou não consiga ser natural e espontâneo nos primeiros briefings que fizer. A prática e consequentes anos de experiência o levarão a um patamar que você irá gostar, esteja certo! ;-)

No fim do artigo há um arquivo comprimido com algum material de apoio para lhe ajudar:

“Briefing Preliminar” (em formatos .odt e .doc). Este é um modelo de Briefing Preliminar em uma folha mais apresentável, para causar uma boa impressão no cliente no momento da reunião;
“Briefing Completo” (formato .txt). Uma proposta para o Briefing Completo. Este deixei em formato texto puro, somente com as perguntas, para que você exercite sua capacidade criativa e faça sua própria apresentação melhorada. Tenho certeza de que ficará ótimo!

Espero que este material seja de valia para que você possa conhecer alguns dos principais aspectos de um briefing para sites e espero, sinceramente, que consiga realizar seus próprios briefings com cada vez mais qualidade e confiança em si mesmo.

Tem alguma sugestão sobre como montar um bom briefing e/ou quer complementar algo que tenha sido abordado neste artigo? Compartilhe!

Modelos para briefing de web site

Desenvolvimento para web 2.0

Tárcio Zemel — Fri, 20 Jun 2008 20:40:27 +0000

Olá, leitores do desenvolvimento para web! Há quanto tempo! :-D

Como prometi, aí está a nova versão do blog, o desenvolvimento para web 2.0, com novo design, novas funcionalidades, novas formas de interação e outras coisas mais!

“Olha, um logotipo!”

Uma das mais importantes e visíveis novidades é o logotipo do desenvolvimento para web. Como comentei no post que escrevi antes de o blog entrar em manutenção, criaria um logotipo para iniciar uma mais bem elaborada estratégia de divulgação da marca.

Demorei alguns dias para chegar a este resultado que vocês estão vendo; experimentei diversas possibilidades, fiz muitos testes, usando diferentes técnicas. Creio que o resultado final ficou muito bom, atendeu perfeitamente às necessidades do blog e encaixou “como uma luva” com o novo visual!

Escolhi uma fonte mais séria, mas nem tanto; ela é “sóbria”, mas apresenta uma certa descontração, também. A cor é um azul (muito ligeiramente puxado para o verde), que transmite credibilidade e confiança, além de ser “a cor da tecnologia”. Fora isso, pessoalmente nunca vi ninguém que não goste do azul! O cinza, apesar de não apreciado por alguns, trouxe seriedade, sobriedade e maturidade para o conjunto – além de ser uma cor neutra e combinar com elementos diversos em várias situações / composições.

Os 3 bustos – que representam 3 pessoas diferentes – representam que este é um espaço onde a diversidade é respeitada e, inclusive, levada em consideração! Diferentes tipos de pessoas têm diferentes tipos de idéias e diferentes formas de pensar e encontrar soluções para os problemas do dia-a-dia, e é justamente isso que procuro para o desenvolvimento para web: um espaço onde os diferentes tipos de pessoas possam conviver e aprender umas com as outras!

Isso remete ao slogan escolhido. Aqui as pessoas são muito mais importantes que as máquinas, quer dizer, os mecanismos de busca e demais bots ficam em segundo plano e a tentativa de ter um contato mais estreito e mais eficiente com os leitores aumenta! Tenho esperanças, também, de a relação entre vocês, leitores, aumentar, e a troca de idéias entre todos seja maior e melhor, através de comentários e sugestões.

Um novo tema, com um design mais bonito e mais leve

Quem conhecer o blog a partir de agora não vai perceber, mas os leitores assíduos e visitantes esporádicos de antes facilmente notaram: o design está muito melhor! Parei de usar o tema k2 e agora uso o Freshy2 – que foi uma feliz indicação do companheiro Diego, do Professional Blogger.

Seguindo a tendência atual de design para web, o uso de cores mais “leves”, em tons mais suaves e joviais (contrabalanceamento com o logotipo) está presente. Elementos visuais leves e modernos são usados, visando uma melhor experiência e tentanto agradar ainda mais a ilustre visita dos que leem o desenvolvimento para web.Você, que está lendo este artigo através de seu agregador de feeds, dê um pulinho aqui para ver o que mudou! ;-)

Outra coisa muito importante foi uma maior preocupação com a leveza e velocidade de carregamento do blog.

Segundo 2 ferramentas muito boas de análises de blogs e web sites:

SEO Analyzer: Em uma escala de 0 a 100, o desenvolvimento para web ficou com 75 pontos. A observação dele foi quanto ao uso de elementos HTML obsoletos – no caso, é o Sociable que usa “target=_blank”;
Web Page Speed Report: No geral, até que foi bom, mas o relatório recomendou atenção à quantidade de requisições HTTP e tamanho das imagens, folhas de estilo e scripts, em geral (o que pretendo melhorar aos poucos).

A melhora de performance ficou, basicamente, por conta da retirada de scripts inúteis e/ou desnecessários e ajustes mais finos, feitos diretamente nos arquivos do tema. Apesar disso, conforme os relatórios apresentados isso deve melhorar ainda mais. Mãos à obra!

Por falar em leveza, dei uma melhoradinha no Divmaníaco e nas Ferramentas de Classes PHP 5, também. E outras ferramentas estão chegando!

“Pessoas primeiro”, mas não me esqueci dos mecanismos de busca

Fiz um retrabalho em relação à otimização para os mecanismos de busca, também. Apliquei algumas técnicas de SEO que queria, alterei partes essenciais nos arquivos do tema, visando uma melhor otimização e, a partir de agora, pretendo investir em parcerias e propagandas em outros blogs e web sites.

E isso não adiantaria em nada sem um bom conteúdo! Tenho intenções de fazer artigos mais explicativos e elaborados. Pretendo dar uma ênfase maior em dicas, artigos, macetes e tutoriais para quem inicia sua aventura no empolgando mundo do desenvolvimento para web, também. Muitos são os que iniciam, mas pouco os que levam sua vontade adiante. Espero, com esta nova abordagem, estimular os novatos a continuar “no caminho”!

Devido a pedidos, vou começar a abordar a parte mais técnica do desenvolvimento web, fazendo artigos e tutoriais com dicas e explicações sobre as diversas linguagens presentes a fim de desenvolver a web, com pormenores de métodos e técnicas da área.

Sejam bem vindos novamente!

Então, pessoal, espero que tenham gostado das mudanças e melhorias que fiz! Estas semanas fora do ar, que serviram para a melhoria do blog, certamente foram feitas principalmente pensando em quem visita o blog e com o objetivo de ajudar as pessoas (e também ser ajudado) a resolver os problemas e questões que, quem é da área, sabe muito bem que podem surgir a qualquer momento.

Um blog, na verdade, é um projeto que exige cuidados e atenção contínuos e, penso, nunca para de crescer e se modificar. Portanto, com absoluta certeza outras mudanças estão por vir – embora eu não saiba exatamente quando. Ainda faltam alguns pequenos ajustes; ajustes estes que serão feitos ao longo da nova fase do blog, sem tolhir por mais tempo vocês, leitores, de terem acesso aos conteúdos.

Conto com a ajuda de todos para fazer o desenvolvimento para web um espaço em comum muito melhor!

Sejam bem vindos novamente!

Entrevista com Robert Cailliau, co-criador da web

Tárcio Zemel — Sat, 03 May 2008 12:39:24 +0000

Recebi por e-mail uma entrevista feita com Robert Cailliau, co-criador da web (juntamente com Tim Berners-Lee). Sinceramente não sei quem fez a entrevista, sua data nem onde foi publicada; se alguém souber e quiser me contar para eu colocar aquii, ficarei muito agradecido!

Nesta entrevista Robert Cailliau, um dos criadores da web, fala do começo da rede mundial, sobre a liberdade dos softwares, as transparências para se preservar as liberdades individuais e a fome capitalista das grandes empresas de telecomunicações e softwares.

Entrevista com Robert Cailliau

A História ainda deve reservar ao belga Robert Cailliau e a seu companheiro de pesquisas, o inglês Tim Berners-Lee, um espaço no rol dos grandes inventores da humanidade. Há 17 anos, ambos desenvolveram uma ferramenta de comunicação, de início destinada só à pesquisa, cuja sigla fala por si: World Wide Web (www), a rede mundial de computadores. Mas, ao contrário do que se pode imaginar, Cailliau, engenheiro, 60 anos, não é um homem rico, não preside uma grande multinacional da informática, nem é um entusiasta da tecnologia.

Caillau é quase um cético, alguém que revela decepções sobre sua cria. Avesso à fama, o engenheiro hoje está radicado no norte da França, em uma região rural. Não tem nome na lista telefônica, não tem telefone celular e, ironia, nem mesmo atualiza seu site. Nesta entrevista, o pesquisador revela amargor ao falar sobre o uso excessivamente comercial da rede mundial. Seus elogios são guardados para os blogs e para a Wikipedia, construções coletivas de informação. Entre os alvos de suas críticas também estão a Microsoft, o MySpace e o Second Life, empresas ou produtos que chama de “opacos” e que lhe provocam temor, seja por
concentrarem em excesso informações da vida privada de seus usuários, seja por desviarem o foco da realidade. A seguir, os principais trechos da entrevista.

O senhor declarou recentemente estar decepcionado quanto à evolução da web. Por quê?

Há muitos aspectos sobre os quais eu estou contente: a Wikipedia, os blogs, os círculos de pessoas que têm coisas raras a compartilhar. Na verdade não há muito além de alguns aspectos sobre os quais eu estou decepcionado: a velocidade da compreensão de que a rede mundial é uma construção coletiva. Empresários, políticos e freqüentemente jornalistas não compreendem isso. Nós poderíamos avançar mais rápido se tivéssemos colaborado mais em vez de promover a competição em um tema no qual a competição é muitas vezes nefasta.

Olhando retrospectivamente, como o senhor avalia sua invenção?

A web é resultado de anos de trabalho e da coragem de muitas pessoas, todos egressos de universidades e institutos de pesquisa. Os empresários freqüentemente a entenderam mal, tomaram decisões erradas. Tomemos como exemplo a bolha das empresas “.com”. A lição que tiro é que há fosso entre o comportamento racional e humanista e o comportamento inspirado pelo desejo de fazer muito dinheiro sem trabalhar muito. Mas, por outro lado, a web é uma ferramenta que não se deixa manipular demais: a democracia parece estar imbricada na rede mundial. É isto que, aliás, irrita os espertos que querem se apropriar dela e também os ditadores e os chefes de regimes opressivos.

O senhor tinha a consciência, quando da invenção, da revolução aberta pela rede mundial?

Para a comunidade acadêmica, sim. Para a comunidade em geral, não. Eu me surpreendo a cada dia com as utilidades engenhosas de toda ordem que as pessoas fazem da web.

Na sua opinião, a rede mundial causou uma revolução social?

Muitos sociólogos e economistas acreditam que ela concretiza a global village anunciada por Marshall McLuhan. Há uma forte evolução, mas não conseguimos realizar sempre todas as idéias que temos no início de nossos projetos. No que concerne à global village, seria preciso perguntar ao próprio McLuhan o que ele pensaria hoje. Mas ele já está morto. De toda forma, é verdade que graças à rede mundial as organizações mundiais formadas por poucas pessoas puderam se constituir, se agrupar como se estivessem na mesma cidade.

O senhor já declarou ter subestimado o impacto comercial da web. Por quê?

Não era uma de nossas prioridades. Nós queríamos fornecer uma ferramenta útil e de qualidade aos pesquisadores. Foi a web que arrebatou a atenção do comércio e das empresas de telecomunicação sobre a internet, que naquela época, em 1993, já tinha 25 anos. Foi surpreendente ver como elas quiseram se apossar quando houve a menor suspeita de que talvez fosse possível fazer dinheiro fácil.

O senhor vislumbrou a nova economia em 1990?

Eu não sei nem mesmo o que “nova economia” quer dizer. Quando eu penso que os agricultores ao redor da minha cidade mal conseguem ganhar suas vidas e que nós, consumidores de alimentos, insistimos em pagar preços ridículos, acredito que haja outras coisas a discutir que a autoproclamada “nova economia”. Não há nada de verdadeiro nessa “nova economia”. O que é verdade são as alterações no clima, a superpopulação do planeta, o extremismo ideológico-religioso. Há uma enormidade de megabytes que voam para todo lado, mas que não são comunicação. Tudo não passa de uma fuga da comunicação real. É perigoso. Por essa razão eu não tenho telefone celular e eu não freqüento sites de comunidades virtuais.

Então o senhor não considera durável esse modelo de desenvolvimento, com empresas de alto valor nas bolsas e com poucos funcionários.

Na era digital, não há lugar para uma só empresa em cada setor. Está nas equações diferenciais, e há muito tempo isso está provado por economistas e matemáticos. Para mim, esse tipo de negócio, que mexe com
informação, deveria ser muito transparente. Quem produz softwares deveria mantê-los abertos e publicamente verificáveis.

A rede mundial fomentou a pirataria na internet. O que o senhor pensa disso? A web é, afinal, uma boa ou uma má criação para a economia?

A idéia da propriedade intelectual sempre me incomodou um pouco. De um lado, é certo que alguém que trabalha duro para criar um produto artístico como um romance, um filme ou uma música deve, claro, poder se alimentar e viver. Logo, ele precisa de rendimentos provenientes dessa criação. Mas essa é a razão pela qual eu luto em favor da possibilidade dos micropagamentos, que permitiriam uma remuneração direta do artista pelo consumidor. Só que isso eliminaria os intermediários, que não gostam dessa ferramenta. O problema é que, quanto mais o preço de um produto é alto, mais temos um efeito duplamente perverso: pouca gente compra e muita gente pirateia. O capitalismo, como o comunismo e outros ismos, são da era anterior à digital. Nós deveríamos entrar em um período de colaboração. É preciso aplicar todos os conhecimentos que a ciência já nos deu. Ele já está aí, é preciso dominá-lo antes que seja tarde demais. E
isso não se fará com propostas dogmáticas de esquerda nem de direita.

A web pode ser uma ferramenta formidável nesse objetivo de preservar a vida sobre o planeta.

Em lugar disso, o senhor não acha que recebe excesso de propaganda, propostas de crimes virtuais e pornografia na sua caixa postal?

Pois é… Mas nada disso é importante diante do que devemos fazer.

Como conter esses problemas? O senhor defende algum tipo de regulamentação para a rede mundial?

Sim, mas por parte da comunidade mundial. É preciso que façamos uma convenção mundial sobre o tema. Existem divergências demais entre grandes blocos econômicos, políticos, religiosos, doutrinas ultrapassadas, logo estamos diante de um mau começo. De toda forma, eu não tenho medo dos Estados, que podem ajudar criando normas e preservando a privacidade das pessoas e a transparência das empresas. Eu tenho medo é das multinacionais opacas e avarentas. Observe o que tem feito o MySpace com os milhares de usuários que aparecem em seus registros (Caillau se refere à concentração de informação individual e à invasão de privacidade). Com que direito? Leia os “Termos de serviço” dessas empresas. Leia o -que diz o contrato do Hotmail. O Estado, antes de mais nada, somos nós. É nessas empresas que não há democracia.

Jovens fazem fortuna ao criarem sites como Google, YouTube, Facebook e outros derivados da invenção da rede mundial. O que o senhor pensa disso?

Bom para eles. E eles têm trabalhado duro para vencer. É um outro trabalho, feito com outros talentos. Eu lhes desejo boa sorte. Desde que suas ações sejam transparentes.

Qual é, no seu ponto de vista, o futuro da web e da internet?

É impossível prever. Pessoalmente, eu acredito que o futuro pertence mais a uma inteligência artificial do que à humana. Nesse meio tempo, nós faremos tudo e nada ao mesmo tempo. Mas não esqueçamos que, até outra ordem, será preciso comer enquanto estamos diante de nossas telas.

Logo, precisamos de alguma maneira preservar o planeta.

Como tirar screenshot de um web site inteiro e obter uma imagem completa

Tárcio Zemel — Thu, 13 Mar 2008 14:22:34 +0000

Para aqueles que precisam ter a imagem de um web site inteiro, existem algumas possibilidades de se fazer isso. Aprenda como ter a imagem de um site por completo.

Quando é preciso tirar um screenshot de um site inteiro, mesmo das partes que estrapolam a “dobra superior” (parte visíveil antes de se rolar o barra de rolagem), às vezes pode ser chato… Existem diversas maneiras de se fazer isso:

Fazer várias screenshots de diferentes partes e depois juntar tudo em um programa de editoração de imagens;
Utilizar um daqueles monitores que giram e ficam mais altos que largos (dependendo do tamanho do site, não funciona);
Utilizar os serviços do site Super Screenshot;
Usar o plugin para Firefox Screengrab!

Fazer várias screenshots de diferentes partes e depois juntar tudo em um programa de editoração de imagens

Essa é a maneira mais demorada e chata. Deve-se tirar uma screenshot da página “acima da dobra”, abrir seu programa de editoração de imagens preferido e colar a imagem. Depois, rolar a tela até o limite inferior da última, tirar outra foto e colar novamente no programa de editoração de imagens; e assim por diante, até chegar ao fim da página ou ao ponto que se deseja capturar.

Posteriormente, cria-se um novo documento com a largura do site e, para altura, coloca-se um valor bem alto, exagerado, mesmo. Então, pega a primeira screenshot para copiar e colar neste novo documento; pega-se a segunda, e coloca-se logo abaixo da primeira, e assim vai, até completar.

Bem “sacal”, hã…?

Utilizar um daqueles monitores que giram e ficam mais altos que largos

Estes monitores, apesar de nada baratos, costumam ser excelentes! A maioria é widescreen (bom para um filminho!) e tem uma definiçao muito boa. Quando se tem a oportunidade de se ter e/ou usar uma dessas belezas, basta girar a tela para que ela “fique maior” no sentido vertical, configurar a resolução para tal, entrar no site que se quer e tirar uma foto dele.

Agora, dependendo do site que se entre (especialmente blogs), até mesmo este monitor não conseguirá captar toda a extensão. Portanto, este ainda não é o melhor método.

Utilizar os serviços do site Super Screenshot

O site Super Screenshot oferece o serviço de tirar uma foto completa de web sites (gratuitamente). Entretanto, algumas vezes acontecem coisas estranhas com a imagem gerada, com elementos fora do lugar e outras coisas. Veja-se o exemplo no artigo sobre o princípio Gestalt de alinhamento aplicado ao web design.

Essa foi quase, mas usar o Super Screenshot ainda não é a melhor opção.

Usar o plugin para Firefox Screengrab!

Recentemente descobri esta extensão para Firefox, a Screengrab!, que serve justamente para tirar uma screenshot completa de sites!

Depois que você o instala e reinicia o Firefox para seu ativamento acontecer, um ícone indicativo aparece na barra de status, à direita. Quando se clica nele, aparecem 2 menus principais, “Save…” e “Copy…”, onde é possível escolher se se quer salvar a imagem diretamente ou copiar para a área de transferência para uso posterior.

Em cada um dos menus, as mesmas subopções:

“Complete Page/Frame…”: Serve para tirar uma screenshot de todo o web site (ou frame…);
“Visible Portion…”: Para capturar somente a parte visível, qualquer que seja;
“Selection“: que permite selecionar em tempo real um trecho qualquer da tela para gerar uma imagem.

Conclusão

Enfim, pessoal, segundo o que eu pude pensar (pelo menos por agora), a maneira mais fácil, econômica, rápida e prática para se obter uma imagem de um web site completo é, sem sombra de dúvidas, utilizar a extensão do Firefox Screengrab! Com ela, é possível capturar porções de web sites ou toda sua extensão, de forma automática, salvando o arquivo diretamente (.png) ou copiando para a área de transferência para uso posterior.

O leitor Richardson (Vix) indicou que no navegador Maxthon tem o recurso nativo de tirar screenshots: captura a tela inteira, uma região, uma aba ou todas, além de outras opções. Para quem usa este browser, a facilidade para tirar fotos de sites completos é ainda maior, já que não é preciso instalar extensões.

Cicero Cavalcante comentou sobre o programa WebShot, que também serve para tirar screenshot completo de um site.

Amaral citou o serviço WebShotsPro.com.

Se alguém souber mais algum jeito para ter uma screenshot completo de um web site, comente, por favor!

Desenvolvedor web

Tárcio Zemel — Wed, 05 Mar 2008 20:10:18 +0000

O desenvolvimento para web é mais do que usar editores WYSIWYG, exportar layouts (pegos em sites de templates) em tabelas e mendigar um pagamento por um serviço incompleto e/ou sem qualidade. Vai mais além do que fazer cursos de 2 meses de “design” (onde se aprende a mexer com a suíte Adobe) ou comprar um diploma num curso tecnólogo onde os professores sabem menos que os alunos.

Ser um desenvolvedor web exige estudos sérios, compromissados, disciplinados, constantes e incessantes. Exige atualizar-se (quase que diariamente) e saber, ou, pelo menos, indicar, a resolução de novos e conhecidos problemas, de forma “tradicional” ou totalmente criativa e inovadora!

Diplomas? Certificados? Certificações? Um “branco gelo” na parede da sala às vezes fica mais bonito… Sem sombra de dúvidas que todos estes são indicativos de que aquele que os têm tende a ter conhecimentos. Mas não passam disso: indicativos. A certeza, esta só com a prática (e teoria, também, por que não?), com a mostra de conhecimento aplicados, com uma bagagem de soluções que realmente ajudaram aqueles que estavam precisando, é que se mostrar.

Desenvolver a web, embora não pareça para muitos, é atividade (com “subatividades”) que exige esforços, neurônios e tempo (fora algumas dores nas costas…). Exige, assim como qualquer outra atividade séria, dedicação e paixão! Quem é apaixonado pelo desenvolvimento para web, certamente é bom! Se não agora, com certeza dentro em breve. Afinal, as paixões compromissadas tendem a melhorar e evoluir!

“Desenvolver”, “criar”, “aprimorar”, “evoluir”, “crescer”… Estas e mais outras tantas palavras precisam ser constantes na vida de quem desenvolve a web! A web se desenvolve, porque as pessoas que a compõe se desenvolvem. É assim e sempre será.

Não há nenhum motivo em especial para eu ter escrito estas palavras. Somente o desejo que tenho (sempre tive e sempre terei) de que meus colegas e eu continuemos… em desenvolvimento!

Abraços para todos!

Guia do Ilustrador

Tárcio Zemel — Wed, 10 Oct 2007 17:19:38 +0000

[...] depois de muita conversa entre centenas de ilustradores, surgiu a idéia e a necessidade de um guia, algo que servisse para orientar os iniciantes, dar mais embasamento para os que já estão há algum tempo no mercado e estabelecer uma relação mais homogênea entre todos os profissionais da ilustração.

O Guia dos Ilustradores não tem a intenção de servir de regra ou lei – nem esgotar o assunto – é apenas um guia, onde cada um tem a liberdade de trabalhar como quiser, mas agora consciente do que pode ou não ser adequado para si mesmo e para a profissão. [...]

Estas são algumas das palavras que recepcionam os visitantes do web site do Guia do Ilustrador.

Quem é atuante/interessado na áreas de design, web design, ilustração, artes gráficas em geral e – por que não? – quaisquer áreas em que o profissional seja considerado “autônomo”, deve baixar o guia.

Trata-se de uma publicação grátis, elaborada por profissionais importantes da área, que tiveram, ao elaborar o Guia do Ilustrador, a intenção de ajudar iniciantes e até os profissionais mais experientes a entender melhor sua profissão e sobreviver no mercado.

Só para se ter uma idéia, são abordados assuntos como preparação e apresentação de um bom portfólio, comportamento em uma entrevista de trabalho/emprego, estratégias de negociação com clientes, dentre muitos, muitos outros. Inclusive, um dos que eu acho mais interessante e útil é o de “dicas” jurídicas!

Segue um trecho de um diálogo fictício que consta no Guia do Ilustrador, na parte que trata sobre a negociação com clientes:

Cliente:
- Oi, eu queria um logo pra empresa que estou abrindo. Ouví dizer que sai por uns duzentinhos. Quanto você cobraria?

Designer:
- Depende. Para o que o senhor quer o logo?

Cliente:
- Ora essa, para usar nas coisas da minha empresa.

Designer:
- Coisas…?

Cliente:
- Cartões, notas, catálogos, website, uniformes, fachada, etc.

Designer:
- Entendo, mas para quê o senhor quer por um logo em tudo isso?

Cliente (já estressado):
- Ora, para todo mundo reconhecer minha empresa, para as pessoas verem esse logo e imediatamente saberem que é minha empresa, tipo a Nike ou a Coca-Cola.

Designer.:
- Ué, mas o nome não é o suficiente? O senhor precisa gastar mais para ter um desenhinho no cartão e na fachada?

Cliente (possesso):
- Caramba, mas que diabo de designer é você? É lógico que precisa ter uma marca, um logo, uma imagem, que todo mundo vai lembrar e que vai me ajudar a vender mais. Que vou poder pôr apenas isso em um monte de lugares e vai ser o suficiente para se fazer um marketing viral e vou economizar muita grana em anúncio e propaganda. Que todo mundo vai olhar e lembrar dos meus produtos.

Designer:
- Então o senhor sabe muito bem o valor do que quer e do que está pedindo. Sabe que um logo bem feito não é só um desenhinho e que vai agregar valor a sua empresa e consequentemente aumento de vendas e faturamento. O senhor está adquirindo um produto tão importante quanto as suas máquinas e seus funcionários pois vai ser a cara, a identidade visual do seu negócio. O valor é R$ 5.000,00.

Visitar o site do Guia do Ilustrador

desenvolvimento para web » miscelânea

8 maneiras de melhorar a performance de um site

Inspecione suas páginas para encontrar os culpados

Salve as imagens no formato correto

Minimize seu CSS e javascript

Combine arquivos CSS e javascript para fazer menos requisições HTTP

Use sprites CSS

Use compressão server side para diminuir o tamanho dos arquivos

Evite CSS e javascript incorporado e inline

Utilize serviços terceirizados para seus componentes e recursos

Artigos Relacionados

dpw2010: novo tema do desenvolvimento para web

Web design, estrutura e usabilidade

Página Inicial

Páginas de Artigos

Página de Categorias e Busca

Barra de ferramentas

Análise de performance e desempenho

Resultado da promoção dpw2010

Considerações finais

Artigos Relacionados

Ferramentas gratuitas para testes de segurança em sites

Netsparker Community Edition

Websecurify

Wapiti

N-Stalker

skipfish

Scrawlr

Watcher

x5s

Exploit-Me

Acunetix

Artigos Relacionados

Promoção dpw2010: anuncie grátis no desenvolvimento para web

Regras da promoção

Artigos Relacionados

Perguntas ao cliente para antes e depois de um projeto

Perguntas ao clientes antes do projeto

Qual é o tipo de negócio da sua empresa?

Qual é a reputação de sua empresa?

Qual é seu cliente típico?

Qual é o seu público-alvo?

Você tem concorrentes? Como se diferencia deles?

Com que frequência você gostaria de atualizações?

O que é necessário para que considere o projeto finalizado?

Quais formas de pagamento você usa?

Perguntas ao cliente depois do projeto

Você está satisfeito com os resultados?

Gostou da minha postura profissional durante o projeto?

Alguma outra dúvida?

Não existem outras perguntas que se deve fazer ao cliente?

Artigos Relacionados

Como otimizar imagens para web – guia de otimização de imagens

Retirar o excesso de espaço em branco

Não redimensionar imagens pelo browser

Escolher o formato de imagem certo

JPG

GIF

PNG 8

PNG 24

Usar “Save for Web & Devices” ao invés de “Save as…” no Photoshop

Usar poucas cores para imagens indexadas e experimentar a paleta “Selective”

Converter PNG para Grayscale se você não precisa de cores

Experimentar PNG24 ao invés de PNG8

Usar “Posterization” para reduzir o número de cores em PNG

Evitar salvar em JPG Progressivo (Progressive JPEG)

Reduzir o “ruído” (noise) para diminuir o tamanho da imagem

Embaçar o fundo

Embaçar a imagem quando for Salvar para Web

Otimizar imagens com ferramentas especiais

Smush.it

punypng

PNG Monster

SuperPNG

SuperGIF

jStrip

Artigos Relacionados

Jetpack: explorando novas maneiras de ampliar e personalizar a web

Jetpack e a nova geração de plugins

Exemplo de funcionamento do Jetpack