desenvolvimento para web » Miscelânea

Desenvolvedores front end e o mercado

Tárcio Zemel — Wed, 18 Apr 2012 12:30:43 +0000

Recentemente, tive a oportunidade de conhecer o DevCast e assistir a algumas das conferências já realizadas. Hoje, gostaria de chamar a atenção para uma, em especial, que trata sobre os desenvolvedores front-end e seu papel e atuação (e limitações) no mercado de trabalho.

A conferência contou com a participação do Diego Eis, do Tableless, que, para quem já é atuante na área, meio que dispensa apresentações e, para o pessoal novo, provavelmente vocês ainda lerão e verão material web do Diego rodando por aí. Ele é um dos pioneiros brasucas de desenvolvimento web e, além da parte técnica, tem também um embasamento teórico bastante interessante, como ele, próprio, comenta na apresentação.

Sem mais delongas, assistam à conferência “Desenvolvedores de Front-end e Mercado“. Vale a pena. Mesmo!

Opiniões divergentes

O Diego, devido a suas credenciais, é uma pessoa que considero bastante. Entretanto, isso não impede de eu discordar de algumas coisas que ele comentou, como, por exemplo, sobre responsive web design, que, definitivamente, não considero como uma “moda”, e sim como um novo padrão/necessidade de desenvolvimento que está surgindo e será tão comum/necessário dentro de pouco tempo quanto hoje o é o próprio HTML!

De jeito nenhum somente sites que tem a “clientela” usando 2 ou 3 dispositivos específicos se beneficia disso. Aqui no desenvolvimento para web, mesmo, que possui acesso bem inferior aos 90k/mês do Tableless, que ele citou, tem acesso em mais de 50 resoluções diferentes (sendo quase 40 com largura inferior a 640px)! E olha que é um site mais específico, imagina um que possui centenas de milhares ou milhões, voltado ao “público, em geral”…

Discordei, também, sobre as considerações feitas sobre o LESS (que, por sinal, receberá um artigo aqui, no blog, brevemente). É evidente que projetos menores não se beneficiam tanto quanto os maiores ao usar LESS, mas, certamente, ele ajuda, e muito, na hora de organizar, manusear e lidar, de maneira em geral, com o CSS.

Sim, é possível fazer tudo sem usá-lo, assim como é possível programar um site inteiro num editor de texto puro… Possível, é, mas existem soluções mais desejáveis, que melhoram a produtividade? Neste caso, acredito que sim, e o LESS faz justamente isso! O fato de ser preciso compilar o CSS é um passo necessário para desfrutas de todas suas boas características, mas, pessoalmente, não vejo como algo ruim ou tão prejudicial, assim, que deva ser critério de decisão para a ferramenta não ser usada.

Considerações finais

No mais, certamente esta foi uma conferência muito boa, que vai ao encontro do objetivo proposto pelo Diego de conscientizar mais os desenvolvedores web frontend quanto a sua área de atuação, o que esperar da profissão e como contribuir para sua mudança para melhor! O cara é um dos grandes do ramo, já trabalho para empresas realmente grandes e, devido a sua experiência, é preciso, no mínimo, prestar atenção e refletir sobre o que ele disse.

Também espero que a profissão melhore o quanto antes, que o nível de maturidade dos profissionais também evolua e que a valorização – em todos os sentidos da palavra – aconteça antes mesmo do que se espera, e que tenhamos a consciência de que, realmente, “a revolução começa na trincheira”, que são os próprios desenvolvedores os responsáveis pelo atual estado e status em que nos encontramos e que, para que isso mude, primeiramente temos, cada um de nós, que mudar!

Bom trabalho, pessoal do DevCast, e nos vemos por aí! ;-)

dpw2012: novo tema do desenvolvimento para web

Tárcio Zemel — Tue, 27 Mar 2012 00:10:04 +0000

Este é um “meta artigo” para os leitores e visitantes saberem sobre o novo tema do desenvolvimento para web, o dpw2012! Vou comentar um pouco sobre este novo tema e as novidades que vêm por aí! Continue lendo… ;-)

Motivações para um novo tema, o dpw2012

Bem, pessoal, as motivações que me levaram a criar este novo tema acho que são as mesmas de qualquer um que trabalho no desenvolvimento web – e goste do que faz, obviamente: aprendizado, inovações, testes de novas técnicas, etc. Com isso em mente, há alguns meses atrás cheguei à conclusão de que o tema anterior estava “meio antiguinho” (leia-se: defasado), tanto em relação à aparência, quanto nas tecnologias usadas… Por isso, cá estamos nós, com este novíssimo tema, com muitas novidades!

dpw2012: tecnologias

Vamos a alguns pormenores das tecnologias envolvidas e como eu consegui desenvolver este tema usando algumas das tecnologias de desenvolvimento web mais recentes que podemos encontrar, hoje em dia.

HTML5 e HTML5 Boilerplate

Já algum tempo, mesmo antes de ter a ideia de desenvolver este tema, já havia começado a estudar sobre HTML5. Li bastantes artigos e alguns livros a respeito e, como não estamos falando de uma tecnologia pronta, continuo os estudos e fico de olho nas novidades – inclusive, podem esperar artigos sobre HTML5, claro!

No meio da história, tive a felicidade de conhecer o HTML5 Boilerplate! O HTML5BP é simples uma das melhores coisas que surgiu para desenvolvimento web nos últimos tempos: trata-se de um “modelo HTML5″ para se começar a desenvolver rapidamente; mas não é somente isso.

Ele conta com muito mais coisas além de um excelente modelo de HTML5: javascripts, folhas de estilo, um .htaccess robusto demais e muitas, muitas coisas. Para terem uma ideia, aprendi mais sobre desenvolvimento web em 1 semana estudando o HTML5BP que em muitos meses passados… Vale a pena!

Twitter Bootstrap

O Twitter Bootstrap já está bem conhecido entre os desenvolvedores estadunidenses e europeus, mas, confesso, ainda não vi tantos sites em território nacional que se valham desse fabuloso e estupendo toolkit para desenvolvimento web. O Twitter Boostrap conta com um CSS incrível (com LESS), que garante um sistema de grid bem facinho de se mexer, além de elemento de UI muito eficientes e javascripts para fazer tudo isso ficar ainda melhor!

Imagine, você, encontrar prontos, funcionais e testados por desenvolvedores web de primeira linha elementos de navegação, botões, tabs e pills, menus drop down e muitos outros componentes de UI, que são cross-browser e ainda contam com javascript próprio! Bem, isso é Twitter Bootstrap…!

Há alguns dias atrás, também conheci um “complemento” ao Bootstrap que me foi bastante útil. A grande maioria dos ícones que vocês estão vendo no site, na verdade não são ícones: é uma fonte! O projeto Font Awesome foi criado visando aprimorar o Twitter Bootstrap, tornando possível substituir o uso de imagens por uma fonte. Ele usa todos os ícones padrão do Bootstrap e ainda estendeu com mais alguns! Realmente, “awesome”!

Design Responsivo

Oh, yeah! Somos responsivos, baby! ;-)

Também antes de começar a desenvolver este tema, já estava estaudando sobre design responsivo. Quando comecei a colocar a mão na massa, já tinha certeza de que queria que assim o fosse – afinal, este é um novo padrão de desenvolvimento web, não uma “tendência”, como querem forçar alguns! Havia algumas possibilidades para isso: escrever tudo do zero; usar algo que ajudaria, com estilo parcialmente pronto; pegar um tema pronto para WordPress.

Como podem ver, fiquei com o meio termo. Desenvolver tudo do zero, acredito não haver necessidade e, pegar tudo pronto, acaba com toda a graça, não é verdade? Portanto, fiquei com Twitter Bootstrap responsivo + HTML5 Boilerplate fantástico! Uma boa combinação, eu diria.

Microdata API + schema.org

Também é algo que só vi em 1 site brasuca conceituado, até então, e o dpw2012 também faz uso: Microdata API + Schemas. Grosso modo, são nomes padronizados de classes e atributos HTML que dão maior significado ao conteúdo apresentado em web sites. Os principais buscadores reconhecem este padrão, embora (teoricamente) ainda não estejam usando como fatores de classificação. De qualquer maneira, está, aí, o site preparado para quando isso acontecer – se é que já não está acontecendo “na surdina”.

Para os que não acompanham o twitter do desenvolvimento para web, a possível eficiência da Microdata API juntamente com os padrões do schema.org está ainda mais perto de ser confirmada.

Para sanar a dúvida do combo HTML5 + Schema: semana passada estava em 10º para "desenvolvimento web"; hoje, em 2º! o/

2 de April de 2012 5:35 pm via HootSuite ReplyRetweetFavorite

@desenvolvweb

desenvolvweb

Estou usando, basicamente, os schemas de Blog, BlogPosting, mas ainda vou explorar mais schemas para incluir. Apesar de eu não garantir a eficiência disso, #FicaADica para o estudo e implementação, já que é bem divertido!

Novo logo

Pra quem segue @desenvolvweb, deve ter notado (ou não) o seguinte tweet, cerca de 1 mês atrás:

E esse é o novo logo do blog! http://t.co/PfIIuJV8 // Fora a qualidade do upload, o que acharam? ;-D

24 de February de 2012 7:57 pm via HootSuite ReplyRetweetFavorite

@desenvolvweb

desenvolvweb

Quer dizer, o logo já estava pronto e sendo “maturado” no twitter e, agora que o lançamento do tema aconteceu, me pareceu apropriado usá-lo oficialmente. Mais uma vez, obrigado a Alanna Couto! ;-)

Considerações finais

Pra mim, o blog teve um ganho incrível com a implementação desse novo tema: com um toque mais clean, agora os conteúdos estão melhor apresentados, o leitor vai direto ao ponto e, com o design responsivo, tudo ficou muito mais acessível e agradável!

O fato de estar usando menos imagens e ter limado bastante de javascript desde a última versão, também contribui para a leveza do carregamento e, apesar de eu já estar usando cache nas páginas, performance do site é sempre uma boa coisa!

Meu “Obrigado!” a todos os que deram seus pitacos construtivos para que o tema ficasse melhor do que eu esperava, contando o pessoal do grupo html5-css3-brasil, tanto os que apareceram publicamente, quanto os que entraram em contato em particular.

E, se possível, gostaria de contar a sua ajuda, também! Caso encontre algum bug e/ou tenha sugestões a fazer, por favor, comente neste artigo ou envie uma mensagem. O desenvolvimento para web é um espaço de testes e, por aqui, nada está acabado ou é feito de maneira que não possa se alterar.

Muito obrigado, leitores assíduos, leitores do feed e até mesmo os visitantes casuais! Espero continuar contando com vocês! ;-)

Estratégia de Conteúdo ou Content Strategy

Tárcio Zemel — Mon, 16 Jan 2012 12:00:36 +0000

A maioria já compreendeu que desenvolvimento web é o ramo / campo de atuação mais dinâmico que existe atualmente. Todos os dias novos conteúdos, técnicas e abordagens sobre seus diversos segmentos são descobertos, divulgados, testados e aprovados, começando novamente num ciclo de constante aprimoramento.

E essa dinamicidade não diz respeito a somente conteúdos sobre o que já existe; também é sobre novas ramificações do conhecimento web que surgem. É o caso da Estratégia de Conteúdo.

Este artigo é baseado no post Content Strategy do Google Knol.

Visão Geral

Estratégia de Conteúdo ou Content Strategy é uma área de atuação emergente dentro do mundo do desenvolvimento web – considerada por alguns especialistas como uma parte do Design de Experiência do Usuário (User Experience Design ou UXD), mas isso não é unânime.

A Estratégia de Conteúdo também descreve os papéis, produtos de trabalho, abordagens, conhecimentos, técnicas, metodologias e perspectivas do profissional da área, o estrategista de conteúdo.

Conteúdo

Conteúdo é substância. Não importa a plataforma, publicação ou formato, o conteúdo se refere a tudo o que transmite um significado:

“Conteúdo inclui texto, gráficos, vídeo e áudio que compõem uma experiência interativa.” – Kristina Halvorson
“Tecnicamente, o conteúdo da Web pode ser qualquer coisa que aparece em um site, incluindo palavras, imagens, vídeo, sons, arquivos para download (PDF), botões, ícones e logos.” – Richard Sheffield
“Informação e experiências que pode proporcionar valor para um end-user/audiencia em contextos específicos.” – Wikipedia
“Tudo é conteúdo.” – Rachel Lovinger citando Chris Sizemore
“Simplesmente, o conteúdo são dados contextualizados.”

Estratégia de Conteúdo

Estratégia de Conteúdo é um campo emergente de prática que engloba todos os aspectos de conteúdo, incluindo a sua concepção, desenvolvimento, análise, apresentação, medição, avaliação, produção, gestão e governança.

Kristina Halvorson, autora de Content Strategy for the Web, define Estratégia de Conteúdo como “a prática de planejamento para criação de conteúdo, entrega e governança”.

Rahel Anne Bailie estendeu a definição de Estratégia de Conteúdo como “um processo repetitivo ou metodologia que gerencia conteúdo dentro de seu ciclo de vida inteiro”. Esta definição reconhece que ciclos de vida iterativos conteúdo vão além da entrega e, não necessariamente, começam com a criação de conteúdo.

No livro The Web Content Strategists Bible, Richard Sheffield dá ênfase à importância do processo editorial da Estratégia de Conteúdo.

Ciclo de Vida do Conteúdo, segundo Erin Scime (clique para aumentar)

Estratégia de Conteúdo: metodologias

Como é que se aplica este pensamento ou “se faz” Estratégia de Conteúdo? Rahel Bailie partilha a sua metodologia:

O Ciclo de Vida do Conteúdo é um sistema de repetição que rege a gestão de conteúdo. Os processos dentro de um Ciclo de Vida do Conteúdo são “agnósticos”. Os processos são estabelecidos como parte de uma Estratégia de Conteúdo e implementados durante o Ciclo de Vida do Conteúdo.

O Ciclo de Vida do Conteúdo abrange quatro fases macro: Análise Estratégica, Coleta de Conteúdo, Gestão do Conteúdo e Publicação (que inclui a publicação e a pós-publicação). O Ciclo está em vigor se o conteúdo é controlado por um CMS ou não, se ele é traduzido ou não, se ele é excluído no final de sua vida ou revisado e re-utilizado. O quadrante de análise compreende a Content Strategy; os outros 3 quadrantes são mais de natureza tática, com foco na implementação da Estratégia de Conteúdo.

Ciclo de Vida do Conteúdo segundo Rahel Bailie (clique para ampliar)

Análise

Na fase de Análise, o Ciclo de Vida do Conteúdo diz respeito aos aspectos estratégicos do conteúdo. Um estrategista de conteúdo (ou Analista de Negócios ou Arquiteto da Informação ou Escritor) examina a necessidade de vários tipos de conteúdo dentro do contexto do negócio e dos consumidores de conteúdo para várias saídas em múltiplas plataformas.

A Análise tem uma influência sobre a forma como a Estratégia de Conteúdo é implementada em outros quadrantes do Ciclo de Vida do Conteúdo. Em um novo projeto com novos conteúdos, este é o início do processo. Na maior parte do tempo, o processo vai começar em algum outro lugar no ciclo; depende muito de uma multiplicidade de fatores envolvidos na mudança de conteúdo de um estado atual para um estado futuro.

Coleta

A Coleta pode se dar através do desenvolvimento de conteúdo – criação de conteúdo ou edição de conteúdo de terceiros -, conteúdos de outras fontes, incorporação de conteúdo ou um híbrido de integração de conteúdo e convergência – por exemplo, mashups.

Gestão

O quadrante da Gestão concerne ao uso eficiente e eficaz do conteúdo. Em organizações que usam a tecnologia para automatizar o gerenciamento de conteúdo, o aspecto da gestão assume o uso de um CMS. Em organizações com pequenas quantidades de conteúdo, com pouca necessidade de controle de fluxo de trabalho, um gerenciamento manual é até possível. No entanto, em grandes empresas, há muito conteúdo e há muitas variações da produção de conteúdo, portanto um CMS se faz obrigatório.

O potencial de configuração de conteúdo é enorme e se baseia nas informações recolhidas durante a fases de Análise e Coleta. As soluções serão muito contextualizadas e giram em torno das entradas e saídas, as variáveis conteúdo exigido, a complexidade do pipeline de publicação e as tecnologias em jogo. As perguntas mais básicas giram em torno da adoção de padrões e tecnologias e determinação de componentes, granularidade de conteúdo e o quão longe o pipeline de publicação irá implementar técnicas específicas.

Publicação

O quadrante da Publicação trata dos aspectos de conteúdo que acontecem quando o conteúdo é entregue para a plataforma de output. Publicar o conteúdo é apenas um ponto na iteração do Ciclo de Vida; existem considerações na pós-publicação, tais como reutilização e políticas de retenção que requerem atenção.

Estrategistas de Conteúdo

Mas as perspectivas estrategistas de conteúdo dependem bastante da formação, educação e influência do profissional.

Por exemplo, alguns se especializam em Análise de Conteúdo, que é mais sobre trabalhar com metadados, taxonomia, SEO e as maneiras em que a boa aplicação desses conceitos dá suporte ao conteúdo.

Outros preferem rumar para estratégias de Web Editorial, diretrizes e ferramentas que pode se estender a gestão da mudança organizacional. Esta forma de Estratégia de Conteúdo pode estar preocupada com o desenvolvimento de novas formas de conteúdos, tais como multimídia ou várias tecnologias de “gestão de presença”, como microblogs.

Há, também, outra corrente que simpatiza mais com os objetivos da Arquitetura da Informação. Neste caso, a Estratégia de Conteúdo envolve a escrita do Copy do site para as páginas do site novo e adaptar o conteúdo para as já existentes.

Todos os estrategistas de conteúdo estão familiarizados com uma grande variedade de aplicações e ferramentas e, muitas vezes, são responsáveis pela implementação e treinamento de pessoas para melhor usá-las.

Colaboração com Estrategista de Conteúdo, por Richard Ingram (clique para ampliar)

Educação e Formação Profissional

Estrategistas de conteúdo surgem de uma variedade de disciplinas acadêmicas formais e profissionais:

Biblioteconomia e Ciência da Informação
Ciência da Computação
Artes Cênicas
Publicidade e Marketing
Retórica e Composição
Redação Técnica e Comunicação
Jornalismo
Comunicações
Consultoria de Gestão

Empregadores proeminentes de estrategistas de conteúdo

Apesar de ser uma profissão relativamente nova, mega-empresas de renome internacional já contrataram ou estão contratando estrategistas de conteúdo. Alguns exemplos:

Estratégia de Conteúdo: Produtos de Trabalho (ou Entregas)

Os Produtos de Trabalho (ou Entregas) típicos de Estratégia de Conteúdo são diversos e dependem das necessidades da empresa e do know-how do estrategista de conteúdo. Shelly Bowen diz:

Alguns estrategistas de conteúdo também são (no fundo) escritores, editores, designers ou arquitetos de informação. Esse background influencia não apenas a estratégia, mas, também, as Entregas.

A mesma Shelly Bowen também indica esta lista Estregas como guia:

O que se quer alcançar?

Resumo dos objetivos da empresa

O que se tem?

Inventário de Conteúdo ou Auditoria
Avaliação de Conteúdo (qualidade e quantidade)

O que está faltando?

Análise de lacunas de conteúdo
Análise comparativa de conteúdo
Análise competitiva

Como apresentar as palavras?

Personas
Cenários (pense em histórias verossímeis)
Estratégia Editorial
Estratégia de mensagens
Conteúdo de amostra
Modelos de conteúdo
Estratégia de SEO
Estratégia de marca
Estratégia de metadados
Guia de estilo
Glossário

Aonde se quer chegar?

Estratégia de canais
Estratégia de conversão/migração de conteúdo
Esquema do Fluxo de Conteúdo
Comunidade e Estratégia Social
Recomendações de visual
Wireframes

Como fazer acontecer?

Workflow da aprovação de conteúdo
Planos de comunicação
Políticas de moderação comunitárias
Oficinas e workshops de produção de conteúdo
Revisão de fornecedores de conteúdo e planos (pessoas, ferramentas, orçamento, tempo)

Como se manter organizado?

Requisitos de CMS
Regras de Negócio
Taxonomias
Responsabilidades
Horários

Como saber se se está correto?

Requisitos de CMS
Testes de usabilidade
Benchmarks
Resumo dos objetivos da empresa
Métricas de sucesso

O que vem a seguir?

Calendário Editorial

Aqui está algumas ideias e exemplos concretos de aplicação de Estratégia de Conteúdo, mostrados por Colleen Jones.

Modelos e Guias para download

A seguir, alguns recursos de Estratégia de Conteúdo, fornecidos por Kevin P. Nichols.

Inventário/Auditoria de Conteúdo (.xls)
Matriz de Mercado de Conteúdo(.xls)
Matriz de Conteúdo(.xls)
Guia de Protocolo de Estado Atual de Stakeholder(.pdf)

Leitura Complementar

Blogs sobre Estratégia de Conteúdo

Livros sobre Estratégia de Conteúdo

Artigos e publicações importantes

Margot Bloomstein; “The Case for Content Strategy – Motown Style“, A List Apart, 18 ago 2009.
Kristina Halvorson; “The Discipline of Content Strategy“, A List Apart, 16 dez 2008.
Colleen Jones; “Make Your Content Make a Difference“, Smashing Magazine, 12 abr 2011.
Colleen Jones; “Toward Content Quality“, UXmatters, 13 abril 2009.
Matt Kinsman; “From Editor to ‘Content Strategist:’ Semantics or Fundamental Change?“, Folio, 1 jul 2008.
Fred Leise; “Content Analysis Heuristics“, Boxes and Arrows, 26 February 2007. 12 mar 2007.
Rachel Lovinger; “Content Strategy: The Philosophy of Data“, Boxes and Arrows, 26 fev 2007.
Jeffrey MacIntyre; “Content-tious Strategy“, A List Apart, 16 dez 2008.
Jeffrey MacIntyre; “The Next Big Headache for Digital Publishers“, PaidContent, 6 ago 2009.
Karen McGrane; “Content Strategy: Content Is King!“, From Business to Buttons, 11 jun 2009.
Peter Merholz; “The Marginalization of Content“, adaptivepath.com, 22 maio 2008.
Kaitlin Pike, “Why You Need to Hire a Content Strategist“, Web 2.0 interview with Margot Bloomstein, 7 jul 2010.
Theresa Putkey; “Exploring the Content Strategist Title“, Boxes and Arrows, 22 maio 2007.
Erin Scime; “The Content Strategist as Digital Curator“, A List Apart, 8 dez 2009.

Conclusão

No Brasil, pouco se tem falado a respeito, mas, como pôde ser visto no artigo, Content Strategy, apesar de ser uma área de atuação relativamente nova, já conta com uma excelente bagagem advinda de outras áreas de conhecimento e muito, muito conteúdo para ser estudado e aprendido.

A entrada de cada vez mais empresas no ambiente digital, aliada à necessidade das que já estão em aprimorar sua presença e atuação, certamente o estrategista de conteúdo começará a ser um profissional bastante requisitado e, não duvide, será um elemento-chave para o meio online futuro.

Assim como hoje não é sequer imaginável um projeto web sem alguém com conhecimentos de Usabilidade, Design e Programação, brevemente o mesmo acontecerá para a Estratégia de Conteúdo.

10 dicas que desenvolvedores web iniciantes devem saber

Tárcio Zemel — Mon, 02 Jan 2012 12:00:33 +0000

Se você é um desenvolvedor iniciante, pode ser confuso sobre onde você deve começar no mundo do desenvolvimento web, já que o ramo é amplo e oferece muitas opções de escolha. Há muitas perguntas a serem feitas, tais como “Que linguagem de programação quero aprender?” ou “Eu deveria saber sobre front-end ou apenas back-end?”, e existem, literalmente, centenas de outras.

Mas, para que você não fique tão perdido, esta lista de 10 dicas que desenvolvedores web iniciantes devem saber realmente pode ajudá-lo a iniciar sua carreira como desenvolvedor ou, caso já tenha começado, pode servir de norte para você perceber se realmente escolheu a área certa ou se vai mudar.

Este é um artigo traduzido do original 10 Things Beginner Developers Should Know, do blog 1stwebdesigner – e sofreu pequenas adaptações.

Decida quais habilidades você quer

Ao iniciar na carreira de desenvolvedor web, você realmente precisa se concentrar em alguma coisa e aceitar o fato de que não é possível ser um “generalista”. Acredite: mesmo dando muita vontade de atuar em vários e vários campos do desenvolvimento web, isso é impossível! Além do mais, geralmente o mercado valoriza mais um expert numa área do que um “faz tudo web”.

Não há nada de errado em querer em ser excelente em vários campos, mas você realmente não poderá fazer isso no começo. O que você pode fazer é centrar seus esforços no aprendizado em uma habilidade e se tornar um perito nesse campo. Pode ser PHP, Ruby, ASP.net ou C #, mas tem que ser bom no que faz… Muito bom! Depois de dominar um deles, você pode seguir em frente, mas não faça isso até que você tenha grande conhecimento nesse campo.

Esta dica também é bom para front-end designers, que sempre começam com HTML e CSS, depois passam para JavaScript, jQuery, AJAX, ou quaisquer outros que estiverem interessados . Claro, é possível aprender HTML e CSS ao mesmo tempo, mas isso é porque eles meio que trabalham em conjunto. Você não pode realmente dominar PHP e ASP.net ao mesmo tempo – a menos que você gaste 20 horas de estudos por dia, o que, definitivamente, não é recomendado -, portanto, você tem que adquirir suas habilidades uma a uma.

Mas, já que você é um novato e, provavelmente, não deve saber muito sobre linguagens de programação hardcore, escolher uma área para começar pode ser complicado, mas há uma solução: pense no que você quiser desenvolver: se for temas para WordPress, então seu caminho é o PHP; se for sistemas de gestão personalizados, tente ASP.net; jogos de iPhone, aprender C# e assim por diante.

Basta pesquisar um pouco sobre o que cada linguagem pode fazer e começar a aprender. E, neste caminho, você certamente vai aprender que é possível fazer as mesmas coisas usando diferentes linguagens…

Aprenda direito

Outra dica para novatos é, independentemente da linguagem que você escolher, aprenda direito! Se você aprender HTML codificando layouts com tabelas, isso não é nada certo – e eu tenho certeza que outros especialistas concordam comigo. Codificar usando os mais recentes padrões da web parece inútil para alguns, mas é realmente importante e é altamente recomendado a aprender assim, já que isso não vai só melhorar a velocidade de carregamento de seus projetos, mas também será mais fácil e fará mais sentido.

Google é o seu melhor amigo

Realmente não importa que tipo de problema que você tem, estou certo de Google pode resolvê-lo (na maioria dos casos, pelo menos).

Fóruns de programação são altamente recomendados, também, mas, antes de postar uma pergunta em algum fórum, tente buscar uma solução no Google porque, na maioria das vezes, você vai encontrar uma resposta para sua pergunta – ou, pelo menos, uma resposta que irá guiá-lo para resolver a questão.

Analise o código alheio

Isso vale principalmente para designers, mas, às vezes, desenvolvedores têm conhecimentos de design de front-end e fazem seus próprios layouts antes de começar a codificá-los. É importante olhar outros sites para entender como eles são codificados. Se você gosta de algum estilo ou elemento de um site, olhe para o código fonte e o analise! O Firebug funciona maravilhosamente bem nestes casos. Esta é a maneira pela qual a maioria das pessoas aprende a codificar.

O que não é aconselhado é roubar o design do alheio. Isso é imperdoável e digno de um “Que deselegante!”, além de mostrar uma falta de respeito e tremenda falta de profissionalismo, mas, geralmente, a comunidade de desenvolvedores não vê maiores problema em “pegar emprestado” alguns trechos de código (caso isso não infrinja alguma lei ou patente, claro).

Portanto, fica a “regrinha”: você pode até copiar algum código aqui e ali – este é o caminho para aprender a fazer as coisas – mas nunca roube um design!

Entre numa rede de conhecimentos

Outra coisa importante é participar de uma rede dentro de seu campo de conhecimento. Nunca é demais conhecer outros desenvolvedores e designers. Um cenário não muito interessante é você ter que voltar trás e buscar coisas no Google; um cenário melhor é você ter discussões interessantes e poder obter ajuda através de discussões com pessoas da mesma área. Você pode até colaborar com seu colegas desenvolvedores em projetos maiores, o que, quase sempre, é bom para todos os envolvidos.

Você está perto de conseguir um projeto mas não tem certeza se você pode lidar com o tipo de trabalho solicitado? Recomende um de seus colegas desenvolvedores! Ele(s) provavelmente irá(ão) executar o trabalho melhor do que você – se for(em) especialista(s) nessa área específica – e você pode fechar algum tipo de parceria em algum momento futuro. Faça parte de uma rede e a mantenha ativa e sempre por perto. Há sempre a demanda por um desenvolvedor que esteja “ao redor”.

A própria ideia de tradução deste artigo surgiu no grupo de discussão html5-css3-brasil e viu como isso foi uma boa coisa? ;-)

Entenda os designers

É altamente aconselhável que você compreenda os designers, caso não tem ideia de como eles trabalham. E isso vale tanto para designers gráficos quanto para front-end designers.

É sempre bom para aprender como eles trabalham e porque eles podem entregar páginas estáticas que realmente não correspondem aos mais recentes padrões da web. Aprenda a conversar com eles e explicar o que está errado e saber pedir para corrigir seus próprios erros. Dessa forma, sua relação de trabalho será mais próxima e o resultado bem melhor.

Use ferramentas profissionais

Apesar de HTML e CSS poderem ser feitos até com o Bloco de Notas, isso não é recomendado. E, se isso não é aconselhado para HTML e CSS, é igualmente desaconselhado para PHP, ASP.net ou Ruby. Trabalhe com ferramenta profissionais como Eclipse, Aptana, NetBeans ou outra qualquer, mas use o que os profissionais usam, caso contrário você não será um deles!

Esse tipo de ferramenta verifica erros, tem autocomplete e dá sugestões durante a codificação. Há uma razão pela qual Eclipse e NetBeans são 2 dos IDEs (Integrated Development Environment ou Ambiente de Desenvolvimento Integrado) mais usados no mundo: eles fazem o trabalho em grande estilo!

Então comece a trabalhar agora, mesmo, com alguma ferramenta profissional, caso ainda não o tenha feito!

Deixe as coisas legais por último

Cada linguagem tem a sua própria “versão cool”. Por exemplo, HTML tem HTML5, CSS tem CSS3, JavaScript e AJAX tem jQuery e assim por diante. É muito melhor se você aprender a linguagem básica e depois estudar mais até chegar no estágio cool. E, também, as coisas “cool” trabalham a partir dos elementos básicos, então você não será capaz de desenvolver e entender um controle deslizante com jQuery se você não compreender o JavaScript básico.

Mantenha-se informado e atualizado

É sempre bom se manter informado e atualizado sobre o que está acontecendo no mundo do desenvolvimento web, em especial da(s) área(s) que você atua. Você pode fazer isso através da leitura de feeds, livros “de verdade”, blogs e screencasts. Fique atualizado e certifique-se de que você é um dos primeiros a oferecer produtos desenvolvidos com a tecnologia mais recente.

No começo, pode não funcionar muito (as pessoas podem querer manter o “velho” até que as novas tecnologias mostrem seu valor), mas, certamente, também há aquelas pessoas que querem ter um produto totalmente novo, desenvolvido com as mais recentes tecnologias – e isto lhe dará uma vantagem e fará você conhecido no ramo.

Continue com o processo de aprendizagem

Depois de se tornar um especialista no campo que escolheu, trilhe seu caminho rumo ao aprendizado de outras linguagens e/ou áreas de atuação. Fique de olho aberto nas linguagens mais importantes e aprenda aquelas que julgar serem as mais interessantes. Quando você domina duas, vá para a terceira e assim por diante.

E continue até que não haja muito mais para aprender – embora, como já foi dito, isso seja impossível. Este é o caminho para o sucesso!

Conclusão

É bastante comum que desenvolvedores iniciantes passem por tempos difíceis neste campo profundo do desenvolvimento web, mas estas dicas servem justamente para ajudar que cada um encontre seu caminho.

Nem sequer importa muito por onde começar, tudo o que importa é você comece! Isso geralmente é o que leva mais tempo, então não desperdice estes dias preciosos e comece agora a estudar e a desenvolver a web! ;-)

Novas tecnologias exigem novas maneiras de se comunicar

Tárcio Zemel — Mon, 20 Sep 2010 13:00:11 +0000

É bastante comum ao desenvolvedor web se deparar com casos em que deve justificar as ações que toma em seu trabalho – chamado por alguns de “defesa do trabalho”. E, nessas situações, é importante saber como argumentar com o cliente, às vezes sobre como a comunicação na web é diferente e peculiar em relação a outras mídias.

Recentemente, conheci o excelente vídeo (que vi no Publicidade na Web) intitulado “Como a internet mudou a propaganda” que, de uma maneira bastante simples de se entender, explica algumas dessas peculiaridades, reforçando o conceito de que novas tecnologias exigem novas maneiras de se comunicar!

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?

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).

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 14: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.

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!

Quando o cliente (pensa que) sabe mais

Tárcio Zemel — Tue, 09 Dec 2008 16: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!

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!

Download dos 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!

desenvolvimento para web » Miscelânea

Desenvolvedores front end e o mercado

Opiniões divergentes

Considerações finais

Artigos Relacionados

dpw2012: novo tema do desenvolvimento para web

Motivações para um novo tema, o dpw2012

dpw2012: tecnologias

HTML5 e HTML5 Boilerplate

Twitter Bootstrap

Design Responsivo

Microdata API + schema.org

Novo logo

Considerações finais

Artigos Relacionados

Estratégia de Conteúdo ou Content Strategy

Visão Geral

Conteúdo

Estratégia de Conteúdo

Estratégia de Conteúdo: metodologias

Análise

Coleta

Gestão

Publicação

Estrategistas de Conteúdo

Educação e Formação Profissional

Empregadores proeminentes de estrategistas de conteúdo

Estratégia de Conteúdo: Produtos de Trabalho (ou Entregas)

Modelos e Guias para download

Leitura Complementar

Conclusão

Artigos Relacionados

10 dicas que desenvolvedores web iniciantes devem saber

Decida quais habilidades você quer

Aprenda direito

Google é o seu melhor amigo

Analise o código alheio

Entre numa rede de conhecimentos

Entenda os designers

Use ferramentas profissionais

Deixe as coisas legais por último

Mantenha-se informado e atualizado

Continue com o processo de aprendizagem

Conclusão

Artigos Relacionados

Novas tecnologias exigem novas maneiras de se comunicar

Artigos Relacionados

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

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

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