Quer ganhar 1 ano de Basekit Conta Negócios com 1GB de armazenamento, 1 domínio incluído e Suporte Premium? Então continue lendo o artigo e saiba como ter acesso grátis durante 1 ano inteiro a uma das melhores plataformas de criar sites do mundo!

Sobre a Basekit

Criada com o propósito de revolucionar o web design, a Basekit atualmente é referência na área de construção de sites no mundo, sendo a plataforma preferida de algumas das maiores empresas do mundo de hospedagem, como Hostgator, 123Reg, Acens e Gandi. Acesse o site da Basekit e assista ao vídeo de apresentação. Você vai entender o motivo!

Fundada em 2008, foi premiada no Seedcamp, um importante evento de incentivo ao empreededorismo na Europa, e, pouco tempo depois, recebeu um round de investimentos avaliado em US$ 10 milhões, da Eden Ventures, Nauta Capital e NESTA (fundos europeus de capital de risco).

Eleita pelo jornal Sunday Times como a melhor empresa de construção de sites do mundo em 2011, a Basekit tem auxiliado mais de 100 mil pequenos empresários e web designers (mais de 95% do total) em todo o mundo a criar sites funcionais e atraentes de maneira inteligente e rápida.

No caso dos designers, a empresa vem desenvolvendo uma ação de crowdsourcing batizada de “Basekit Pro”, por meio da qual os profissionais recebem uma série de incentivos, entre os quais estão a hospedagem gratuita dos sites que criam e a indicação para a realização de Jobs em todo o país.

A empresa opera atualmente com mais de 50 funcionários, com sedes em Londres, Bristol, Barcelona e São Paulo, e mantém parceria com empresas de renome, como a Telefônica, que prevê 50% de desconto na criação de sites por um ano para as empresas que se cadastrarem no Portal “Sua Empresa, Nosso Negócio”, e o Grupo britânico UK2 (especializada em servidores para grandes empresas), que contribuiu para tornar a criação de sites mais fácil e acessível a todos os consumidores.

Como ganhar 1 ano da Basekit Conta Negócios

Deu pra ver que a plataforma é uma ferramenta de primeira qualidade! E você pode ganhar 1 ano grátis da Conta Negócios, que tem:

• Hospedagem incluída
• Páginas ilimitadas
• 1Tb de banda larga
• 1Gb de armazenamento
• Suporte Premium
• Mais de 50 temas de sites disponíveis
• 1 domínio incluído
• R$30 Google Ads voucher
• Paypal

Para concorrer, é fácil: basta fazer um comentário neste artigo! É isso, mesmo, ao fazer um comentário neste artigo, automaticamente você estará concorrendo a 1 ano da Conta Negócio da Basekit. Mas não valem comentários do tipo “Legal”, “Entrei” ou “Tow nessa”. Escreve pelo menos 1 ou 2 linhas explicando o porquê de você querer ganhar a promoção. Ah, e só vale 1 comentário por pessoa, hein!

Você tem até dia 6 de fevereiro, exatamente 1 semana, para comentar e concorrer. Quando o tempo expirar, o número total de comentários será jogado em alguma ferramenta de sorteio para determinar quem é o ganhador.

Boa sorte!  ;-)

Artigos Relacionados

• Nenhum artigo relacionado...

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.

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

• Brain Traffic
• Content Insights
• Eat Media
• Notes on Content
• Pybop
• Scatter Gather

Livros sobre Estratégia de Conteúdo

• Clout: The Art + Science of Influential Web Content
• Content Strategy for the Web
• The Elements of Content Strategy
• The Web Content Strategist’s Bible

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.

Artigos Relacionados

• JSON – JavaScript Object Notation
• Cores na web: guia completo
• URLs longas apresentadas corretamente com CSS
• Novas tecnologias exigem novas maneiras de se comunicar
• Erros comuns em desenvolvimento web para campanhas de SEO
• URLs amigáveis (slug) à WordPress
• 15 fantásticos comandos SQL para WordPress
• Breadcrumbs: guia completo com exemplos e melhores práticas
• 6 mitos de SEO que você deve evitar
• Mastering Twitter, o manual completo sobre twitter para desenvolvedores e marketeiros

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.

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

Artigos Relacionados

• Sobre parcerias de trabalhos em desenvolvimento web
• Quando o cliente (pensa que) sabe mais
• Web sites genéricos e a ilusão dos preços baixos
• Como montar um portfolio sem ter clientes
• Elementos de design aplicados à web
• Wireframes para web: guia completo de desenvolvimento
• 10 erros básicos de web design
• JSON – JavaScript Object Notation
• Novas tecnologias exigem novas maneiras de se comunicar
• Erros comuns em desenvolvimento web para campanhas de SEO

Otimizar códigos jQuery em um site significa aumentar sua performance. E, como qualquer desenvolvedor web deveria saber, os componentes e recursos do front-end são responsáveis por, pelo menos, 80% da performance de páginas web!

O jQuery, em relação a JavaScript “puro”, já é bem simples de se aprender e possui uma gama de recursos incrível! Entretanto, principalmente quem está começando e/ou ainda não entendeu bem a dinâmica da biblioteca, desconhece alguma dicas simples que, se aplicadas, garantem que o desempenho seja aumentado escrevendo menos código! É isso que vamos ver neste artigo e aprender como melhorar códigos jQuery para conseguir um desempenho melhor.

Otimização de seletores

Para começar, vejamos como é possível otimizar os seletores no jQuery, otimizando as consultas realizadas e aumentando a performance do código.

Velocidade de seletores

Muito do poder do jQuery vem de sua capacidade de selecionar elementos DOM e agir/interagir com eles através de seus selectors e, através deles, o jQuery provê uma tonelada de maneiras de escolher qual(is) elemento(s) em uma página se quer trabalhar. No entanto, um número surpreendente de desenvolvedores web não sabe que os seletores não são todos iguais e que é incrível a diferença de desempenho entre 2 seletores que, à primeira vista, parecem quase idênticos.

Como exemplo, vejamos 2 maneiras de selecionar todas as tags de parágrafo dentro de uma div com id específico:

$('#id p');

$('#id').find('p');

É surpreendente o fato de que a segunda maneira pode ser 2 vezes mais rápida!

Há muitas maneiras diferentes de selecionar elementos usando jQuery; estas podem ser (virtualmente) divididas em 5 diferentes métodos. Em ordem, do mais rápido para o mais lento, são:

• $('#id'). Sem dúvidas, este é o selector mais rápido, já que mapeia diretamente o document.getElementbyId() nativo do JavaScript. Sempre que possível, os seletores descendentes devem ser feitos com um seletor de ID conjuntamente ao método .find(), que limita o escopo do que está sendo pesquisado (tal como no exemplo $('#id').find('p') anterior).
• $('p'), $('input'), $('form'), [...]. Selecionar elementos pelo nome da tag também é rápido, já que mapeia diretamente para o método nativo document.getElementsByTagname().
• $(".class"). Selecionar por nome de classes é um pouco mais custoso. Enquanto isso é executado muito bem por navegadores modernos, pode ser que uma lentidão seja causada em versões do IE baixo da 9. Por quê? Porque o IE9 foi a primeira versão do Internet Explorer a dar suporte para a função document.getElementsByClassName(), nativa do JavaScript. Para interpretar isso, browsers mais antigos têm de recorrer ao usos de artifícios bem mais custosos, que realmente afetam o desempenho do seletor.
• $('[attribute="value"]'). Não há nenhum método JavaScript nativo para este tipo seletor, então, a única maneira que pode realizar essa busca, é procurar por todo o DOM em busca de combinações que satisfaçam à condição do seletor. Navegadores modernos que suportam o método querySelectorAll() terão um desempenho melhor em certos casos, mas, em geral, este tipo de seletor é bastante lento.
• $(':hidden'). Assim como o caso anterior, não existe um método JavaScript nativo para usar este tipo de seletor. Pseudo-seletores podem ser extremamente lentos, já que a consulta tem que ser executada em cada elemento da página. Novamente, navegadores modernos que suportam o método querySelectorAll() se saem ligeiramente melhores, mas tente evitar este tipo de seleção. Se realmente for necessário, é possível amenizar um pouco usando o .find(), como visto anteriormente. Por exemplo: $('#list').find(':hidden').

Encadeamento

Quase todos os métodos jQuery retornam um objeto jQuery. Isto significa que, quando um método é executado, seus resultados são retornados e é possível continuar a implementação de mais métodos em sequência, o que é conhecido como encadeamento ou chaining. Ao invés de escrever o mesmo seletor várias vezes, esta característica da biblioteca permite que várias ações possam ser executadas de uma vez.

Sem encadeamento:

$('#object').addClass('active');
$('#object').css('color','#F0F');
$('#object').height(300);

Com encadeamento:

$('#object').addClass('active').css('color','#F0F').height(300);

Isto tem um duplo efeito ao tornar seu código mais curto e mais rápido. Métodos encadeados são executados mais rapidamente do que vários métodos de um seletor em cache e, de ambos os jeitos, são muito mais rápidos que vários métodos através de seletores sem cache. Mas, esperem… “Seletor em cache”? O que é isso?

Seletores em cache

Outra maneira fácil de melhorar a performance do código jQuery – e que parece ser um mistério para a maioria dos desenvolvedores – é a ideia de fazer cache de seletores. Pense em quantas vezes você acaba escrevendo o mesmo seletor em seus códigos. Cada $('.element') tem que varrer todo o DOM procurando por combinações o tempo todo, independentemente se este seletor tenha sido executado antes. Executando a seleção uma vez e depois guardando o(s) resultado(s) em uma variável, significa que a busca no DOM tem que ser feita apenas uma única vez. Uma vez que os resultados de um seletor tem sido armazenada em cache, é possível fazer qualquer coisa com eles.

Primeiro, executa-se o seletor desejado (como exemplo, pegar todos os li dentro de uma ul de id “blocks”):

var blocks = $('#blocks').find('li');

Agora, é possível usar a variável blocks em qualquer lugar que se queira, sem ter que percorrer todo o DOM novamente em cada vez:

$('#hideBlocks').click(function(){
    blocks.fadeOut();
});
$('#showBlocks').click(function(){
    blocks.fadeIn();
});

Portanto, fica essa preciosa dica: qualquer seletor que é executado mais de uma vez deve ser armazenado em cache! Veja este teste no jsperf que mostra o quão mais rápido e eficiente é um seletor cacheado em detrimento a um não cacheado.

Delegação de Evento ou Event Delegation

Event listeners consomem memória. Em sites e aplicações complexos não é incomum ter um monte de event listeners implementados e, felizmente, jQuery fornece métodos realmente fáceis para umaa gestão eficiente event listeners através da delegação.

Num exemplo extremo, imagine uma situação em que uma tabela 10×10 precisa ter um event listener em cada uma de suas células para que, quando ocorrer um clique em alguma delas, seja adiciona ou removida uma classe que define a cor de fundo da respectiva célula. Uma maneira comum de implementar isso (e algo bastante comum de ser visto em códigos jQuery) é:

$('table').find('td').click(function() {
    $(this).toggleClass('active');
});

O jQuery, a partir de sua versão 1.7, passou a oferecer um novo método de escuta de eventos: .on(). Ele age como um utilitário que envolve todos os event listeners anteriores do jQuery em um único e conveniente método e a forma que ele é implementado determina como ele se comporta. Ao reescrever o exemplo acima usando .on(), tem-se o seguinte:

$('table').find('td').on('click',function() {
    $(this).toggleClass('active');
});

Bastante simples, certo? Mas o problema aqui é que, mesmo com a mudança, o código ainda conta com um event listener para cada célula da tabela… Uma maneira muito melhor de fazer isso funcionar é criar um único event listener para monitorar os eventos na própria tabela! Uma vez que a maioria dos eventos faz bubbling (vai percorrendo seus ancestrais em sequência) na árvore do DOM, é possível vincular um único listener para um elemento (neste caso, table) e esperar eventos serem disparados a partir de seus descendentes. A melhor maneira de fazer isso usando o .on() é:

$('table').on('click', 'td', function() {
    $(this).toggleClass('active');
});

Com essa mudança simples, o número de event listeners passou de 100 (10×10 células da tabela) para 1! Acredite: a diferença de performance entre os 2 exemplos acima é impressionante!

Se você está usando alguma versão do jQuery abaixo da 1.7, é possível fazer a mesma coisa usando .delegate(). A sintaxe é diferente, mas uma consulta à documentação vai esclarecer as coisas.

Manipulação de DOM

Com jQuery é fácil de manipular o DOM. É trivial criar novos nós, inserir, retirar outros, mudar as coisas ao redor e assim por diante. o código para fazer isso é simples de escrever, mas, toda vez que o DOM é manipulado, o navegador tem que revisar o DOM, o que pode ser muito custoso e impactar a performance do front-end. Um exemplo evidente em que isso acontece é em um loop longo, seja através de um loop for(), while() ou $.each().

Como exemplo, vamos supor que existe um array cheio de URLs de imagens de um banco de dados ou alguma chamada em AJAX e, o que se pretende, é colocar todas essas imagens numa lista não ordenada. Comumente, o código que se encontra para isso é:

var arr = [reallyLongArrayOfImageURLs];
 
$.each(arr, function(count, item) {
    var newImg = '<li><img src="' + item + '"></li>';
    $('#imgList').append(newImg);
});

Existem alguns problemas com isso. Para começar, há a seleção de $('#ImgList') em cada iteração do loop – e, como vimos anteriormente, isso não é nada bom para a performance. O outro problema é que, a cada vez que o loop repete, é adicionado um novo li ao DOM. Cada uma dessas inserções consome recursos e, se o array é muito grande, isso poderia levar a uma grande perda de performance ou, até mesmo, ao temido alerta “Um script desta página está tornando a página lenta”…

Uma outra maneira de implementar a solução é:

var arr = [reallyLongArrayOfImageURLs],
    tmp = '';
 
$.each(arr, function(count, item) {
    tmp += '<li><img src="' + item + '"></li>';
});
 
$('#imgList').append(tmp);

O que foi feito, aqui, foi a criação de uma variável tmp para receber cada li criado. Quando o loop termina, a variável contém todos os itens de lista na memória e estes podem ser anexados ao ul todos de uma vez! Como navegadores trabalham melhor com operações de objetos na memória ao invés de diretamente atualizando o DOM a cada vez, este código é bem mais rápido e eficiente!

Conclusão

Logicamente, estas dicas de como otimizar códigos jQuery para aumentar a performance do front-end não são as únicas existentes, mas, certamente, estão dentre as mais simples de implementar. Embora algumas das mudanças, individualmente, façam apenas alguns milésimos de segundo de diferença, ao somar isso, dependendo de sua aplicação, é possível ter um aumento de performance de quase 70%!

Estudos mostram que o olho humano é capaz de discernir delays de 100ms (!), portanto, fazer algumas mudanças no código pode, facilmente, ter um efeito notável sobre o modo (e a percepção) de quão bem um seu site ou aplicativo é executado.

E você, tem alguma outra dica de otimização de código jQuery para compartilhar? Comente!

Artigos Relacionados

• Como fazer loading em conteúdos do site
• 5 dicas para temas WordPress melhores
• Melhorando a interação em formulários de busca
• Textarea: dicas e truques que você sempre quis saber
• Ferramentas e recursos para desenvolvimento web
• 8 dicas para fazer códigos melhores com jQuery
• Truques de configuração do WordPress
• Pergunte-se a si mesmo: questões para desenvolver um bom site
• Dicas para otimizar códigos PHP
• Wireframes para web: guia completo de desenvolvimento

O design é dividido em uma série de princípios básicos que se aplicam a todo o projeto, seja ele do “mundo real” ou do mundo virtual. No entanto, especialmente na web, às vezes essas regras tendem a ser esquecidas e nós apenas trabalhamos com o que sentimos ser o “certo”.

Em uma das séries do desenvolvimento para web foram abordados alguns dos principais estudos sobre Gestalt para web, e isso foi um grande passo sobre o que estamos tratando aqui, pois pudemos estudar como é a percepção e entendimento das pessoas no ambiente online. Agora, veremos alguns dos elementos de design aplicados à web.

Equilíbrio

Equilíbrio é um assunto complexo. Existem dois tipos de equilíbrio: equilíbrio simétrico e equilíbrio assimétrico. Quase todos nós estamos familiarizados com imagens simétricas. A maioria de nós, nos tempos de criança, provavelmente já fez algum tipo de recorte em papel de forma que o resultado final ficasse perfeitamente simétrico. Enquanto o equilíbrio simétrico é fácil de detectar (as coisas aparecem como imagens num espelho), o equilíbrio assimétrico é menos perceptível, mas, aparentemente, mais importante.

Subtraction: exemplo de Equilíbrio Assimétrico

A figura acima é um excelente exemplo de equilíbrio assimétrico (aplicado em vários lugares), especialmente a imagem do cachorro. Nesse exemplo P&B, a colocação do animal nessa posição deixa muito peso para o preto na metade esquerda da composição, que é equilibrada pelo aparentemente aleatórios “X” na parede, à direita (1). Esta pequena adição cria um senso de equilíbrio que quase faz você se sentir como se o cachorro esteja no centro da imagem, quando, na verdade, ele não está. Confira.

Enquanto a imagem do cachorro demonstra um equilíbrio gráfico há, também, algum equilíbrio assimétrico no cabeçalho do site (2). A barra de menu é bastante pesada, tanto em seu tamanho, quanto na cor. No entanto, a linha mais fina acima de “Subtraction” usa o espaço negativo acima e abaixo para criar um equilíbrio visual entre os dois. Então, a área em branco acima da barra de menu fica como mesmo peso visual que a barra de navegação preta mais abaixo.

Um desenho simétrico, apesar de ser um conceito extremamente simples, pode ser surpreendentemente poderoso.

Apple: exemplo de Equilíbrio Simétrico

Apple, uma das atuais referências de design, usa um layout completamente simétrico em sua página inicial (atualmente a página deles está diferente que a desse screenshot). Como você pode ver na imagem, cada elemento é correspondido do outro lado da linha, criando uma harmonia visual simples.

Proporção

Escolher o tamanho certo para os elementos vai além de simplesmente selecionar um tamanho legível para o corpo do conteúdo ou a largura das colunas. Deve-se levar em conta a proporção, que está entre o equilíbrio e dominância, baseados nas proporções de certos objetos. Se num site “tradicional”, por exemplo, com uma coluna maior para conteúdo e uma menor para menus e meta-informações, a coluna do conteúdo é maior justamente por ser mais importante. Se os menus e meta-informações fossem colocados na coluna principal, certamente a primeira reação dos visitantes será de pensar que a página não tem o conteúdo que estão procurando.

Enquanto algumas pessoas preferem usar grids com módulos fixos, outros preferem usar abordagens diferenciadas, tais como a usada aqui, no desenvolvimento para web – pelo menos na data de publicação deste artigo -, que tem como base a Proporção Áurea: a largura da coluna do conteúdo é, aproximadamente, 1,625 maior que a coluna da barra lateral.

A proporção também pode ser usado para, simplesmente, atribuir importância a elementos na página.

Elementos de design aplicados à web: proporção

Apesar de a página atual estar diferente deste screenshot, o pessoal da Panic fez um bom trabalho em usar elementos proporcionalmente dimensionados para atribuir não somente uma hierarquia visual, mas significado entre eles. Começando com o logo do produto (1), passando, mais baixo, para as três call to action (2) – que são ligadas por tamanho e aspectos relacionais, como os ícones à esquerda – e, finalmente, títulos e texto importante (3). Combinado com um design muito unificado, esta página é quase uma obra-prima da web (especialmente para os que adoram um javascript bem feito aplicado a user interfaces).

Ritmo

Ritmo na web é algo presente principalmente em dados. É especialmente importante para sites que contêm páginas compridas e/ou grandes quantidades de informação. Este screenshot do Digg mostra que o site cai em ambas as situações e, também, é um excelente exemplo de ritmo através da repetição:

Digg: exemplo de Ritmo

O site cria um ponto de partida no cabeçalho com sua navegação horizontal estabelecendo a direção de leitura (1) para, logo em seguida, cair no conteúdo principal, que é idêntico para cada artigo. Isso cria um ritmo consistente que o usuário segue inconscientemente (2). Esta técnica é repetida na barra lateral.

Uma boa maneira de pensar sobre o ritmo no design está na mesma definição que vem à mente quando pensamos em música. Cada projeto tem um pouco de um “pulso visual” que, dependendo de onde você está na página, convida a uma leitura rápida, uma pausa numa imagem interessante ou a uma orientação para um botão de download.

Um site que é muito consistente no seu ritmo pode sofrer no fato de que todos os elementos na página acabam ficando com uma quantidade igual de peso ao redor, podendo deixar os visitantes ligeiramente desorientados. Muitas variações, por outro lado, podem fazer com que a página se torne um caos! O importante é estabelecer uma coerência dentro de certas seções do site, como demonstrado acima, no Digg: cada parte tem seu próprio ritmo interno, segundo seu propósito; mas, como um todo, a página inteira é unificada e tudo instantaneamente tem significado apenas com base na cor, forma e proporção.

Dominância (ou Ênfase)

Não há nada mais poderoso no design do que uma forma circular, especialmente em um mundo de retângulos, como a web. Um círculo chama a atenção simplesmente por sua forma. Ele não precisa ser especialmente vibrante em cores ou espaço em branco. E o melhor lugar para aproveitar todas essas boas características está no logotipo.

A List Apart: exemplo de Dominância

Como é possível ver na imagem, A List Apart está usando não um, mas um par de círculos para fazer a dominância ao seu logotipo (1). Isso é reforçado pelo símbolo com o número da edição, adjacente ao logo. Há, também, outros “selinhos” como esse usados ​​no lado direito (2) para chamar a atenção para algum ponto específico (no caso, venda de camisetas).

Outra forma de alcançar uma posição dominante é através do uso de espaço em branco e/ou cores. Estes podem ser combinados com uma forma dominante, mas, raramente, você sempre precisa combinar todos eles; um ou dois geralmente já é o suficiente.

Google: outro exemplo de Dominância

Google usa ambos, espaço em branco e dominância de cores, para puxar o olho para a área principal da página (1). O lúdico colorido do logotipo do Google, combinado com a quantidade de espaço em branco que envolve esta área, força de seu olho a se concentrar lá imediatamente. Embora o Google pode fornecer excelentes resultados para as buscas, a chave para seu sucesso na web é a sua facilidade de uso, que é naturalmente fácil de se usar devido a suas tendências visuais básicas.

Unidade

O conceito de unidade é muito mais aberto a interpretações. A unidade é, na verdade, um sentimento de que todos os elementos estão ligados, conectados de alguma forma, e isso dá uma ideia de um todo. Um grande exemplo de unidade é o portfolio de Dave Werner, no qual cada página do site apresenta escrita à mão, alfinetes e todo o tipo de outros elementos que, quando analisados em conjunto, produzem um sentimento de unidade. Não há nada que se sente estar fora do lugar e tudo compartilha o mesmo estilo:

Dave Werner: exemplo de Unidade

Mesmo pedaços do site que, como entidades separadas, naturalmente podem parecer diferentes umas das outras, são cobertas de notas e esboços, trazendo até mesmo esses aspectos do site para o portfolio. Não há nada no site que você não esperaria ver alfinetado num quadro de camurça de projetos!  ;-)

Conclusão

Embora ninguém vá se tornar um “guru do design” somente com essas dicas, certamente essas explicações e exemplos ajudam a conceber projetos de forma mais consciente, que podem impor a hierarquia visual necessária e realmente guiar os olhos do visitante através da página da maneira que planejada.

Sem este tipo de estudo (e o de Gestalt aplicado ao web design) esses elementos você não ganha nada além de muito trabalho e retrabalho em busca de uma solução visual que você sinta ser a certa ou a “bonita”. Os princípios, em si, são muito simples; o mais importante é estar ciente de que eles existem e, a partir de agora, começar a refletir sobre eles na hora dos projetos e partir para a prática que, como sabem aqueles que já sentem um pouco da experiência dos anos de trabalho na área, sempre recompensa com trabalhos cada vez melhores.

Artigos Relacionados

• Wireframes para web: guia completo de desenvolvimento
• 10 erros básicos de web design
• Erros comuns em desenvolvimento web para campanhas de SEO
• Estratégia Web de Pirâmide: guia para uma estratégia de web equilibrada
• Ferramentas para criação de wireframes
• 4 elementos de design para um bom call to action
• User Interface em dicas rápidas
• Como otimizar imagens para web: guia de otimização de imagens
• 8 características de User Interfaces (UI) de sucesso
• Meta tags

Wireframes são uma das partes mais importantes de um projeto web, portanto, desenvolver wireframes para web sites é uma etapa que, mesmo frequentemente negligenciada, abandonada, mesmo, não o deveria ser.

Neste artigo, veja mais sobre a importância desta etapa do projeto web e conheça algumas diretrizes importantíssimas para se preparar wireframes de qualidade, que realmente façam a diferença na qualidade final e nível de profissionalismo e produtividade de seus web projects.

A maioria dos designers desenvolve wireframes para seus projetos, de uma forma ou de outra, mesmo que sejam apenas esboços rápidos na parte de trás de alguns papéis de rascunho. Wireframe é uma parte importante do processo de desenvolvimento web, especialmente para projetos mais complexos.

Por que fazer wireframes

Wireframes realmente são úteis quando você está se comunicando com clientes, pois lhes permite visualizar suas ideias mais facilmente do que quando você apenas as descreve verbalmente. Para casos em que o “cliente” é a próprio empresa em que se trabalha ou para quando se tratam de projetos pessoais, a afirmativa também é verdadeira.

Então, que esteja claro: desenvolver wireframes é realmente um passo necessário no processo de design! Mesmo se o site que se está projetando seja incrivelmente minimalista e simples, fazer o wireframe ajuda a esclarecer exatamente o que precisa ser feito nos diferentes tipos de página do projeto.

Ao dedicar tempo para criar, pelo menos, um wireframe simples, tenha certeza de que seu web design levará em conta todos os elementos das diferentes páginas que compõem o projeto e precisam ir para o design. Além disso, eles estarão posicionados na melhor localização a que o estudo destes elementos chegou.

Além disso, o processo de produção de wire frames é muito mais simples, fácil e barato de ser feito do que quando se “pula” essa etapa e se parte direto para o HTML/CSS: wireframes podem ser facilmente revistos, adaptados ou descartados.

Wireframes x Modelos x Protótipos

Wireframe, modelo (mockup) e protótipo são frequentemente usados ​​como sinônimos, mas são três coisas diferentes (embora, frequentemente, haja alguma sobreposição entre eles). Cada um tem um propósito diferente do outro e sua própria importância no processo de design:

• Wireframes. São “ilustrações básicas” da estrutura e componentes de uma página web. Geralmente são o primeiro passo no processo de design (depois da concepção mental, obviamente).
• Modelos. Geralmente focam sobre os elementos de design visual do site. São muitas vezes bastante próximos ou idênticos ao web design final efetivo e incluem todos os gráficos, tipografia e outros elementos da página. Mockups geralmente são apenas arquivos de imagem.
• Protótipos. São layouts semi-funcionais das páginas e servem para dar um preview de maior fidelidade do site real. Esta fase antecede a programação da lógica de negócios do site. Enquanto eles não podem ter toda a funcionalidade, eles geralmente dão aos clientes a capacidade de interagir com os elementos e simular a forma como o site irá, eventualmente, trabalhar. Protótipos podem ou não incluir elementos de design finalizado.

Em suma, o wireframe vêm em primeiro lugar, seguido do modelo (ou mockup) e, caso seja possível/viável, haverá inúmeros benefícios ao se fazer o uso de protótipo (às vezes chamado “wireframe funcional“).

Como criar wireframes

Criar wireframes é tão simples ou tão complicado quanto você queira. Em sua forma mais básica, um wireframe poderia ser nada mais do que um esboço numa folha de papel. Outros “wireframes” são criados digitalmente e são realmente mais como protótipos, com objetos clicáveis ​​e toda a interatividade prevista.

O tipo de wireframe que será criado vai depender do que o projeto demanda. Projetos mais complicados provavelmente requerem wireframes mais elaborados, enquanto sites simples pode ter wireframes simples.

O que incluir em um wireframe

Os wireframes devem incluir informações suficientes para refletir o que precisa aparecer em cada página do projeto web. Pense sobre os elementos gerais da maioria das páginas web: cabeçalhos, rodapés, barras laterais, áreas de conteúdo, meta-informação, busca, widgets, gráficos, etc. Depois de ter uma idéia do que terá o site, comece a criar os wireframes com base nesses elementos.

O quão detalhado deve ser o wireframe também depende do projeto e de sua finalidade. Se o wireframe servirá apenas como um documento orientador para referência, então talvez não seja uma boa ideia dar muito foco nesta etapa; por outro lado, se ele vai ser usado por mais de um designer ou desenvolvedor – ou apresentado a clientes – então ele precisa ser melhor trabalhado.

Wireframes de baixa fidelidade x Wireframes de alta fidelidade

Existem algumas opções quando se trata do “estilo” de wireframes. Alguns designers optam por wireframes de baixa fidelidade , que são basicamente linhas sobre um fundo liso com alguns rótulos. Estes incluem tanto os desenhados a mão, como wireframes digitais, e são geralmente muito simples.

Wireframe de baixa fidelidade

Wireframes de alta fidelidade vão um passo além ao usando determinados elementos de design dentro do próprio wireframe. Isto pode incluir o logotipo ou alguns outros elementos gráficos básicos, bem como o esquema de cores e outros elementos visuais de design.

Wireframes assim começam a se aproximar do nível de modelos, mas eles podem ser inestimáveis ​​para transmitir uma sensação de como o site será, especialmente para os casos em que se tem dificuldade em vislumbrar como o site será ao ver wireframes de baixa fidelidade.

Técnicas para fazer wireframes

Existem dezenas de maneiras diferentes para criar wireframes que vão desde simples – caneta e esboços em papel –  a diagramas mais complexos – que parecem quase tão eficientes quanto sites em produção.

Existem, também, abordagens diferentes para o propósito e o raciocínio por trás da criação de wireframes, dependendo das necessidades do projeto e dos designers envolvidos nisto.

Aqui estão alguns recursos sobre diferentes procedimentos para a criação de wireframes para web (em inglês):

• Wireframes com InDesign e Illustrator. Esse é um artigo da  UXmatters sobre como criar wireframes usando Adobe InDesign e o Illustrator. Eles falam sobre o que o levou até a decisão de usar o InDesign e o Illustrator em detrimento a outros outros produtos até chegar na parte sobre como usar esses 2 aplicativos para criar wireframes.
• Método Caixa Cinza. Jason Santa Maria tem um post fantástico sobre o “Método Caixa Cinza” de criação de wireframes. Ele descreve seu processo inteiro de criação de wireframes, desde esboçar no papel até criar uma escala de cinza no Illustrator. Artigo com vários exemplos.
• O Futuro dos Wireframes. Inclui informações valiosas sobre processos e métodos de criação de wireframes, especialmente em termos de como fazer o processo de wireframe melhor para designers, desenvolvedores e proprietários de sites.
• 20 Passos para Fazer Wireframes Melhores. Este artigo estabelece 20 passos sobre o que você deve fazer para criar wireframes melhores. É um post fantástico para verificar se você é completamente novo na arte de fazer wireframes ou apenas infeliz com o seu processo atual.

Processo do wireframe

Existem muitas variações, mas há um punhado de passos fundamentais para a criação de um wireframe. É provável que você comece com uma lista de coisas que o site precisa incluir ou um documento de especificação formal de design. Outros já gostam de começar com um “olhar geral” do design e ir acrescentando detalhes, uma vez que se tem os fundamentos básicos do layout.

Quer você decida rabiscar algumas coisas no papel ou trabalhar com algum software, ainda não descarte um ou outro método. Alguns designers fazem esboços no papel e depois os passam para software específicos; outros vão direto para o software; outros ainda ficam somente no “wireframe de papel”. Tenha em mente que, caso se depare com algum “entrave criativo”, mudar os formatos com que se trabalha pode fazer maravilhas para sua criatividade!

É muito comum experimentar várias idéias e possibilidades diferentes com wireframes antes de tomar decisões finais em um projeto. Aliás, é justamente para facilitar/agilizar isso que é muito bom trabalhar com wireframes, já que, como se tem o mínimo de tempo e energia investidos, é possível facilmente fazer alterações e tentar coisas novas.

Uma vez que um wireframe básico é criado, você pode enviá-lo para outros membros da equipe para análise ou colocá-lo um pouco de lado por 1 ou 2 dias para analisar novamente. Quando estiver satisfeito, é hora de mostrá-lo ao cliente ou, caso não seja o caso de haver um cliente, começar a trabalhar em modelos baseados no wireframe.

Ferramentas para criar wireframes

Existem muitas ferramentas para wireframe disponíveis. Algumas são feitas especificamente para wireframes, enquanto outros são mais gerais, apesar de cumprirem bem seu papel quando trabalho é esse.

As ferramentas que você vai usar vão depender de preferência pessoal e dos requisitos do projeto. Não há “melhor” ferramenta para fazer wireframes, mas sim aquela na qual você se sente melhor usando e que funciona melhor para você.

Papel e caneta

Caneta (ou lápis) e papel são as ferramentas mais básicas que você pode usar para criar um wireframe. Também é útil usar papel quadriculado para criar elementos em proporção.

Você pode querer usar um lápis para o seu esboço inicial, para que você possa apagar as coisas sem ter que começar de novo. Então, a medida que for finalizando os elementos, pode passar caneta por cima para evitar apagar o que não precisa mais ser apagado.

Você também pode considerar usar canetas coloridas (ou lápis coloridos) para diferenciar elementos e dar mais sentido ao wireframe. Por exemplo, uma cor para um grupo de elementos pode ser útil, pois ajuda a identificar instantaneamente outros itens.

Wireframe com papel e caneta em papel quadriculado

Programas para criação de wireframes

Existem diversos programas para criar wireframes disponíveis no mercado. Alguns são pagos, outros de graça, outros mais completos e alguns nem tanto; mas todos com o objetivo de ajudar na criação de wireframes para facilitar e agilizar o processo de desenvolvimento web.

Recomendamos fortemente que dê uma lida no artigo “Ferramentas para criação de wireframes“. Lá você vai encontrar uma boa lista com os principais programas para criação de wireframes com descrição e imagem de cada um.

Modelos para wireframes

Usar modelos (templates) para criar seus wireframes pode acelerar bastante o processo, especialmente se você optar por usar caneta e papel ou programas que são capazer de cumprir este propósito (como o Adobe Illustrator). Veja alguns bons modelos, kits e elementos de interface gratuitos para serem usados na elaboração de wireframes:

• Free Web UI Wireframe Kit. Fuel You Interface oferece, neste kit, diversos elementos para wireframes, tais como botões, breadcrumbs, caixas de diálogo, campos de busca e mais.
• Yahoo! Developer Network Design Stencils. Conhecidíssimo set de UI da Yahoo! para o desenvolvimento de wireframes. Eles disponibilizam os modelos para vários programas como OmniGraffle, Visio, Illustrator e Photoshop.
• Wireframe Symbols. Contém formas e elementos diversos, como botões, cabeçalhos, listas e tabelas para criar wireframes com o Illustrator.
• Free Sketching & Wireframing Kit. Conjunto de elementos para wireframe disponível em vários formatos de arquivo: Adobe Illustrator, SVG, PDF e EPS.
• Sqetch. Kit para Illustrator que inclui modelos e elementos, incluindo para iPad, elementos GUI e elementos de formulário.
• Dragnet Kit for Fireworks. Kit para Adobe Fireworks que inclui uma variedade de elementos da interface como botões, menus, combobox e abas.

Frequentemente esta lista com modelos para wireframes será revisada e novas fontes serão incluídas. Portanto, fique atento a este artigo para saber quando novos recursos forem disponibilizados.

Utilize wireframes para pensar o projeto

Wireframe manual

Trabalhar com wireframes pode ser uma ótima maneira de pensar o design de um projeto web sem gastar horas trabalhando em modelos no Photoshop ou codificando projetos preliminares. A flexibilidade dos wireframes permite trabalhar com diversas idéias de design e layout rapidamente e com pouco custo.

Dê uma olhada nos documentos de especificação de projeto; eles dirão quais elementos são necessários para o site. Em seguida, comece a organizar tudo em wireframes. Não tenha medo de tentar coisas não tradicionais nesta fase. Lembre-se: são apenas wireframes. Um erro ou uma tentativa fracassada neste momento, não definirá um fracasso ou fará com que você tenha muito retrabalho. Libere sua criatividade nesta fase!

Wireframes como resultado final do projeto

Apresentar wireframes para o cliente pode ser uma valiosa forma de se certificar de que todos estão em sintonia com o projeto antes de criar os modelos do projeto real. É muito mais fácil alterar a posição dos elementos quando você está trabalhando com wireframes do que quando está com o projeto no Photoshop ou páginas já codificadas.

Se for esse o caso, de haver a etapa de apresentação dos wireframes, isso também pode mostrar a habilidade do designer e agrega valor ao projeto, como um todo. Certifique-se, portanto, de que a etapa para criação, apresentação e aprovação dos wire frames constam no escopo do projeto – e isso acarreta em um impacto no tempo total, obviamente – e, por consequência, haverá um impacto no processo geral de design.

Wireframe em rascunho x Wireframe elegante

Um dos maiores considerações ao criar wireframes que será apresentado é a forma como eles devem parecer. Geralmente há duas formas de pensar sobre este assunto. Um ponto de vista sobre esta debate wireframe em rascunho contra wireframes elegantes (mais bem elaborados/apresentados) afirma que: tudo o que será apresentado a um cliente deve ser o mais polido e formalizado possível.

O outro ponto de vista argumenta que oferecer ao cliente um wireframe “polido” faz do cliente menos propensos a solicitar alterações, já que as coisas passam o sentimento de “finalizado”. Em outras palavras, wireframes em rascunhos dão mais margem para que o cliente não goste do resultado e/ou solicite mudanças. Há prós e contras em cada uma das abordagens.

Wireframes elegantes muitas vezes podem ajudar um cliente a visualizar melhor o layout do site e ter uma ideia melhor de como tudo vai funcionar e se parecer. Acrescentando coisas como cor ou gráficos você chega ainda mais perto deste objetivo. No entanto, você corre o risco de que seu cliente não oferece um feedback verdadeiro por sentir que a proposta já está “muito finalizada”.

Wireframe elegante

Por outro lado, wireframes em forma de rascunhos são mais como “idéias cruas” e parecem mais convidativos ao feedback do cliente. A desvantagem é que os clientes que não são particularmente orientados visualmente – ou que não têm familiaridade com o que wireframes são – podem ter dificuldade em imaginar qual realmente é a proposta e como o site irá se parecer no final de todo o desenvolvimento.

Recursos de wireframes

Para concluir este guia sobre desenvolvimento de wiframes, aqui estão diversos recursos na web dedicados ao design/produção de wireframes:

• I ♥ Wireframes Flickr Group. Milhares de wireframes para se ver e milhares de membros cadastrados colocando novos conteúdos com frequência.
• I ♥ Wireframes Tumblr. Excelente lugar para se ver muitos wireframes e se inspirar (é associado ao grupo do Flickr acima).
• Wireframe Showcase. Site que apresenta um “antes e depois”, mostrando wireframes com seus respectivos projetos finais. Excelente!
• Wireframes Magazine. Cobre todas as coisas relacionadas a wireframe, incluindo toneladas de stencils e modelos, bem como exemplos para inspiração.

Esta lista de recursos para wireframes será constantemente atualizada. Fique ligado!

Conclusões

Depois de acompanhar este guia completo de wireframes, é possível chegar a algumas conclusões importantes sobre o assunto.

Como o wireframe deve ser, depende do objetivo do projeto e/ou do perfil do cliente. Caso haja maior espaço para troca de ideias, opte pelo wireframes no estilo rascunho; caso apresente algo mais elegante, um wireframe melhor trabalhado – podendo até conter cores, gráficos, etc -, o impacto da apresentação é melhor, contudo, isso não abre tanto espaço para discussões, pois causa sentimentos de completude e imutabilidade.

De qual maneira se vai fazer os wireframes, também é algo opcional: há pessoas que preferem wireframes em papel e caneta; outros em programas de editoração de imagens; e ainda os que preferem programas específicos para construção de wireframes, modelos e protótipos. Mais uma vez, é você quem decide qual destes será melhor.

Deve haver, no projeto, a importantíssima etapa de elaboração de wireframes. É preciso que dentro do prazo – e orçamento – conste os períodos estimados para a feitura, edição, entrega, feedback e revisão de cada wireframe. É logicamente mais rápido, fácil e dispende menos recursos financeiros se alterar elementos num wireframe do que numa estrutura HTML/CSS já pronta.

Caso queira que seu projeto dispense retrabalhos e que possíveis mudanças sejam pensadas e mostras de maneira mais rápida, podendo ser feitas com um custo baixíssimo, então usar wireframes em seus projetos é de extrema importância!

Artigos Relacionados

• 4 elementos de design para um bom call to action
• User Interface em dicas rápidas
• Elementos de design aplicados à web
• 10 erros básicos de web design
• Melhores editores WYSIWYG para seu projeto
• Breadcrumbs: guia completo com exemplos e melhores práticas
• Diferenças entre IDs e Classes
• 10 dicas que desenvolvedores web iniciantes devem saber
• Como otimizar códigos jQuery e aumentar a performance do front-end
• JSON – JavaScript Object Notation

Uma das principais áreas do desenvolvimento web é o web design. Ao se comunicar com outras áreas correlatas, é  através de um bom planejamento visual que o web design proporciona uma boa experiência visual ao visitante, garantindo que a qualidade do projeto web seja incrementada e esteja mais perto do sucesso!

O contrário disso é um web design que não consegue atender às necessidades do projeto e acaba por piorar a situação… Para corrigirmos um problema, é preciso conhecê-los antes; por isso, vamos a essa lista de 10 erros básicos de web design que você deve evitar!

Acredito que as pessoas têm tanta experiências em ver/analisar web design quanto é seu tempo de navegação na web. Eu poderia garantir que você vê mais web design ruim do que bom. Eu também vejo dessa maneira: existe um monte de sites que tem web design ruim. A seguir, veja 10 erros básicos de web design para que você possa analisar e saber o que não deve fazer em seus sites!

Erro básico de web design 1: usar fontes ruins

Sabe quando você visita um site com com uma fonte tão estranha ou extravagante que fica muito difícil de ler? Determinadas fontes “extravagantes” não devem ser usado no corpo do texto, caso contrário, o leitor não será capaz de ler e/ou a leitura ficará tão cansativa a ponte de fazer com que esse visitante desista da leitura e abandone o site.

Use fontes que são fáceis de ler!

Outro erro é que algumas pessoas usam fonte não-padrão em seus sites. Se o seu leitor é apenas uma pessoa comum que não têm tantas fontes adicionais instaladas, ele vai se confundir e dizer: “Por que é que o tamanho da fonte deste site é tão pequena?”. Infelizmente, isso faz as pessoas se queixarem sobre o site. Basta usar font comuns como Arial, Helvetica, Verdana, Georgia, ou Times New Roman, que a grande maioria tem em seu computador.

Erro básico de web design 2: não usar imagens, apenas texto puro

Acredite, as pessoas vão ficar entediadas se veem apenas texto e deixarão seu site uma vez que estão cansados ​​de ler um oceano de palavras… Isso é internet, não um livro de auto-ajuda. Se você não tem idéia sobre que imagem você deve colocar, basta usar qualquer imagem relacionada com o título do conteúdo. Evite deixar o “corpo” do texto sozinho, sem qualquer imagem.

Obviamente que existem algumas (que podem ser consideradas) exceções, como manuais técnicos, sites com tutoriais específicos e afins. Mas, ainda nestes casos, sempre que possível é interessante inserir algumas imagens/ilustrações contextualizadas.

Erro básico de web design 3: textos longos sem parágrafos

Mesmo que você tenha inserido imagens no conteúdo de seu site, é importante lembrar de separar as coisas usando parágrafos. Imagine que você está lendo um artigo com mais de 500 palavras sem qualquer parágrafo. É cansativo e pode ser confuso! Com algumas frases separadas por parágrafos, as pessoas conseguirão ler seus conteúdos com mais facilidade.

Mas acho que todos que cursaram o primário já sabem disso, não é?  ;-)

Erro básico de web design 4: fonte muito pequena

Alguma vez você já visitou um site e você teve que ampliar o tamanho da fonte através de recursos do navegaor para ler o conteúdo? Isso é ruim. Faça com que seu texto tenha um tamanho equivalente de, pelo menos, 12pt, para se certificar de que o conteúdo será legível o suficiente. Se não, as pessoas terão que apelar para ferramentas de terceiros e, certamente, podem querer ir para um site que não tenha o mesmo problema…

Adicionalmente, você pode fornecer aos visitantes uma ferramenta simples para controle do tamanho da fonte. Com isso, mesmo usando o texto com um tamanho mínimo aceitável, os visitantes que, mesmo assim, quiserem algo maior, terão essa possibilidade de personalização e facilitação de sua leitura.

Erro básico de web design 5: flash muito pesado

Quando se opta por utilizar Flash em um site, geralmente o objetivo é agregar valor à percepção visual dos visitantes. Infelizmente, o uso do flash faz com que o site seja mais lento para abrir e aumenta as chances de os visitantes deixá-lo rapidamente. Reduza o uso de Flash, a menos que seja extremamente necessário para alguma função específica.

Assim que o HTML5 ficar mais madura e amplamente utilizado, provavelmente esta dica ficará obsoleta.

Erro básico de web design 6: texto por cima de background coloridos

A maioria dos web sites usam backgrounds de cor única para melhorar a legibilidade. Se você pensa que usar fundo colorido vai tornar as coisas melhores e mais agradáveis, você está absolutamente errado! Isso só faz as pessoas ficarem cansadas de ler seu conteúdo, porque a cor do texto se mistura com o background.

Perceba que não há “proibições” em usar cores para o background, o problema está em usar patterns ou imagens sem tratamento algum que, inevitavelmente, fazem com que a experiência de leitura seja um desastre… Bom senso, pessoal!

Erro básico de web design 7: publicidade demais

Provavelmente você já deve ter visto sites cheio de banner e anúncios de publicidade, das mais variadas maneiras e possibilidades cabíveis. Você, mesmo, pode dizer o quão desagradável isso é, sem ninguém falar pra isso pra você. Jamais priorize anúncios em detrimento do conteúdo!

Bons web sites sempre colocam anúncios em lugares estratégicos de modo a não incomodar o visitante e não atrapalhar o conteúdo principal. Inspirar-se nos bons geralmente é uma boa estratégia.

Erro básico de web design 8: pop ups indesejados

Eu odeio (e tenho certeza de que você, também) sites com pop-ups indesejáveis! Eles realmente irritam! Eu quero olhar para a informação, mas o pop up interfere e faz com que eu perca meu tempo. Existe um motivo pra isso, claro, mas isso continua sendo um ato odiável…

Erro básico de web design 9: conteúdos muito extensos

Conteúdos (como artigos, por exemplo) muito extensos causam um efeito: geralmente as pessoas ficam entediadas para lê-los… Algumas pessoas apregoam a diretiva de que conteúdos devem ter, no máximo, 1000 palavras – com alguma adição de imagem para torná-lo mais atraente do que um texto simples. Pessoalmente, não sou muito apegado a números precisos e sim ao bom senso. Este artigo que você está lendo neste exato momento, por exemplo, tem mais de 1000 palavras mas, segundo o contexto em que está, não é cansativo.

O importante é fazer suas palavras simples e compreensíveis e ter em mente que a maioria das pessoas não gosta de artigos muito longos, mas que isso não é uma verdade absoluta e que esta “regra” pode ser “flexível”, dependendo do nicho a que o conteúdo está destinado.

Erro básico de web design 10: links invisíveis

Certifique-se de que a cor do link tenha uma cor diferente do texto simples. Simplesmente isso. Isso ajuda o leitor a identificar quais os links que visitaram e também o ajuda a não clicar nos links sem querer. Uma dica básica sobre boas user interfaces que é preciosa e não deve ser negligenciada.

Alguns ainda afirmar que a cor dos links deve ser diferente da cor dos títulos. Pessoalmente, não vejo muita necessidade para isso já que, teoricamente, a apresentação de um título é bem diferente da apresentação de um link textual. De qualquer forma, fica a seu critério.

Conclusão sobre erros de web design

Como vimos, estes são 10 erros básicos de web design que você deve evitar cometer em seus projetos web. Evidentemente, nenhuma das dicas aqui apresentadas são inflexíveis e/ou constituem-se verdades absolutas. Como já tivemos a oportunidade de ressalvar em diversos artigos aqui no desenvolvimento para web, no fim das contas, o que melhor guia seu projeto ao sucesso é o seu bom senso!

E você, apontaria mais algum erro básico de web design? Comente!

Artigos Relacionados

• Elementos de design aplicados à web
• Wireframes para web: guia completo de desenvolvimento
• Rolagem com fundo transparente com CSS
• 7 ferramentas para web designs melhores
• 4 elementos de design para um bom call to action
• User Interface em dicas rápidas
• Diferenças entre IDs e Classes
• CSS float: considerações, dicas e macetes para bons layouts na web
• Gestalt aplicado ao design web (parte 6): princípio da experiência passada
• Gestalt aplicado ao design web (parte 5): exemplos web do princípio do alinhamento

Já não é nenhuma novidade no mundo de desenvolvimento web o uso e abuso da tecnologia JSON. Entretanto, nem todos conhecem este padrão de intercâmbio facilitado de dados entre aplicações. Não é obrigatório, mas saber JSON pode ser bastante útil em projetos um pouco mais sofisticados e/ou que necessitam de uma demanda/política de transferência de dados mais simples, leve e eficiente.

Usar JSON proporciona inúmeras vantagens ao desenvolvedor web. Desde a simplicidade em tratar os dados à maneira fácil como é possível integrar tecnologias client-side com server-side, o JSON certamente é bastante recomendado.

O que é e para que serve JSON

JSON é o acrônimo para “JavaScript  Object  Notation“. Como é possível notar pelo nome, originalmente o JSON foi concebido para se trabalhar com javascript, mas, já adiantando, não é necessariamente obrigatório o uso de javascript para seu uso, dado que, atualmente, é possível utilizar JSON com mais de 20 linguagens de programação diferentes.

Uma definição interessante é a do Wikiédia:

JSON (com a pronuncia djeisón), um acrônimo para “JavaScript Object Notation”, é um formato leve para intercâmbio de dados computacionais. JSON é um subconjunto da notação de objeto de JavaScript, mas seu uso não requer javascript, exclusivamente.

O formato JSON foi originalmente criado por Douglas Crockford e é descrito no RFC 4627. O media-type oficial do JSON é application/json e a extensão é .json.

Mas uma definição que explica, de forma bem mais simples e objetiva, é a de Tiago Belem, em seu artigo “Introdução a JSON e PHP“, no qual consta que

JSON é um padrão de formatação de dados que serão transmitidos entre duas aplicações de linguagens diferentes.

Quer dizer, JSON é usado, principalmente, para permitir a troca de dados entre linguagens. Mas não só isso, ele também é ótimo para lidar com webservices e tem muitos outros usos.

Vantagens em se usar JSON

A descrição de dados em JSON é bem fácil, não passando de um documento de texto puro disposto em um padrão simples. Conforme foi explicado, JSON é excelente para intercâmbio de informações entre aplicativos.

Mas também existem outras maneiras de se fazer isso, por exemplo, com XML. Entretanto, o JSON apresenta vantagens bastante interessantes, o que, após uma análise do caso de seu aplicativo ou sistema web, pode levá-lo a optar por ele. Algumas das vantagens são:

• Sintaxe simples, de fácil aprendizado e implementação;
• Tamanho do arquivo bem menor em relação a outras “linguagens intermediárias”, tais como XML;
• Facilidade de desenvolvimento e alto desempenho nas aplicações que o utilizam.

Estruturas JSON

É possível ver alguns diagramas das estruturas no próprio site oficial do JSON; basicamente, é o seguinte:

Vamos ver, então, como podemos descrever dados simples usando o que a sintaxe que ele nos oferece.

Arrays

Por exemplo, vamos ver como seria um array dos dias da semana:

["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado"]

Perceba que strings devem ser indicadas com aspas duplas.

Elementos separados por vírgulas entre colchetes é a notação JSON para um array (naturalmente, a vírgula delimita cada item). A maioria dos desenvolvedores prefere identar um pouco o código para facilitar a leitura:

[
	"Domingo",
	"Segunda",
	"Terça",
	"Quarta",
	"Quinta",
	"Sexta",
	"Sábado"
]

É possível, também, misturar diversos tipos de dados em um só array:

[
	33,
	"Segunda",
	TRUE,
	3.14159265,
        NULL,
        "maçã"
]

Objetos

Como vimos, arrays são representados por colcechetes. No caso de objetos, estes são representados por chaves; cada chave é identificada por uma string e, depois de um dois-pontos, os valores de cada item especificados. Fica mais claro com um exemplo:

{
	"Domingo" : "Folga",
	"Segunda" : "Viagem",
	"Terça"   : "Pagamentos",
	"Quarta"  : "Piscina",
	"Quinta"  : "Churrasco",
	"Sexta"   : "Carteado",
	"Sábado"  : "Festa"
}

Perceba que não tem importância haver espaços a mais ou a menos entre a descrição da chave, o separador “:” e o valor desta. Tudo será interpretado corretamente.

Alguns exemplos

É bastante simples descrever JSON, você viu. Como os objetos de qualquer outra linguagem de programação, é possível armazenar quaisquer tipos de dados e quantos dados se desejar. Veja este exemplo:

{
    "Marconildo":
    {
        "url": "http://www.marconildo.com.br/",
        "idade": 34
    },
    "Joanorta":
    {
        "url": "http://www.joanorta.com.br/",
        "idade": 22
    },
    "Estripafurgia":
    {
        "url": "http://www.estripafurgia.com.br/",
        "idade": 47
    }
}

Perceba que, neste caso, cada objeto possui, “url” e “idade” (provavelmente este não seria um exemplo “da vida real”, mas dá para ilustrar bem o conceito), mas, não necessariamente, todos devem possuir o mesmo número de propriedades. Poderia haver um ou mais elementos com “url”, “idade”, “altura”, “endereco”, etc. É possível, inclusive, a utilização de arrays:

{
    "Marconildo":
    {
        "url": "http://www.marconildo.com.br/",
        "idade": 34
    },
    "Joanorta":
    {
        "url": "http://www.joanorta.com.br/",
        "idade": 22
    },
    "Estripafurgia":
    {
        "url": "http://www.estripafurgia.com.br/",
        "idade": 47,
    	"diasDeTrabalho":
	 [
	     "Segunda",
	     "Quarta",
	     "Sexta"
	 ]
    }
}

E, até, um array de objetos!

{
    "Marconildo":
    {
        "url": "http://www.marconildo.com.br/",
        "idade": 34
    },
    "Joanorta":
    {
        "url": "http://www.joanorta.com.br/",
        "idade": 22
    },
    "Estripafurgia":
    {
        "url": "http://www.estripafurgia.com.br/",
        "idade": 47,
    	"dependentes":
    	[
    	    "Astolfinho":
	    {
	        "sexo" : "m",
	        "idade": 16
	    },
    	    "Mariazinha":
	    {
	        "sexo" : "f",
	        "idade": 10
	    }
    	]
    }
}

JSON e javascript

Agora você já aprendeu as notações básicas do JSON, mas o que fazer com isso, como usar, efetivamente, o poder do JSON nas aplicações do dia-a-dia usando javascript? Veja um exemplo simples:

var funcionarios = '
	{
	    "Marconildo":
	    {
	        "url": "http://www.marconildo.com.br/",
	        "idade": 34
	    },
	    "Joanorta":
	    {
	        "url": "http://www.joanorta.com.br/",
	        "idade": 22
	    },
	    "Estripafurgia":
	    {
	        "url": "http://www.estripafurgia.com.br/",
	        "idade": 47
	    }
	}
';
 
var funcionario = JSON.parse(funcionarios);
 
alert(funcionario.Marconildo);
alert(funcionario.Marconildo.idade);

Foi criada a variável “funcionarios” e colocado uma string JSON nela. Usando a função JSON.parse, convertemos a string para, efetivamente, JSON na variável “funcionario”e, a partir daí, foi possível acessar todas suas propriedades com a notação padrão de OO.

Esse foi um exemplo ilustrativo. Em aplicações “de verdade”, seria bastante eficiente, por exemplo, realizar requisições em AJAX para procurar retornos em JSON e, a partir daí, realizar quaisquer tipos de operação com o data retornado. Trataremos disso em artigos futuros. Assine o feed para conferir.

$.getJSON

O jQuery possui uma poderosa ferramenta para trabalharmos com JSON, é a função $.getJSON, que serve para carregar dados no formato JSON usando requisição HTTP GET. Na verdade, esta função é somente uma espécie de atalho para $.ajax() usando “json” no dataType, mas usá-la num contexto JSON fica bastante coerente.

Não há mistério algum para usar, ele segue a mesma “linha” do $.ajax(), como podemos encontrar neste exemplo disponibilizado no próprio site do jQuery:

$.getJSON('ajax/test.json', function(data) {
  var items = [];
 
  $.each(data, function(key, val) {
    items.push('<li id="' + key + '">' + val + '</li>');
  });
 
  $('<ul/>', {
    'class': 'my-new-list',
    html: items.join('')
  }).appendTo('body');
});

E, como nos mostra Gabriele Romanato, é possível verificar se o resultado da requisição é realmente um objeto JSON de maneira simples:

$.getJSON(url, function(data)) {
  if(typeof data !== 'object') {
    // Erro!
  }
});

Dessa maneira, é possível economizar bastante tempo ao procurar erros e a estrutura de código fica mais profissional e mais facilmente manutenível.

JSON e PHP

O PHP também possui algumas funções para se trabalhar com JSON. Vamos a um exemplo simples de como gerar PHP a partir de JSON:

$funcionarios = '
	{
	    "Marconildo":
	    {
	        "url": "http://www.marconildo.com.br/",
	        "idade": 34
	    },
	    "Joanorta":
	    {
	        "url": "http://www.joanorta.com.br/",
	        "idade": 22
	    },
	    "Estripafurgia":
	    {
	        "url": "http://www.estripafurgia.com.br/",
	        "idade": 47
	    }
	}
';
 
$funcionario = json_decode($funcionarios);
 
echo $funcionario->Marconildo . '<br />';
echo $funcionario->Marconildo->idade;

Bem simples, bem direto, dispensa explicações. Agora, se você preferir tratar o JSON como se fosse array, basta inserir um segundo parâmetro à função, dessa maneira:

$funcionario = json_decode($funcionarios, TRUE);

Ferramentas JSON

JSON é bastante simples e intuitivo para qualquer programador, mas, para quem está começando a mexer agora e/ou para os que precisam de algumas ferramentas para JSON, segue o link de alguns parser, validadores e ferramentas, em geral, para se trabalhar com JSON:

• Json Parser Online
• JSONLint – The JSON Validator
• Online JSON Viewer
• Convert JSON Strings to a Friendly Readable Format

Conclusão sobre JSON

Uma das principais funcionalidades do JSON é o intercâmbio de dados entre aplicativos e linguagens diferentes. Sua sintaxe simples, sua leveza e objetividade, aliados ao suporte por dezenas de linguagens de progrmação o tornam uma excelente alternativa quando a necessidade é esta. O fato de milhares de webservices de qualidade usarem JSON deve ser um bom indicativo de que usá-lo é uma boa escolha.

Usando as ferramentas apresentas, é possível validar seu JSON, testá-lo, verificar se está produzindo uma hierarquia correta, enfim, aperfeiçoar e refinar o código para que atinja o máximo possível de desempenho. Ao se trabalhar com JSON, logo se percebe seu poder e simplicidade, o que agiliza bastante o processo de programação, ao mesmo tempo em que o formato não se torna um empecilho à produtividade; pelo contrário, a aprimora!

Por essas e outras a notação JavaScript Object Notation, mais conhecida como JSON, é altamente recomendada para desenvolvimento web!

Artigos Relacionados

• Erros comuns em desenvolvimento web para campanhas de SEO
• Breadcrumbs: guia completo com exemplos e melhores práticas
• Perguntas ao cliente para antes e depois de um projeto
• 6 mitos de SEO que você deve evitar
• Mastering Twitter, o manual completo sobre twitter para desenvolvedores e marketeiros
• 8 características de User Interfaces (UI) de sucesso
• Como criar sumários dinamicamente com o TOC (Table of Contents) jQuery plugin
• Web sites e comunicação: 21 maneiras de os sites se comunicarem com seus visitantes
• Meta tags
• Maneiras práticas para melhorar a visitação de seu blog e fidelizar seus leitores

Recentemente, uma leitora do blog escreveu pedindo algum material sobre cores na web, perguntando se poderia publicar um artigo sobre este assunto tão importante no desenvolvimento para web. Como já tivemos a oportunidade de mostrar, as cores são uma das maneiras de os sites se comunicarem com seus visitantes, imprescindível para se fazer web sites de qualidade.

O assunto, além de complexo e, em alguns pontos, controverso, é bastante amplo. Por isso, ao invés de escrever um artigo ou uma série a respeito, decidi que a contribuição seria maior ao indicar fontes e referências sobre o tema. Certamente compartilhar o que outras pessoas já escreveram sobre as cores na web (e cores, em geral) será uma contribuição muito maior.

Referências sobre teoria das cores para web

O uso da teoria das cores na web, na verdade, não é assunto exclusivo da web. O que se faz é pegar todo o este conteúdo teórico e, simplesmente, realizar algumas adaptações para que este seja mais “compatível” e traga resultados mais eficientes no ambiente online. Portanto, quando se faz este tipo de estudo, você encontra os mesmos termos, terminologias, conceitos e constatações, seja no “mundo online” ou “mundo offine”.

Então, uma boa forma de começar o estudo das cores é acessando o site de Maria Claudia Cortes, Color in Motion, no qual, através de interações do próprio visitante, ela mostra o significado, melhor combinação, efeitos psicológicos, significado nas diferentes partes do mundo, etc, das cores vermelho, laranja, amarelo, verde, azul e roxo. Além disso, há uma animação que envolve os personagens das cores, mostrando algumas das principais respectivas características. Realmente vale a pena o acesso!

É importante, também, já que o assunto são cores na web, conhecer um pouco da parte técnica que envolve a exibição de cores em monitores, diferença entre CMYK (real) e RGB (virtual), diferença ao representar as cores usando RGB ou Hexadecimal, dentre outros. E, para isso, existe uma explicação-base bastante simples de se entender, que pode ser encontrada no site da Hi-Midia, em um artigo sobre as cores na web.

Uma das grandes referências na área é Daniele Viana que, em seu blog, fez uma série de artigos a respeito. O interessante é que, dentre esses artigos, existem aqueles que abordam, especificamente, as principais cores e seus efeitos em web designs. Artigos estes que, numa disposição didática, seriam:

• O uso das cores em webdesign
• Breve análise das cores
  • Amarelo
  • Azul
  • Cinza
  • Laranja
  • Marrom
  • Preto
  • Rosa
  • Roxo
  • Verde
  • Vermelho
• Como criar combinações de cores mais inteligentes

Ferramentas para cores na web

Já tivemos a oportunidade de mostrar algumas ferramentas para cores na web, como, por exemplo, o Colorblind Web Page Filter. Mas, para compor este artigo melhor, faz-se necessária uma lista mais incrementada. Portanto, segue uma lista completa de ferramentas de cores para web:

• Amostras/Combinações de cores
  • 0to255
  • Color Schemer Scheme Gallery
  • COLOURlovers
  • ColorBurn Winners
  • Color Combos
  • Color Schemes
  • Kuler
• Montagem de esquemas de cores
  • Color Blender
  • Color Jack: Sphere
  • Color Palette Generator
  • Color Scheme Designer
  • Color Schemer Online
  • EasyRGB: Color Harmonies
• Cores a partir de imagem
  • Color Palette Generator
  • Palette Generator
  • What’s Its Color
• Outros
  • Color Blender
  • Colour Check
  • Colour Selector
  • I Like Your Colors

Conclusão

Quando se trata de cores e exibição de imagens na web, algo que deve ser feito depois de o serviço feito, é “ajustar” o trabalho para a web. Então, confira o artigo “Como otimizar imagens para web – guia de otimização de imagens“.

Existem muitos e muitos sites que tratam sobre a teoria das cores na web. Alguns tratam de forma mais geral; outros mais pormenorizada. Mas são tantos e tantos que tentar sistematizar todos em um único artigo é algo bastante difícil de se fazer. Portanto, caso tenha algum complemento a fazer e/ou ferramenta para indicar, comente!

Artigos Relacionados

• CSS float: considerações, dicas e macetes para bons layouts na web
• Gestalt aplicado ao design web (parte 6): princípio da experiência passada
• Gestalt aplicado ao design web (parte 5): exemplos web do princípio do alinhamento
• Gestalt aplicado ao design web (parte 4): princípio da boa continuidade ou princípio do alinhamento
• Gestalt aplicado ao design web (parte 3): exemplos web do princípio da proximidade
• Gestalt aplicado ao design web (parte 2): princípio da proximidade
• Gestalt aplicado ao design web (parte 1): origem do termo, significado e utilidade
• Estratégia de Conteúdo ou Content Strategy
• Elementos de design aplicados à web
• 10 erros básicos de web design

Quando o assunto é desenvolvimento web, os visitantes de sites não têm muita paciência para esperar… Estudos mostram que se o site não apresentar algum feedback (mostrar alguns elementos/conteúdos) em poucos segundos, a pessoa desiste de esperar e abandona o site – com grandes probabilidades de não mais retornar.

Uma das funções mais interessantes é apresentar um loading (vulgo “carregamento”) indicando quantos por cento (%) do site estão carregados e o que ainda falta, mostrando para o visitante este feedback que ele precisa para ter certeza de que “coisas” estão acontecendo.

Depois do advento do AJAX, nos anos 90 do século passado, e surgimento de muitos bons frameworks para front-end depois disso, tais como jQuery, os programadores contamos com excelentes ferramentas e recursos para acelerar o carregamento e melhorar a performance de sites, sendo possível realizar funções, efeitos e interações que, pouco tempo atrás, não eram sequer imaginadas.

Uma das interações é fazer loading em conteúdos do site, ou, mesmo, em páginas inteiras do site, e uma das maneias de se fazer isso é usando o plugin para jQuery jLoader.

jLoader: dinâmica

É possível ver no site oficial do jLoad que está licenciado sob a GNU GPL v3, então seu uso é grátis e pode ser feito sem maiores complicações.

O que o plugin permite é mostrar uma barra de carregamento para elementos específicos da página (lembrando que “body” também é um elemento da página). Quer dizer, é possível tanto carregar elementos específicos da página (e o jLoader permite fazer múltiplos carregamentos simultâneos), quanto carregar a página inteira, colocando o loader no documento inteiro.

Algumas das características do jLoader são:

• Múltiplos loadings simultâneos na mesma página
• Acompanha redimensionamento da janela
• Se o elemento-alvo tiver imagem de background ou for uma imagem, isso é levado em consideração
• Função para interromper loadings em triggers de eventos
• Dentre outros

jLoader: funcionamento

O plugin é leve (8KB) e conta com somente 1 arquivo (nada de CSS externo). Como citado, é possível fazer carregamento para vários elementos da página ao mesmo tempo; para cada um deles, o método construtor pode receber argumentos de personalização:

• overlayColor. Hexadecimal da cor de background do loading (padrão “#000″).
• userCallback. Função para quando o carregamento termina (padrão “null”).
• showProgress. Se a barra de loading vai ou não aparecer (padrão “false”).
• showProgressText. Se o número da porcentagem vai ou não aparecer (padrão “false”).
• progressColor. Hexadecimal para a cor da barra de progresso (padrão “#FFF”).
• textColor. Hexadecimal para a cor dos números da porcentagem (padrão “#FFF”).
• textSize. Tamanho do texto para os números da porcentagem (padrão “15″).
• loaderPosition. Reposiciona o loader no overlay; por padrão é centalizado (usa-se “loaderPosition:{top:y,left:x}”).

Não são tantas opções, assim, mas já dá para fazer um nível de personalização bem interessante. Vamos ver em alguns exemplos.

jLoader: exemplo 1

Como primeiro exemplo, vamos imaginar que queremos fazer loading em um elemento de id “escopo”, mostrando a barra de progresso e o texto da porcentagem de carregamento com texto 20 e, após o fim do carregamento, dar o trigger para a função showContent().

1
2
3
4
5
6
7
8
9
10
11
12

jQuery(document).ready(function($){
    var loader = new Loader('#escopo',
        {
	    showProgress:true,
	    showProgressText:true,
	    textSize:20,
	    userCallback:showContent
	}
    );
 
    loader.Start();
});

jLoader: exemplo 2

Loadin no elemento de id “noticias”, com fundo “#0B274C” e cor da barra de carregamento “#F6911E”.

1
2
3
4
5
6
7
8
9
10
11
12

jQuery(document).ready(function($){
    var loader = new Loader('#noticias',
	{
	    showProgress:true,
	    showProgressText:true,
	    overlayColor:'#0B274C',
	    progressColor:'#F6911E'
	}
    );
 
    loader.Start();
});

jLoader: exemplo 3

Loading o site inteiro, com todas as configurações padrão, exceto o tamanho do texto, que será “10″.

1
2
3
4
5
6
7
8
9

jQuery(document).ready(function($){
    var loader = new Loader('body',
	{
	    textSize:10
	}
    );
 
    loader.Start();
});

Outras customizações

Estamos falando de arquivos javascript, meus amigos, e, mesmo que não haja uma função pré-definida e/ou você queira fazer ajustes mais “pesados”, diretamente no core do plugin, basta abrir o arquivo que você baixou e realizar as mudanças que quiser…

Por exemplo, se quiser aumentar a espessura da barra de loading (que, por padrão, é de 1px), simplesmente abro o arquivo, procura o trecho de código que especifica essa características (na atual versão do jLoader, a 1.1.1, esta característica está na linha 139 do arquivo jLoader.js).

Assim como foi explicado no artigo sobre criação de URLs amigáveis com slugs, o mesmo vale para qualquer script pronto: basta abrir, estudar e fazer as modificações que cabem ao projeto/resultado pretendido.

Conclusão

Certamente, uma das maiores questões de muitos desenvolvedores é como fazer loading no site. Usando o jLoader, isto está resolvido.

Mas, atenção: não é só porque existe o recurso de carregamento, que este deve ser usado em todo e qualquer elemento de todos os sites do mundo… Há que se levar em consideração o escopo do projeto e se, realmente, existe a necessidade e/ou conveniência em usar o recurso.

Se realmente for necessário, use o jLoader para fazer loadings de elementos no site (ou páginas completas) e desfrute das facilidades de fazer isso de forma tão simples, aumentando a boa experiência que os visitantes terão!

Artigos Relacionados

• Como otimizar códigos jQuery e aumentar a performance do front-end
• 5 dicas para temas WordPress melhores
• Otimização WordPress: aumente a performance e desempenho de seu blog / site
• Como criar sumários dinamicamente com o TOC (Table of Contents) jQuery plugin
• 25 extensões para o Firefox para aumentar a produtividade no dia-a-dia na web
• Wireframes para web: guia completo de desenvolvimento
• Melhorando a interação em formulários de busca
• Textarea: dicas e truques que você sempre quis saber
• 8 maneiras de melhorar a performance de um site
• Melhores editores WYSIWYG para seu projeto

Muitas pessoas usam o WordPress como plataforma para blogging, sites, portais e outros tipos de projetos online. Depois de instalar o WordPress, a maioria dos usuários de WordPress normalmente vai em busca de um tema pronto para não usar o tema padrão que vem com o WP.

Quer você use temas gratuitos ou pagos (ou, mesmo, desenvolva seus próprios temas), existem muitas maneiras de melhorá-los através de dicas para fazer temas WordPress melhores!

Use favicon personalizado

Quando um site não tem um favicon personalizado, ele pode parecer não-profissional. Certifique-se que o seu tema WordPress tenha um favicon próprio. Você pode conferir uma lista de geradores de favicon para ajudar.

Para fazer referência ao seu ícone no WordPress, basta colocar o seguinte código, normalmente dentro arquivo header.php que pode ser encontrado na pasta raiz do seu tema (levando em conta que o arquivo da imagem também está na pasta raiz):

<link rel="icon" href="favicon.ico" type="image/x-icon" />

Estilize a legenda das imagens

Quando você faz upload de uma imagem para colocar em um post ou página do WordPress, dentre outras opções, é possível inserir uma legendas para colocar uma descrição para a imagem. Um bom tema WordPress deve incluir regras CSS para estilizar as legendas da imagens. Para estilizar as legendas segundo o padrão do WordPress, insira as seguintes linhas em seu arquivo CSS (geralmente chamado styles.css):

.wp-caption {
background-color: #f3f3f3;
border: 1px solid #ddd;
border-radius: 3px;
margin: 10px;
padding-top: 4px;
text-align: center;
 
-khtml-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
 
.wp-caption img {
border:0 none;
margin:0;
padding:0;
}
 
.wp-caption p.wp-caption-text {
font-size:11px;
line-height:17px;
margin:0;
padding:0 4px 5px;
}

Veja o artigo com o guia completo sobre breadcrumbs para visualizar imagens com captions estilizados corretamente.

Use PHP Flush

Chamando a função flush() do PHP imediatamente depois do cabeçalho HTML, você será capaz de acelerar seu site WordPress. Basta adicionar esta linha com a chamada à função após o </ head> (por padrão, no arquivo arquivo header.php):

<?php flush(); ?>

Esse código simplesmente força seu servidor web a enviar cabeçalho do site antes de enviar o restante do conteúdo. Usando a função flush(), o navegador tem tempo para baixar todas as folhas de estilo referenciadas no cabeçalho enquanto espera pelas outras partes da página.

Minimize os arquivos de seu tema WordPress

É muito útil ter os arquivos CSS e javascript de seu tema minimizados para reduzir seu tamanho, consequentemente realizando uma transferências de arquivos mais rápido, aumentando a velocidade do site, em geral. Minimizar os arquivos significa retirar caracteres desnecessários deles, como espaços e tabs (e, no melhor caso, juntar todos os arquivos do mesmo tipo em um só).

Existem diversas ferramentas gratuitas na internet para minimizar arquivos CSS e javascript. Para javascript, existem, dentre outros, os excelentes JavaScript Compressor, /packer/, jsCompress e YUI Compressor Online. Para fazer um minify em arquivos CSS, confira o item “Otimizadores e Formatadores de CSS” do artigo de ferramentas e recursos para desenvolvimento web.

Existem, também, vários plugins para WordPress para minimizar e otimizar os arquivos, como o WP Minify e W3 Total Chache, que fazem o serviço de minify de forma bastante transparente e, ainda, melhoram outros aspectos para otimização de temas WordPress, tais como manipulações de cache, combinação de arquivos, e outros para melhorar a velocidade do site.

Substitua funções e hooks por conteúdo estático

Os arquivos de temas que podem ser baixados na web precisam ser bem flexíveis, para atender ao maior número de pessoas que os queiram usar. Por isso, existem diversas chamadas a funções e hooks que permitem que um tema funcione nas mais diversas formas e situações.

No entanto, isso pode acarretar em uma perda de performance e desempenho das página, já que cada vez que uma página é gerada, ela precisa fazer várias chamadas a hooks/funções para renderizar a página.

Inspecione os arquivos do tema que você escolheu para seu site/blog e perceba as chamadas desnecessárias. Por exemplo, no header.php, você pode encontrar uma linha parecida com esta:

<title><?php bloginfo('name'); ?></title>

Essa função serve para mostrar o nome do seu site (definido nas configurações no Painel Administrativo) na barra de títulos do navegador. Na verdade, o nome do site não se altera quase nunca, então, para que deixar mais uma chamada a função? Isso consome recursos do servidor e reduz o tempo de carregamento do site. Você pode, facilmente, substituir por:

<title>Nome do Site<title>

Eis um outro exemplo do que pode ser encontrado no header.php:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />

Essa linha usa a função para referenciar o caminho de onde se encontra o arquivo “style.css” do tema. Mais uma vez, é possível poupar recursos do servidor com uma simples mudança:

<link rel="stylesheet" href="http://www.site.com/wp-content/themes/themename/style.css" type="text/css" />

Esses foram somente 2 exemplos, mas existem muitas outra chamadas a funções “desnecessárias” quando se baixa um tema, seja ele gratuito ou pago. Vasculhe os arquivos do tema usado e substitua por conteúdo estático sempre que possível.

E você, tem mais alguma dica para o desenvolvimento de temas WordPress melhores? Comente!

Artigos Relacionados

• Otimização WordPress: aumente a performance e desempenho de seu blog / site
• Truques de configuração do WordPress
• Como otimizar códigos jQuery e aumentar a performance do front-end
• Como fazer loading em conteúdos do site
• 15 fantásticos comandos SQL para WordPress
• Ferramentas e recursos para desenvolvimento web
• 8 dicas para fazer códigos melhores com jQuery
• Newsletter no WordPress com o plugin Ajax Newsletter (wp-ajax-newsletter)
• Pergunte-se a si mesmo: questões para desenvolver um bom site
• Como usar qualquer tipo (fonte tipográfica) em seu blog WordPress

Principalmente em blogs sobre desenvolvimento web – ou que não sejam, mas que precisem, eventualmente, apresentar URLs longas -, a indicação de endereços completos da internet e/ou da web geralmente se faz necessária. Mas é preciso saber como estilizar corretamente estes endereços através de regras CSS para que sua apresentação não fique “quebrada” dentro do layout feito.

Para apresentar corretamente URLs longas, seqüências de texto e outros conteúdos, basta utilizar esta regra CSS em qualquer elemento em nível de bloco (por exemplo, é perfeito para tags <pre>):

pre {
white-space: pre;           /* CSS 2.0 */
white-space: pre-wrap;      /* CSS 2.1 */
white-space: pre-line;      /* CSS 3.0 */
white-space: -pre-wrap;     /* Opera 4-6 */
white-space: -o-pre-wrap;   /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap;  /* HP Printers */
word-wrap: break-word;      /* IE 5+ */
}

Por padrão, o valor da propriedade white-space é definido como “normal”. Então, você pode ver algo como isto quando tenta “forçar” URLs longas e outras seqüências contínuas de texto:

Para “forçar” fragmentos de texto longos e contínuos que são “envolvidos” dentro da largura do <pre> (ou outro elemento nível de bloco, como <div> ou <p>), é necessário um valor diferente para a propriedade white-space. As opções possíveis são:

• normal. O valor padrão para a propriedade white-space. Sequências de espaços em branco são “recolhidos” a um único espaço em branco. O conteúdo de <pre> irá se adequar à largura do elemento.
• nowrap. Sequências de espaços em branco são recolhidos a um único espaço em branco. Os conteúdos de <pre> pulam de linha SOMENTE em elementos com <br />.
• pre. Todos os espaços em branco são preservados e o conteúdo de <pre> irá pular de linha de forma implícita. Esse é o comportamento padrão do elemento <pre>.
• pre-line. Sequências de espaços em branco se recolhem a um único espaço em branco; o conteúdo de <pre> irá dar wrap em espaços em branco e quebras de linha acontecem de acordo com a largura do elemento.
• pre-wrap. Todos os espaços em branco são preservados e o conteúdo de <pre> irá se comportar de acordo com os espaços em branco e quebras de linha de acordo com a largura do elemento.
• inherit. Valor de white-space herdado do elemento pai.

Em um mundo perfeito, nós poderíamos simplesmente usar “white-space:pre-line” dessa forma:

pre {
white-space: pre-line;
width: 300px;
}

Embora a propriedade white-space seja, teoricamente, suportada por todos os principais navegadores, infelizmente muitos deles falham e não conseguem aplicar corretamente a propriedade para strings longos.

Diferentes navegadores farão o wrap (“quebrar” o texto) em textos longos, mas exigem valores diferentes de white-space para trabalhar. Felizmente, podemos aplicar os valores necessários para cada navegador incluindo várias declarações de white-space. Essa é exatamente a solução apresentada no código CSS mostrado no início do artigo.

Os comentários incluídos na solução CSS mostram qual solução se aplica a cada browser. Observe que algumas das regras são específicas de alguns navegadores (veja os prefixos específicos dos fornecedores), enquanto outros declaram valores default a partir de diferentes especificações CSS.

A estranha propriedade “word-wrap” é uma invenção da Microsoft que foi incluído no CSS3. Graças às “CSS forward compatibility guidelines”, é perfeitamente possível incluir várias instâncias da mesma propriedade. Em poucas palavras:

• Propriedades não reconhecidas são ignoradas
• Para várias declarações da mesma propriedade, somente a última tem validade

A solução de código apresentada neste artigo parece funcionar bem em todos os navegadores, mas ela não valida (segundo o W3C) devido à louca propriedade da Microsoft.

Para ver os conceitos aqui mostrados na prática, veja uma página de exemplo e, para uma discussão mais completa sobre a quebra automática de texto, confira o artigo Perfect Pre Tags, também do blog Perishable Press.

Artigos Relacionados

• Estratégia de Conteúdo ou Content Strategy
• Elementos de design aplicados à web
• Wireframes para web: guia completo de desenvolvimento
• 10 erros básicos de web design
• JSON – JavaScript Object Notation
• Erros comuns em desenvolvimento web para campanhas de SEO
• URLs amigáveis (slug) à WordPress
• 15 fantásticos comandos SQL para WordPress
• Breadcrumbs: guia completo com exemplos e melhores práticas
• Ferramentas para criação de wireframes

É 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!

Artigos Relacionados

• Web sites genéricos e a ilusão dos preços baixos
• Estratégia de Conteúdo ou Content Strategy
• 10 dicas que desenvolvedores web iniciantes devem saber
• Elementos de design aplicados à web
• Wireframes para web: guia completo de desenvolvimento
• 10 erros básicos de web design
• JSON – JavaScript Object Notation
• Cores na web: guia completo
• Erros comuns em desenvolvimento web para campanhas de SEO
• Estratégia Web de Pirâmide: guia para uma estratégia de web equilibrada

Passar muitos argumentos no URL

Quando o site é dinâmico, os desenvolvedores web precisam ter uma referência sobre o qual a página, o produto ou categoria o visitante quer ver. Normalmente um ID é necessário para recuperar os dados do banco de dados. Em outros casos, devido à complexidade do projeto ou devido a más técnicas de programação, mais variáveis são necessárias para identificar uma determinada página. Aqui está um exemplo de um URL dinâmico:

http://www.exemplo.com/produtos.php?id=30&categoria=2&cor=verde

Infelizmente, este tipo de URL não é amigável nem para pessoas, nem para mecanismos de busca. Segundo é possível ler nas Diretrizes Técnicas das Diretrizes para Webmasters da Central do Webmaster Google,

Se você decidir usar páginas dinâmicas (por exemplo, o URL que contém um caractere “?”), saiba que nem todos os spiders de mecanismos de pesquisa rastreiam as páginas dinâmicas e estáticas. Isso ajuda a manter os parâmetros curtos e a quantidade desses parâmetros pequena.

Por isso, é altamente recomendado usar algum tipo de reescrita de URL, como mod_rewrite, para converter as URLs dinâmicas para URLs amigáveis. Qual é o risco, se isso não for feito? Bem, se há muitos parâmetros em URLs: os motores de busca podem não indexar as páginas; além disso, geralmente  URLs não amigáveis não contém palavras-chave importantes no endereço, então, não raramente você pode conseguirá rankings inferiores para essas páginas do que se elas tivessem URLs amigáveis.

Usar muito JavaScript, frames/iframes, AJAX, Flash e Silverlight

JavaScript, frames/iframes, AJAX, Flash e Silverlight são ferramentas úteis e alguns deles, quando bem usados, melhoram a experiência do usuário. Mas nenhum deles é search engine friendly.

As mesmas Diretrizes Técnicas do Google citadas, indicam:

Use um navegador de texto como o Lynx para examinar o seu site, pois muitos spiders de mecanismos de pesquisa veem o site do mesmo modo que o Lynx. Se recursos especiais como JavaScript, cookies, IDs de sessão, frames, DHTML ou Flash permitirem que você veja todo o site em um navegador de texto, os spiders dos mecanismos de pesquisa poderão ter dificuldade em rastrear o seu site.

Se o objetivo é que o site seja amigável aos mecanismos de busca, devemos verificar se eles podem ser vistos usando browsers de texto simples como o Lynx (que é como o googlebot “vê” os sites). É possível usar emuladores do Lynx ou desabilitar CSS e imagens diretamente no navegador (se usar, Firefox, uma ótima opção é usar o plugin Web Developer).

Não usar o atributo alt em imagens e não otimizar o caminho das imagens

Os motores de busca (e computadores, em geral) não são muito bons em identificar o que é representado em uma imagem. Portanto, a fim de compreender sobre o que uma imagem é, os bots analisam o nome e o atributo “alt” das imagens.

O Google Image Search pode trazer uma quantidade significativa de tráfego. Se você não garantir o “apoio” a mecanismos que permitam a otimização de imagens, você pode perder uma boa fonte de tráfego. Assim, garanta que você use corretamente ambos, o atributo alt e o nome da imagem – usar um CMS que permita esse tipo de otimização é uma boa dica.

Usar métodos incorretos para oferecer suporte a idiomas diferentes

Quando você tem sites multilíngue, tenha certeza de que a arquitetura está correta. Não há uma única forma “correta” para fazer isso. Basicamente, há três maneiras corretas para suportar um site em vários idiomas e cada um dos métodos a seguir tem alguns prós e contras:

• Subdomínios. Exemplo: fr.example.com, gr.example.com, etc
• Subdiretórios. Exemplo: www.example.com/fr/, www.example.com/gr/, etc
• Diferente domínios. Exemplo: www.example.fr, www.example.gr, etc

A dica é evitar o envio de conteúdo baseado em IP sem ter a mesma versão do site disponível para todos. Também não implementar soluções ruins como passar o idioma como uma variável GET, por exemplo www.example.com/?lang=fr.

Não se preocupar com o tempo de carregamento da página

Recentemente o Google informou que passou a usar a velocidade de carregamento dos websites em seus algoritmos de classificação (apesar de isso não estar valendo para sites de todos os países do mundo). Há um debate sobre se esse recurso deve ser incluído, uma vez que não tem nada a ver com a relevância de um site. No entanto, a velocidade aumenta a experiência do usuário. Além disso, ter um site leve, que carregue rapidamente, pode melhorar seu ROI e diminuir a carga do seu servidor (conheça 8 maneiras de melhorar a performance de um site).

7 dicas de desenvolvimento web

Algumas dicas para guiar o desenvolvimento de suas páginas web são:

• Colocar menus, cabeçalhos e rodapés em arquivos separados, a fim de realizar mudanças globais rápidas (funções “include);
• Tentar usar subdomínios em sites multi idioimas;
• Usar caminhos absolutos para cada página, imagem, CSS e javascript do site;
• Usar canonicals para evitar conteúdo duplicado;
• Usar redirecionamento 301 ao invés de 302 quando o caminho para a página mudar e nunca apagar páginas;
• Redirecione corretamente as versões sem “www” para as que tenham “www” e vice-versa;
• Não adicionar IDs de sessão nas URLs.

E você, conhece algum outro erro comum em desenvolvimento web que pode atrapalhar uma campanha de SEO e o que fazer para evitar/corrigir?

Artigos Relacionados

• Meta tags
• Maneiras práticas para melhorar a visitação de seu blog e fidelizar seus leitores
• Elementos de design aplicados à web
• JSON – JavaScript Object Notation
• Estratégia Web de Pirâmide: guia para uma estratégia de web equilibrada
• Breadcrumbs: guia completo com exemplos e melhores práticas
• 6 mitos de SEO que você deve evitar
• Como otimizar imagens para web: guia de otimização de imagens
• Mastering Twitter, o manual completo sobre twitter para desenvolvedores e marketeiros
• 8 características de User Interfaces (UI) de sucesso

Melhorar a interação do campo de busca de um site permite que as pessoas que usam tal formulário para buscar tenham uma melhor experiência de uso (leia-se: usabilidade). Com pequenos detalhes, um pouquinho de bom-senso e algumas poucas linhas de jQuery, é possível promover efeitos interessante no campo de busca.

Para ficar claro, será abordada a seguinte interação:

• Campo de busca é “populado” com um termo pré-definido;
• Quando o campo recebe o foco, caso tenha o termo pré-definido, é limpo para a pessoa escrever o que pretende;
• Quando o campo perde o foco, se o conteúdo for o mesmo do termo pré-definido (ou em branco), este termo reaparece;
• Quando o botão é pressionado, caso o valor seja termo pré-definido ou esteja em branco, o form não submete e o foco passa ao campo apropriado.

O formulário de busca

Um exemplo de um formulário simples de busca, que pode ser usado em “sites reais”, profissionalmente, pode ser do tipo:

<form method="get" action="script.php" name="form" id="form">
    <input type="text" id="form-input" name="form-input" value="Snippets ou Scripts" />
    <input type="submit" id="form-submit" name="form-submit" value="Buscar" />
</form>

Termo pré-definido

A expressão “termo pré-definido” é mais adequada, já que cada site pede um “label” de indicação diferente, conforme as especificações e necessidades deste. Algumas pessoas preferem o termo “Buscar” ou “Procurar” com um botão de label “OK” ou “Vai”; já alguns sites preferem explicitar a função da busca com algo do tipo “Produtos ou Serviços”, acompanhado de um botão com o label “Buscar” (o que é uma abordagem bem interessante).

De uma maneira ou de outra, é preciso definir que termo será esse. Para nosso exemplo, vamos supor que seja um site voltado a desenvolvimento web e o termo pré-definido será “Snippets ou Scripts“. Vamos criar uma expressão regular simples com uma parte do termo pré definido:

patt = new RegExp('Snippets ou');

E por que não colocar a expressão inteira? Também poderia ser feito, mas o “esforço” para identificar o padrão aumenta em relação ao tamanho/complexidade da mesma. Sinta-se à vontade para fazer vários testes.

Melhorando a interação do formulário de busca

A melhora da interação se de duas formas:

• Interção com o campo;
• Interação com o botão;

Interação com o campo

Segundo o planejamento, o que se pretende é “Quando o campo recebe o foco, caso tenha o termo pré-definido, é limpo para a pessoa escrever o que pretende”. A lógica é testar a expressão regular: caso o teste seja positivo, o campo é limpo e recebe o foco para a pessoa escrever. Ao perder o foco, “se o conteúdo for o mesmo do termo pré-definido (ou em branco), este termo reaparece”.

$('#form-input')
.focus(function(){
    if (patt.test($(this).val()))
    {
        $(this).val('');
    }
})
.blur(function(){
    if ($(this).val() == '')
    {
        $(this).val('Snippets ou Scripts');
    }
});

Interação com o botão

A interação com o botão também é importante – e, infelizmente, é um ponto esquecido por muitos desenvolvedores. A ideia é, ao se clicar no botão, testar se a expressão “bate” ou o campo está em branco e, caso seja um desses casos, dar o foco no campo.

$('#form-submit').click(function(){
    if ((patt.test($('#form-input').val())) || ($('#form-input').val() == ''))
    {
        $('#busca-bottom').focus();
        return false; // Impede que o form seja submetido
    }
});

Não é necessário dar a instrução de limpar o campo no foco porque a peça de script anterior, sobre a interação com o campo, já faz isso.

JavaScript final

Juntando os pedaços de códigos, já devidamente explicados, tem-se o seguinte:

$('#form-input')
.focus(function(){
    if (patt.test($(this).val()))
    {
        $(this).val('');
    }
})
.blur(function(){
    if ($(this).val() == '')
    {
        $(this).val('Snippets ou Scripts');
    }
});
 
$('#form-submit').click(function(){
    if ((patt.test($('#form-input').val())) || ($('#form-input').val() == ''))
    {
        $('#busca-bottom').focus();
        return false; // Impede que o form seja submetido
    }
});

Conclusão sobre a melhora da interação em formulários de busca

Certamente essas não são as únicas melhorias cabíveis para a melhoria de usabilidade e interação de um formulário de busca simples, mas, certamente, são 2 medidas muito bem-vindas para que a experiência e “agradabilidade” sejam melhoradas.

Poderia haver, por exemplo, uma tooltip com o que se pode encontrar no site e/ou fornecendo algum exemplo de termo; implementar uma solução de autocomplete; ou, ao invés de limpar o campo, apenas selecionar todo o termo para, já digitação, substituí-lo pelo o que está sendo digitado. Depende da necessidade do projeto.

E você, tem alguma dica ou solução interessante para melhorar a interação em formulários de busca?

Artigos Relacionados

• Como otimizar códigos jQuery e aumentar a performance do front-end
• Textarea: dicas e truques que você sempre quis saber
• Como criar sumários dinamicamente com o TOC (Table of Contents) jQuery plugin
• Wireframes para web: guia completo de desenvolvimento
• JSON – JavaScript Object Notation
• Como fazer loading em conteúdos do site
• 5 dicas para temas WordPress melhores
• URLs amigáveis (slug) à WordPress
• Melhores editores WYSIWYG para seu projeto
• 15 fantásticos comandos SQL para WordPress

Textarea é um elemento básico de (X)HTML (especialmente formulários). Mas, muitos desconhecem, textareas possuem muitas peculiaridades, dicas e truques que permitem efeitos e interações interessantíssimas. Eis uma bela coleção de 9 truques e dica simples que você pode fazer com textareas. Aproveite!

Imagem como background da textarea (desaparece quando recebe foco)

É possível adicionar uma imagem de fundo para um textarea (assim como quase para qualquer outro elemento). Às vezes, por algum motivo qualquer, quando se adiciona um background, isso pode “quebrar” o estilo padrão do navegador para o textarea: o estilo de borda padrão – 1px sólido – é substituído por uma espessa borda chanfrada. Para restaurar o padrão do navegador, é possível, apenas, reestilizar a textarea.

textarea {
    background:url(img/textarea-background.png) center center no-repeat; /* "Quebra" o padrão de textarea */
    border:1px solid #888; /* "Restaura" o padrão */
}

Essa imagem de fundo certamente irá interferir com a legibilidade do texto quando as palavras começarem a “passar por cima”. Para resolver isso, basta uma solução simples (com jQuery) que faz o seguinte: retirar a imagem de background quando o textarea recebe foco e o coloca de volta no blur, caso nenhum texto tenha sido digitado.

$('textarea')
  .focus(function() { $(this).css('background', 'none') })
  .blur(function() { if ($(this)[0].value == '') { $(this).css('background', 'url(img/textarea-background.png) center center no-repeat') } });

Texto com placeholder HTML5

No HTML5, haverá um novo atributo: placeholder. Ele mostra um texto em cinza clarinho na área de texto que desaparece quando o textarea está em foco ou tem algum valor.

<textarea placeholder="A vingança nunca é plena, mata a alma e a envenena!" cols="30" rows="5"></textarea>

Texto via HTML5 placeholder funciona no Safari 5, Mobile Safari, Chrome 6 e Firefox 4 alpha.

Texto com placeholder, HTML5 e jQuery

É possível testar se um determinado elemento suporta um atributo, em particular, por meio de testes com JavaScript:

function elementSupportsAttribute(element, attribute) {
    var test = document.createElement(element);
    if (attribute in test) {
        return true;
    } else {
        return false;
    }
};

Então, dá para escrever o código de modo que se o browser suporta o atributo placeholder, ele o usa; se não, seu comportamento é “imitado” através de jQuery:

if (!elementSupportsAttribute('textarea', 'placeholder')) {
  // Fallback for browsers that don't support HTML5 placeholder attribute
  $("#example-three")
    .data("originalText", $("#example-three").text())
    .css("color", "#999")
    .focus(function() {
        var $el = $(this);
        if (this.value == $el.data("originalText")) {
          this.value = "";
        }
    })
    .blur(function() {
      if (this.value == "") {
          this.value = $(this).data("originalText");
      }
    });
} else {
  // Browser does support HTML5 placeholder attribute, so use it.
  $("#example-three")
    .attr("placeholder", $("#example-three").text())
    .text("");
}

Remover o brilho azul

Todos os browsers WebKit, o Firefox 3.6 e Opera 10 colocam uma borda azul brilhante ao redor de textareas quando estão em foco. É possível removê-lo da seguinte forma:

textarea {
outline:none;
}

Você também pode aplicar à pseudo-classe :focus que vai funciona de qualquer maneira. Que saibamos, ainda não foi encontrada uma maneira de remover o brilho do Firefox e Opera. Se souber, por favor, comente!

Remover resizer da textarea

Navegadores baseados em WebKit colocam um pequeno elemento de UI no canto inferior direito das textareas para que os usuários possam redimensionar a área de texto. Se, por qualquer motivo, você quiser remover isso, uma regra CSS simples é tudo o que você precisa:

textarea {
resize:none;
}

Adicionar resizer na textarea

A resizeable interaction do jQuery UI pode ser usada em textareas. Ela funciona em todos os browsers e substitui a versão do WebKit nativa, já que essa versão tem todos os tipos de coisas mirabolantes (como callbacks e animações).

Para usar a interação, é preciso carregar jQuery e jQuery UI em sua página e usar o seguinte javascript:

$("textarea").resizable();

Fica a pergunta: usar jQuery e jQuery UI somente para adicionar o resize handle a suas textareas vale a pena? Não uma “resposta certa” para a pergunta; só você pode julgar se isso é adequado às necessidades e especificações de seu projeto.

Auto-redimensionar conforme o conteúdo

James Padolsey tem um script jQuery muito bom para auto redimensionar textareas conforme o conteúdo. A textarea começa com um tamanho normal razoável e, conforme você digita mais e mais conteúdo, ela se expande para incluir todo o texto, ao invés de mostrar a barra de rolagem padrão.

O plugin tem uma variedade de opções (confira), mas, em sua forma mais simples de uso, basta carregar o arquivo do script e usar assim:

$('textarea').autoResize();

Nowrap (sem quebra de linha automática)

Para evitar a quebra de texto com CSS normalmente é usada a regra “#seletor { white-space: nowrap; }“. Mas, por alguma razão, isso não funciona com textareas. Se a interação que você procura nas textareas é a linha não quebrar até que o Enter seja pressionado, é preciso usar o atributo “wrap” com o valor “off”, da seguinte maneira:

<textarea wrap="off" cols="30" rows="5"></textarea>

Remover barra padrão do Internet Explorer

O infame Internet Explorer coloca uma barra de rolagem vertical por padrão em todas as textareas. É possível ocultar isso com “overflow: hidden”, mas será um problema se a barra de rolagem realmente for necessária em função da quantidade de texto digitada. Felizmente, a propriedade overflow tem o valor “auto”, que exibe a barra de rolagem somente quando esta se fizer necessária. Fica assim:

textarea {
overflow:auto;
}

Conclusão

Você já tinha pensado que tantas interações e modificações fossem possível em um elemento de HTML tão básico como textarea? Se você quiser ser ainda mais ousado, com javascript e CSS é possível obter efeitos e interações ainda melhores! A propósito, os exemplos mostrados no artigo podem ser testados nesta página.

Se tiver alguma outra dica e/ou quiser mostrar algo de interessante que tenha feito em textareas, comente!

Artigos Relacionados

• Como otimizar códigos jQuery e aumentar a performance do front-end
• Melhorando a interação em formulários de busca
• Wireframes para web: guia completo de desenvolvimento
• Como fazer loading em conteúdos do site
• 5 dicas para temas WordPress melhores
• URLs amigáveis (slug) à WordPress
• Gradiente CSS cross browser: degradês em CSS sem usar imagens
• Melhores editores WYSIWYG para seu projeto
• 15 fantásticos comandos SQL para WordPress
• Breadcrumbs: guia completo com exemplos e melhores práticas

O desenvolvimento web em WordPress é excelente! O CMS já vem com diversas funções e funcionalidades para facilitar a vida de desenvolvedores e, até mesmo, de pessoas que não tem o mínimo conhecimento em programação (um dos objetivos é esse, mesmo).

Mas muitos desenvolvedores, principalmente os ainda incipientes, esquecem que o WordPress nada mais é do que PHP! Claro, o WP é nada mais, nada menos, que um sistema feito em PHP, como você e eu poderíamos ter feito. Mas, por motivos que me fogem ao conhecimento, as pessoas esquecem isso… Talvez o nível de abstração em programação que o CMS proporcione seja o “culpado”, mas, sinceramente, não tenho certeza.

Então, se você tiver a curiosidade de vasculhar os arquivos PHP que fazem do WordPress o que ele é, vai ter uma grata surpresa e encontrar uma rica fonte de scripts, funções e funcionalidades que você sempre quis implementar e não sabia como!  :-D

URLs amigáves à WordPress

Por exemplo, muitos querem implementar uma estrutura de URLs amigáves (gerar os famosos “slugs”) em sistemas desenvolvidos do zero  – seja através de frameworks ou em PHPU (“PHP Unha”) -, mas não sabem como. Ora, se sabemos que o WordPress possui um ótimo sistema de geração de slugs e temos acesso a seu código-fonte, tudo o que é preciso é vasculhar o código-fonte e encontrar as funções certas.

Seguindo o exemplo de gerar slugs, procurando um pouco, é possível saber que as funções necessárias se encontram em /wp-includes/formatting.php. E, como era de se esperar, as funções estão devidamente documentadas com seu escopo, parâmetros e retorno. Precisa de mais?

Para gerar URLs amigáveis à WordPress, são necessárias 4 funções. 3 “preliminares” que são:

E, com essas funções devidamente estabelecidas, a função que gera os slugs, propriamente dita:

Então, para gerar um slug em seu próprio sistema depois de implementar as funções mostradas, basta escrever:

1

sanitize_title_with_dashes($var);

Achou o nome da função grande ou feio? Você tem o código, altere como bem entender!

Considerações finais

O WordPress é software livre (registrado sob a licença GPL), então você pode pegar essas 4 funções e implementar em seu site/sistema/softwares sem o medo de receber uma cartinha do advogado da equipe WordPress amanhã ou depois.

Fica uma pergunta: você tem um software livre à disposição e fica quebrando a cabeça em busca de soluções de código que já existem e estão implementadas nele? Vasculhe todo o código fonte (veja alguns recursos que ajudam no artigo sobre ferramentas e recursos para desenvolvimento web) e procure por aquilo que vai lhe ser útil!

Não seja tímido! ;-)

Artigos Relacionados

• 15 fantásticos comandos SQL para WordPress
• 6 mitos de SEO que você deve evitar
• Estratégia de Conteúdo ou Content Strategy
• Como otimizar códigos jQuery e aumentar a performance do front-end
• JSON – JavaScript Object Notation
• 5 dicas para temas WordPress melhores
• URLs longas apresentadas corretamente com CSS
• Erros comuns em desenvolvimento web para campanhas de SEO
• Melhorando a interação em formulários de busca
• Textarea: dicas e truques que você sempre quis saber

Empresas de todos os portes estão investindo pesado em mídia social sem se esforçar igualmente para forjar uma base sólida, construída sobre uma experiência do usuário amigável (usabilidade) e conteúdo de qualidade.

Para entregar um site que oferece aos usuários a experiência que eles estão procurando, é preciso que este seja definido sobre uma base sólida de conteúdos, navegação eficiente e boas práticas de SEO. Com isto em mente, vamos ao que Jason Schubring chama de “A Estratégia Web de Pirâmide”.

Conteúdo

“O conteúdo é rei” é um cliché, mas é assim por uma razão: é verdade. Um site pode ter os melhores anúncios, milhares de seguidores do Twitter  e um web design espetacular, mas nenhuma destes mantém usuários, a não ser que se tenha o conteúdo que eles estão procurando. Um conteúdo fantástico é o combustível que impulsiona todos os outros esforços. Afinal, por que alguém iria fazer um tweet sobre o seu site ou adicionar em alguma rede social se não há nada que vale a pena compartilhar?

A melhor maneira para ter um bom começo (e se manter com níveis positivos de crescimento e retorno) é através do conteúdo. Se ele é único, cativante, interessante e direcionado ao público-alvo, então uma base sólida está construída.

Alguns pontos a considerar são:

• O conteúdo do site é baseado em termos que os usuários entendem ou há o uso de jargões?
• O conteúdo é intencionalmente escrito para a web ou é reaproveitado a partir de material offline?
• Se você é um blogueiro, seu conteúdo tem uma perspectiva e ponto de vista únicos, dignos de discussão e retweets?

Conteúdo para web é um assunto complexo, repleto de nuances, detalhes e pormenores. Essas são somente perguntas-base. Estude mais!

Usabilidade / Design

Se os visitantes não conseguem encontrar o que procuram, não importa que você tenha enchido o site com um conteúdo fantástico. Navegação complexa, má utilização de espaços em branco, gráficos ou animações que distraem e uma grande variedade de outros tropeços de UX podem acabar com a possibilidade de transformar uma visita em venda ou um seguidor em um grande fã!

Não há muito tempo, realizar um teste de usabilidade em um site ou aplicativo complexo podia custar milhares de “dinheiros” (dólares, euros, reais ou o que for). Atualmente existem muitos recursos grátis de usabilidade para recolher feedback dos usuários.

Também é possível discutir questões simples com colegas de trabalho e outras pessoas através de wireframes ou algum outro tipo de “rascunho”. As tarefas mais comuns são realizadas com facilidade? A navegação é facilmente compreendida? Essa e outras questões fundamentais são de vital importância: fazer testes “básicos” é melhor que fazer teste nenhum!

SEO

Alguns podem estar surpresos com o fato de que SEO não é um dos itens na base da pirâmide. “Se não é possível encontrar quem se importa?”. Nesse ponto, cabe uma explicação: se o seu conteúdo está bem escrito e focado nas necessidades dos visitantes, então já estão sendo feitos grandes progressos no caminho para um SEO eficaz!

Demasiadas vezes as pessoas tentam encontrar o “segredo” para uma boa classificação nos mecanismos de busca, mas nunca têm tempo para avaliar o conteúdo em seu site. Um dos verdadeiros segredos de SEO está em construir uma base sólida de conteúdos relevantes. Novamente, aqui estão alguns pontos a considerar:

• Há no conteúdo as palavras-chave que seus usuários estão procurando?
• Seus títulos (tags h1, h2, h3 etc) incluem palavras-chave?
• O título das páginas conteêm palavras-chave e informam o tema do conteúdo?

De novo, estas são apenas algumas questões básicas. Mais informações podem ser encontradas no artigo “As melhores práticas de SEO para seu site ou blog melhorar o posicionamento nos mecanismos de busca” e na categoria SEO.

Mídia Social

Para o prosseguimento da leitura, assume-se que você tenha tido, pelo menos, um contato superficial de sites como o Facebook, Twitter e MySpace e, provavelmente/de preferência, tenha alguma experiência usando ferramentas para otimizar as atividades de mídia social (Radian6, ScoutLabs, HootSuite, etc).

Com este pressuposto em mente, o ponto mais importante é: tenha uma estratégia de longo prazo para mídias sociais!

Não são raras as empresas e/ou pessoas que iniciam participação em redes sociais sem ter um público-alvo, um propósito claro e objetivos bem definidos.Você tem uma estratégia bem definida para mídias sociais? Aqui estão alguns itens para ajudá-lo a determinar se esse é o caso:

• Se você está num ambiente corporativo e alguém é designado para trabalhar em social media, esse será um trabalho focado, próprio ou é algo que só será feito quando houver tempo livre?
• Sua empresa usa uma agência de publicidade para mídias sociais? Usar esse tipos de empresas normalmente é grande para o lançamento inicial e campanhas em curso, mas o que acontece em dois anos? E em quatro anos?
• Quem responde às preocupações dos seus clientes no Twitter, Facebook e fóruns? Será que a escolha resiste ao teste do tempo e as expectativas dos clientes? Mais importante ainda: é rentável?

Pay-per-click (PPC)

Agora que uma estratégia de web está feita baseada em um grande conteúdo, uma interface amigável com uma excelente usabilidade, SEO e social media, é o momento do PPC.

Dependendo das necessidades de negócios, PPC pode desempenhar um papel bastante importante. Na maioria dos casos típicos, no entanto, você estará melhor servido por cuidar de todos os outros itens essenciais antes de usar o PPC. Olhe dessa maneira: por que gastar dinheiro para atrair visitantes para um site que não está bem posicionado para fazer o máximo de cada uma dessas visitas?

Considerações finais

Será que essa “Estratégia Web de Pirâmide” está, potencialmente, baseada em necessidades específicas de web e para seu negócio? Certamente que sim.

Se você é uma pequena ou média empresa e venda um produto para um pequeno nicho de mercado, SEO e PPC podem ser mais importantes; se você é um blogueiro, a mídia social é uma parte vital para sua atuação. O ponto central permanece o mesmo, independentemente de seus objetivos: cuide do básico e só siga adiante quando o básico estiver aceitável.

Seus usuários (e sua conta bancária) agradecem!

Artigos Relacionados

• Elementos de design aplicados à web
• Erros comuns em desenvolvimento web para campanhas de SEO
• Como otimizar imagens para web: guia de otimização de imagens
• 8 características de User Interfaces (UI) de sucesso
• Meta tags
• Compatibilidade CSS e o Internet Explorer: tabela comparativa de compatibilidade CSS/IE
• Maneiras práticas para melhorar a visitação de seu blog e fidelizar seus leitores
• Desenvolva sua personalidade blogueira: dicas para estimular a participação dos leitores de seu blog
• Gestalt aplicado ao design web (parte 6): princípio da experiência passada
• Gestalt aplicado ao design web (parte 5): exemplos web do princípio do alinhamento

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.

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?

Artigos Relacionados

• Otimização WordPress: aumente a performance e desempenho de seu blog / site
• Pergunte-se a si mesmo: questões para desenvolver um bom site
• Dicas para otimizar códigos PHP
• 10 dicas que desenvolvedores web iniciantes devem saber
• Como otimizar códigos jQuery e aumentar a performance do front-end
• Elementos de design aplicados à web
• Wireframes para web: guia completo de desenvolvimento
• 10 erros básicos de web design
• JSON – JavaScript Object Notation
• Como fazer loading em conteúdos do site

O recurso de gradiente (degradê) CSS foi introduzido pelo Webkit há cerca de 2 anos, mas raramente era utilizado devido à incompatibilidade com a maioria dos browsers. Mas agora, com o Firefox 3.6+, que suporta gradientes, é possível criar degradês sem usar imagens! E o código CSS para gradiente funciona nos principais navegadores: IE, Firefox 3.6+, Safari e Chrome.

Gradiente CSS para browsers Webkit

A seguinte linha de código é para navegadores WebKit, como Safari, Chrome, etc. Serve para exibir um gradiente linear de cima (#CCC) para baixo (#000).

background: -webkit-gradient(linear, left top, left bottom, from(#CCC), to(#000));

Degradê CSS para Firefox 3.6+

Para Firefox 3.6+, usa-se -moz-linear-gradient:

background: -moz-linear-gradient(top, #CCC, #000);

CSS Gradient em Internet Explorer

No IE, é preciso recorrer a um filtro:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CCCCCC', endColorstr='#000000');

Degradê com CSS em todos os navegadores (cross-browser)

background: #999; /* para browsers sem suporte a CSS 3 */
 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* webkit browsers */
background: -moz-linear-gradient(top,  #ccc,  #000); /* Firefox 3.6+ */

Clique para ver o exemplo direto no navegador

<update>
Existe uma ótima ferramenta para gerar degradês com CSS: Ultimate CSS Gradient Generator.
</update>

Limitações do Internet Explorer

O filtro de gradiente do Internet Explorer não suporta color-stop, gradient angle e radial gradient. Isso significa que só é possível especificar degradês lineares na horizontal ou vertical com duas cores: StartColorStr e EndColorStr.

<update>
O leitor Renatho indicou uma maneira de trabalhar com gradientes no Internet Explorer 9.
</update>

Notas finais sobre degradês com CSS puro

É importante ter em mente que nem todos os navegadores suportam gradiente com CSS puro. Por garantia, o ideal é não depender do CSS para fazer degradês; o ideal é utilizar o recurso para melhorar o web design.

Artigos Relacionados

• CSS float: considerações, dicas e macetes para bons layouts na web
• 10 erros básicos de web design
• Cores na web: guia completo
• Textarea: dicas e truques que você sempre quis saber
• Rolagem com fundo transparente com CSS
• 7 ferramentas para web designs melhores
• NextGEN Gallery com SexyLightBox: sua galeria de imagens mais sexy
• CushyCMS: CMS versátil, simples, rápido, fácil e gratuito
• Ícones de setinhas para download (grátis)
• Componentes de um sistema de navegação

Para quem está acostumado a utilizar CMSs em desenvolvimento web, deparar-se com um editor WYSIWYG para páginas e artigos é algo banal. Para desenvolvimento de softwares desde o início, é preciso implementar um desses editores e, com tantas opções disponíveis no mercado, a escolha pode se tornar complicada… Para isso, confira os 10 melhores editores WYSIWYG para seu próximo projeto!

NicEdit

NicEdit é uma alternativa para algumas maiores e mais complexos editores WYSIWYG existentes, com seu pequeno tamanho de download. Ele possui muitos dos recursos esperados por esse tipo de editor e se integra facilmente em seu site ou software.

TinyMCE

TinyMCE é um editor WYSIWYG  javascript HTML open source. É fácil de integrar e é altamente personalizável com temas e plugins. TinyMCE é um dos mais completo editores, oferecendo uma experiência semelhante a editores instaláveis, como BrOffice e MS Word.

CKEditor

CKeditor é o novo FCKEditor, consagrado editor para os desenvolvedores mais veteranos e líder de mercado anteriormente. Baseando-se nisso, o CKEditor promete ser um editor ainda melhor, já que fez melhor o que era considerado falho em seu antecessor.

YUI Rich Text Editor

O YUI Rich Text Editor é um controle UI do Yahoo que transforma textareas em editores WYSIWYG completos. Ele vem em várias versões diferentes, com diferentes características e complexidade, mas ainda consegue atingir uma grande experiência do usuário sem uma infinidade de botões se aglomerando na interface.

MarkItUp!

Markitup é um plugin para jQuery que permite que você transforme textareas em editores de marcação com qualquer marcadores que você quiser: HTML, Sintaxe Wiki e BBcode são apenas algumas que são suportadas. MarkItUp! não é um editor WYSIWYG, propriamente dito, mas oferece todas as características básicas esperadas de um.

FreeTextBox

FreeTextBox é um editor HTML especificamente para ASP.NET. A aparência do editor é bastante parecida com a do MS Word. Apesar de a versão gratuita não ter uma série de features, ela possui mais do que o suficiente para permitir uma edição WYSIWYG de qualidade.

MooEditable

Editores WYSIWYG tornaram-se populares devido aos vários plugins para  jQuery existentes, mas esses editores não são tão comuns para Mootools. MooEditable, no entanto, preenche essa lacuna, fornecendo uma simples, mas eficaz, experiência do usuário, baseada em uma biblioteca de javascript bem escrita. Se você usa Mootools, ficará feliz em usar o MooEditable.

OpenWysiwyg

OpenWysiwyg é um editor WYSIWYG cross browser com quase todos os recursos de edição que você pode precisar. Ele apresenta uma interface elegante, incluindo dropdowns e botões. Um de seus pontos fortes é sua capacidade de lidar bem com tabelas, com bordas e cores diferentes. No entanto, o Google Chrome ainda não é suportado…

Spaw Editor

Spaw Editor é um editor, assim como os outros editores WYSIWYG, que permite desenvolvedores de web substituir uma área de texto padrão (textarea) por um editor completo, totalmente personalizável, multilingue e com suporte a temas.

jHtmlArea

jHtmlArea é outro editor de texto WYSIWYG construído como um plugin para a biblioteca jQuery. Seu objetivo é ser simples e leve, apenas com as opções mais necessárias. Permite-se a ser facilmente customizável através de temas, as funções e idiomas.

Sugestões WYSIWYG?

E você, conhece um bom editor WYSIWYG e gostaria de compartilhar? Faça um comentário com o nome e link do editor WYSIWYG e o artigo será complementado com sua sugestão! Participe!

Artigos Relacionados

• Wireframes para web: guia completo de desenvolvimento
• Breadcrumbs: guia completo com exemplos e melhores práticas
• Recursos de usabilidade grátis
• Ferramentas para o twitter
• 4 elementos de design para um bom call to action
• User Interface em dicas rápidas
• 10 dicas que desenvolvedores web iniciantes devem saber
• Como otimizar códigos jQuery e aumentar a performance do front-end
• Elementos de design aplicados à web
• 10 erros básicos de web design

Para quem faz uso um pouco mais avançado do WordPress, especialmente quem trabalha desenvolvendo sites com a plataforma, é bem comum aparecerem situações um tanto complexas. Para estas questões, seguem 13 fantásticos comandos SQL para WordPress!

Uma maneira prática de executar comandos SQL é através do phpMyAdmin. Até a hospedagem mais básica dá acesso à ferramenta de banco de dados, então não há dificuldades nisso. Uma vez no sistema, você deve selecionar aba “SQL” e escrever/colar a instrução SQL que deseja executar.

Alterar siteurl e homeurl

WordPress armazena o caminho absoluto da URL do site (“siteurl”) e URL da home (“homeurl”) no banco de dados. Portanto, se você transferir o seu site WordPress do localhost para o servidor, por exemplo, o site não vai carregar! Isso ocorre porque o caminho absoluto ainda está apontando para o seu localhost. Você vai precisar executar um comando para resolver isso.

UPDATE wp_options
SET option_value = REPLACE(option_value, 'http://www.enderecoantigo.com', 'http://www.endereconovo.com')
WHERE option_name = 'home'
OR option_name = 'siteurl';

Alterar GUID

Depois de migrar seu blog a partir de, por exemplo, localhost, para o servidor ou de um outro domínio para um novo domínio, você terá que corrigir as URLs para o campo GUID na tabela wp_posts. Isto é crucial, porque GUID é usado para montar o slug de seu post do caminho absoluto do artigo correto.

UPDATE wp_posts
SET guid = REPLACE (guid, 'http://www.enderecoantigo.com', 'http://www.endereconovo.com');

Alterar URL no conteúdo

O WordPress utiliza caminhos absolutos no URL ao invés de um caminho relativo quando vai armazená-los no banco de dados. Dentro do conteúdo de cada registro de artigo, ele armazena todas as URLs antigas referenciando as fontes antigas. Portanto, você precisará alterar todas essas URLs com o endereço do novo domínio.

UPDATE wp_posts
SET post_content = REPLACE (post_content, 'http://www.enderecoantigo.com', 'http://www.endereconovo.com');

Alterar apenas o caminho das imagens

Caso seja preciso alterar o domínio das imagens inseridas nas páginas e artigos, esta solução vai ajudar você a fazer isso de forma simples.

UPDATE wp_posts
SET post_content = REPLACE (post_content, 'src="http://www.enderecoantigo.com', 'src="http://www.endereconovo.com');

Também é preciso atualizar o GUID para o tipo “attachment” com a seguinte instrução SQL:

UPDATE wp_posts
SET guid = REPLACE (guid, 'http://www.enderecoantigo.com', 'http://www.endereconovo.com') WHERE post_type = 'attachment';

Atualizar Post Meta

Atualizar Post Meta funciona quase da mesma maneira como atualizar a URL no conteúdo do post. Se você tiver dados extras para cada post, você pode usar a seguinte instrução para alterar todos eles.

UPDATE wp_postmeta
SET meta_value = REPLACE (meta_value, 'http://www.enderecoantigo.com','http://www.endereconovo.com');

Alterar o nome usuário padrão “admin”

Apesar de que na versão 3 do WordPress o usuário “admin” poderá ser alterado no momento da instalação, não custa deixar para a posteridade a dica de como alterar o nome do “admin”.

UPDATE wp_users
SET user_login = 'nomequevocequiser'
WHERE user_login = 'Admin';

Resetar password

Já quis resetar sua senha no WordPress mas, por algum motivo, não conseguiu usar a seção para resetar o password? Eis a solução:

UPDATE wp_users
SET user_pass = MD5('senha')
WHERE user_login = 'login';

Transferir artigos de um autor para outro

Para transferir os artigos de um autor para outro, você gasta um tempo enorme se fizer isso manualmente. Com o comando SQL a seguir, é possível fazer isso facilmente. Para a dica, é preciso saber o ID dos autores.

UPDATE wp_posts
SET post_author = 'id_novo_autor'
WHERE post_author = 'id_autor_antigo';

Apagar revisões

Quando se está editando um artigo no WordPress, é comum cópias de segurança serem feitas para garantir o trabalho feito. São as chamadas “revisões”. Com o tempo, o número de registros de revisões fica grande e isso pode comprometer a performance do banco de dados. Para apagar todas as revisões de artigos, dê o seguinte comando SQL:

DELETE a,b,c FROM wp_posts a
LEFT JOIN wp_term_relationships b ON (a.ID = b.object_id)
LEFT JOIN wp_postmeta c ON (a.ID = c.post_id)
WHERE a.post_type = 'revision'

Lembrando que este é o comando para apagar revisões já feitas. Caro queira desativar o recurso (ou limitar o número de revisões), saiba como neste artigo sobre como limitar e desativar revisões de posts no WordPress.

Apagar post meta

Instalar e remover plugins é algo corriqueiro quando se trabalha com WordPress. Alguns plugins precisam de criar alguns post meta para funcionarem corretamente e, para esses casos, não é raro o acontecimento de, mesmo depois de o plugin ser desinstalado, algum “garbage meta” ficar enchendo o BD desnecessariamente. Uma limpeza em algum valor de post meta, às vezes, se faz necessária.

DELETE FROM wp_postmeta
WHERE meta_key = 'nome-chave-meta';

Exportar todos os e-mails de comentários

Quanto mais tempo seu blog/site fica no ar, é provável que mais comentários receba nos artigos publicados. Se, por algum motivo, for preciso uma listagem com e-mail de todas as pessoas que já comentaram até então, basta executar o seguinte comando:

SELECT DISTINCT comment_author_email
FROM wp_comments;

Uma vez que a listagem esteja concluída, exporte tudo através do phpMyAdmin.

Apagar todos pingbacks

A medida que o site/blog fica no ar – e se você tiver bom conteúdo a oferecer – o número de pingbacks começa a influenciar a qualidade do banco de dados. Para apagar todos pingbacks, proceda da seguinte maneira:

DELETE FROM wp_comments WHERE comment_type = 'pingback';

Apagar todos comentários de SPAM

Sem maiores explicações, eis a maneira de deletar todos os comentários marcados como SPAM:

DELETE FROM wp_comments
WHERE comment_approved = 'spam';

Identificar tags não usadas

Num banco de dados WordPress, se você executar alguma query SQL para apagar posts, as tags relacionadas não serão apagadas e continuarão aparecendo na nuvem de sugestão de tags e listagem de tags. Para identificar esse tipo de tag, execute a seguinte instrução SQL:

SELECT * FROM wp_terms wt
INNER JOIN wp_term_taxonomy wtt
ON wt.term_id=wtt.term_id
WHERE wtt.taxonomy='post_tag'
AND wtt.COUNT=0;

Artigos Relacionados

• 5 dicas para temas WordPress melhores
• URLs amigáveis (slug) à WordPress
• 6 mitos de SEO que você deve evitar
• Truques de configuração do WordPress
• Maneira simples de saber quem faz referências a seu blog WordPress
• WP-Syntax: destacar códigos fonte em artigos de blogs WordPress
• Estratégia de Conteúdo ou Content Strategy
• Como otimizar códigos jQuery e aumentar a performance do front-end
• JSON – JavaScript Object Notation
• URLs longas apresentadas corretamente com CSS

Em sites com muitas páginas e níveis hierárquicos, o breadcrumb pode aumentar consideravelmente a maneira como os visitantes encontram seu caminho e navegam pelo site. Em termos de usabilidade, breadcrumbs reduzem o número de ações que um visitante precisa tomar para chegar a uma página de nível superior e melhora o nível de encontrabilidade de seções e páginas. Os breadcrumbs também são uma ajuda visual eficaz que indica a localização do usuário dentro da hierarquia do site, tornando-se uma grande fonte de informação contextual.

O que é um breadcrumb?

Breadcrumb no delicious

Um breacrumb (também conhecido como “migalhas de pão” ou “trilha de migalhas de pão”, em alusão à história de João e Maria) é um tipo de esquema de navegação auxiliar que revela a localização do usuário em um site ou aplicação web. Assim como no conto, breadcrumbs do mundo real oferecem aos usuários uma maneira de “rastrear” o caminho de volta e/ou ter uma visão geral e estruturada de em que ponto se encontra dentro da hierarquia em que se encontra.

Breadcrumbs geralmente são encontrados em sites que possuem uma grande quantidade de conteúdos organizados de forma hierárquica. Também é possível vê-los em aplicações web que têm mais de uma etapa, com uma função semelhante a de uma barra de progresso. Na sua forma mais simples, é disposto horizontalmente, em links de texto separadas por um símbolo de “maior que” (>), que indica o nível daquela página relativamente aos links das outras páginas na hierarquia do site.

Quando breadcrumbs devem ser usados?

É indicado usar navegação por breadcrumb para sites grandes e sites que possuem páginas organizadas hierarquicamente. Um cenário excelente são sites de comércio eletrônico, nos quais uma grande variedade de produtos são agrupados em categorias lógicas.

Não é aconselhável usar breadcrumb em sites que não têm agrupamento ou hierarquia lógica. Uma ótima maneira de determinar se um site se beneficiará com a navegação por breadcrumbs é construir um mapa do site ou um diagrama representando sua arquitetura de navegação e analisar se o recurso melhora a capacidade do usuário de navegar dentro e entre as categorias.

Breadcrumbs devem ser considerados como um recurso extra e não deve substituir o menu principal do site ou aplicativo. É uma característica de conveniência, um regime navegação secundária que permite aos usuários determinar onde estão e é considerado e deve ser usado como uma forma alternativa ou um auxiliar de navegação.

Tipos de breadcrumbs

Existem diversos tipos e diversas classificações para os breadcrumbs. Se todos os sistemas de classificação e ordenação fossem aqui listados, este artigo ficaria imenso! Portanto, para facilitar a abordagem do tema, será considerado que existem 3 tipos de breadcrumbs.

Breadcrumb de Localização

Breadcrumbs de Localização mostram ao usuário em qual ponto se encontra dentro da hierarquia do site. Eles são normalmente utilizados para sistemas de navegação em que se tem vários níveis (normalmente mais de dois). No exemplo abaixo (retirado do site SitePoint), cada link é para uma página que está um nível superior ao da sua direita.

Breadcrumb de Atributo

Breadcrumbs de Atributo servem para exibir os atributos de uma determinada página, em particular. Por exemplo, na Newegg o breadcrumb mostrar os atributos dos itens exibidos em uma página, em especial.

Esta página exibe todos os cases de computador que têm as características de serem fabricados pela Lian Li e ter uma MicroATX Mini Tower.

Breadcrumb de Caminho

Mostram aos usuários os passos que tomaram até chegar a uma página específica. Breadcrumbs de Caminho são dinâmicos e mostram as páginas que o usuário visitou antes de chegar na página página em que se encontra atualmente.

Em relação ao Breadcrumb de Localização e ao Breadcrumb de Atributo, o Breadcrumb de Caminho não é tão “popular” e não é tão utilizado em web sites e sistemas virtuais.

Benefícios de se usar breadcrumbs

Existem diversos benefícios em se valer dos breadcrumbs como sistema auxiliar de navegação em um site, dentre os quais:

• Conveniência para os visitantes. Breadcrumbs são usados principalmente para dar aos usuários um meio secundário de navegar em um web site. Ao oferecer um breadcrumb em um grande site multi-nível, os visitantes podem navegar para as categorias de nível superior com mais facilidade.
• Redução de cliques. Ao invés de usar o botão “Voltar” do navegador ou a navegação principal do site para voltar à página de nível superior, os usuários podem usar o breadcrumb para realizar a mesma ação com um menor número de cliques.
• Ocupam pouco espaço. Geralmente os breadcrumbs são em sentido horizontal e de estilo “clean”, portanto não ocupam muito espaço na página. A vantagem é que eles têm pouco ou nenhum impacto negativo em termos de sobrecarga de conteúdo.
• Redução de Taxa de Rejeição. Breadcrumbs podem ser uma ótima maneira de atrair visitantes pela primeira vez para examinar um site depois de ter visto a página de destino . Por exemplo, digamos que um usuário chega a uma página através de uma pesquisa no Google, vendo um breadcrumb, este pode “seduzir” o visitante para as páginas de nível superior para visualizar os tópicos relacionados ao seu interesse. Isso reduz a Taxa de Rejeição (Bounce Rate) do site.

Erros na implementação de breadcrumbs

Usar breadcrumbs é uma questão bastante simples e há apenas algumas diretrizes a considerar antes de tomar a decisão de implementá-lo em um site. Vamos dar uma olhada em alguns erros comuns que devem ser evitados.

Usar breadcrumb quando não é preciso

Um erro comum é usar breadcrumbs em ocasiões em que não trazem nenhum benefício aos visitantes.

No exemplo acima, o site Slicethepie corre o risco de sobrecarregar os usuários com opções de navegação demais: (1) navegação primária; (2) breadcrumb; e (3) navegação secundária; estão muito próximas umas das outras. O breadcrumb, neste aplicativo, não acrescenta nada aos visitantes, já que a navegação secundária para as páginas de nível inferior fica logo abaixo dele. Além disso, clicando no link de segundo nível no breadcrumb (“Music”), isso leva de volta à primeira aba (“Listen”), que sugere erroneamente que a primeira guia está em um nível mais elevado do que os outros dois (“Search” and “Artist hall of fame”).

Usar breadcrumbs como navegação primária

Como já comentado anteriormente, breadcrumbs devem ser usados como elemento de navegação auxiliar.

No exemplo acima, Mefeedia não oferece um menu de navegação primário para a visualização de vídeos. Embora exista a navegação textual no rodapé, não há menu de navegação no corpo das páginas, tornando-se difícil de navegar para outras seções do site.

Se um visitante chega em uma página de vídeo diretamente – por exemplo, através de um resultado de pesquisa do Google – sua única opção de navegação é o breadcrumb. Ou já estiver navegando nas páginas do site e acessar uma página que não exiba o menu de navegação principal, é preciso usar o botão “Voltar” do navegador para acessar o menu principal.

Usar breadcrumbs quando a página tem múltiplas categorias

Breadcrumbs têm uma estrutura linear, então, usá-los vai ser difícil se as páginas do site não podem ser classificadas em categorias puras. Decidir se se deve usar breadcrumb depende de como a hierarquia do site foi projetada. Quando uma página de nível inferior é (ou pode ser colocada) em mais de uma categoria-mãe, breadcrumbs são ineficazes, imprecisos e confusos para o usuário.

Considerações sobre o design da navegação por breadcrumb

Ao projetar um sistema de navegação por breadcrumb, é preciso ter em mente várias coisas. Vamos dar uma olhada em algumas questões que podem surgir quando você está trabalhando com breadcrumbs.

O que deve ser usado para separar os links do breadcrumb?

O mais comumente aceito e reconhecido símbolo para separar links em breadcrumbs é o “maior que” (>). Normalmente, o sinal é usado para denotar hierarquia, como no formato “Categoria Mãe > Categoria Filha”.

Outros símbolos utilizados são setas apontando para a direita, as marcas de ângulo direito de citação (») e barras (/).

A escolha depende da estética do site e do tipo de breadcrumb usado. Por exemplo, para um Breadcrumb de Caminho, no qual as ligações não têm necessariamente uma relação hierárquica entre si, usar o símbolo “>” não transmite sua relação apropriadamente.

O quão grande um breadcrumb deve ser?

Você não quer que o seu breadcrumb “domine” a página. O breadcrumb tem a função de ser um auxiliar aos visitantes; seu tamanho deve transmitir esta função aos usuários e, portanto, deve, pelo menos, ser menor ou menos importante do que o menu de navegação principal.

Uma boa regra a seguir para decidir o tamanho de um breadcrumb é que ele não deve ser o primeiro item a chamar a atenção do usuário quando ele entra em uma página do site.

Onde deve ser a localização do breadcrumb?

Breadcrumbs geralmente são exibidos na metade superior da página – abaixo do menu de navegação principal se um esquema de menu horizontal é usado.

Alguns poucos sites costumam repetir o breadcrumb próximo ao rodapé, no final do conteúdo de cada página, mas isso não é muito comum.

Resumo das características de breadcrumbs

Porque usar breadcrumbs:

• São excelente recurso de usabilidade
• Eliminam cliques adicionais
• Mostram a hierarquia para usuário
• São visualmente agradáveis
• Fornecem ajuda adicional
• Diminuem a Taxas de Rejeição do site
• Estimulam o interesse e curiosidade dos visitantes

Melhores práticas de breadcrumbs:

• Usar breadcrumbs no topo da página
• Usar breadcrumbs consistentemente
• Estilizar (design) os breadcrumbs apropriadamente
• Separar claramente cada nível do breadcrumb
• Destacar (normalmente com negrito) o último item do breadcrumb (página atual)
• A página atual (último item do breadcrumb) não deve ser link
• Breadcrumbs não devem substituir a navegação principal

Exemplos de breadcrumbs

Muita coisa foi vista neste guia completo sobre breadcrumbs e, como não poderia deixar de ser, uma listagem com exemplos  de breadcrumbs se faz necessária. Para não pesar muito o tamanho da página nem tornar o artigo muito extenso, seguem links com exemplos variados de breadcrumbs para análise, observação e inspiração:

• Know where you are – Breadcrumbs Inspiration
• Breadcrumb Inspiration for Designers
• 11 cool Breadcrumbs for user friendly navigation
• Inspirational and creative Breadcrumbs for web design
• Pattern Tap Breadcrumbs Collection

Artigos Relacionados

• Wireframes para web: guia completo de desenvolvimento
• JSON – JavaScript Object Notation
• Erros comuns em desenvolvimento web para campanhas de SEO
• Melhores editores WYSIWYG para seu projeto
• 4 elementos de design para um bom call to action
• User Interface em dicas rápidas
• 6 mitos de SEO que você deve evitar
• Mastering Twitter, o manual completo sobre twitter para desenvolvedores e marketeiros
• Como criar sumários dinamicamente com o TOC (Table of Contents) jQuery plugin
• Web sites e comunicação: 21 maneiras de os sites se comunicarem com seus visitantes

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

Web design, estrutura e usabilidade

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

Página Inicial

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

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

Páginas de Artigos

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

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

Página de Categorias e Busca

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

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

Barra de ferramentas

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

Análise de performance e desempenho

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

Gráfico de Peso de Arquivos: Antes

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

Gráfico de Peso de Arquivos: Depois

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

Velocidade de carregamento: antes

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

Velocidade de carregamento: depois

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

Resultado da promoção dpw2010

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

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

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

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

Considerações finais

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

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

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

Artigos Relacionados

• Nenhum artigo relacionado...

Muito do trabalho de desenvolvimento web é realizado usando ferramentas e recursos de terceiros. Os desenvolvedores web sabemos fazer o que precisamos, mas, convenhamos, é bem mais simples, rápido e prático nos valermos de ferramentas de desenvolvimento web já prontas, que facilitam nosso trabalho e aumentam nossa produtividade.

Loaders (ou Ícones de Loading)

É comum o desenvolvimento de sites utilizando AJAX. Toda vez que for preciso usar um GIF animado, você pode consultar alguns sites para gerar e/ou baixar GIFs de animação para loading.

• AJAX Activity Indicators
• Ajax Loading Gif Generator
• Ajaxload
• Chimply
• Load Info
• Preloaders.net

Compatibilidade e Suporte CSS

As folhas de estilo possuem muitas propriedades e valores para suas regras e, com a imensa gama de browsers e peculiaridades de cada um, é sempre bom ter alguns guias de compatibilidade e suporte CSS à disposição.

• CSS3 and HTML5 Properties & Applications;
• CSS Compatibility and Internet Explorer;
• CSS contents and browser compatibility – mobile
• CSS Filters (CSS hacks);
• CSS print media browser conformance;
• Compatibility table: CSS3 Selectors;
• Experimental CSS compatibility table;
• Guide to CSS support in email clients;
• W3C DOM Compatibility – CSS;
• Web Browser CSS Support.

.htaccess

Na maioria das vezes é importante e útil configurar algumas coisas no site através do .htaccess. Para algumas operações básicas, não deixe de conferir alguns geradores de .htaccess.

• .htaccess Banning Generator (beta);
• .htaccess Editor;
• .htaccess redirect;
• .htaccess URL Rewrite;
• Htaccess Tools;
• Online .htaccess generator and builder;
• Webmaster Tools – .htaccess Generator.

Otimizadores e Formatadores de CSS

Ter um set de folhas de estilo otimizado faz parte da tarefa de qualquer desenvolvedor front-end. Para melhor ainda mais a performance das CSS, é bom fazer uma “limpeza” através de algumas ferramentas úteis (lembrando de ter sempre um backup dos arquivos originais).

• Clean CSS;
• Code Beautifier;
• Compress CSS;
• CSS Code Formatter and Optimizer;
• CSS Code Optimizer;
• CSS Compressor of Lottery Post;
• CSS Drive CSS Compressor;
• Format CSS Online;
• Online CSS Optimiser / Optimizer;
• Robson CSS Compressor.

robots.txt

Saber quais partes do site serão disponibilizadas para indexação nos mecanismos de busca e quais serão bloqueadas é parte fundamental para uma estratégia de SEO funcionar. Para facilitar o trabalho, conferir algumas ferramentas para trabalho com robots.txt pode ser interessante.

• Evil Demo Robots.txt Generator;
• Gerador de Robots.txt;
• Pixelfolk  Robots.txt Generator;
• Robot Control Code Generation Tool;
• Robots.txt Builder
• Robots.txt Generator Tool;
• SEOTools Robots.txt File Generator;
• SEO-watch. Robots.txt Generator;
• Sitemaps XML format;
• Yonego Robots.txt generator;

Favicons

Para trabalhos de construção de marca, até mesmo detalhes como os favicons são importantes! Se seu site ainda não tem um favicon, não perca tempo e crie agora mesmo!

• 256 pixels;
• favicon2dots;
• FavIcon from Pics;
• favicon.ico Generator;
• Favicon Generator;
• Favicon Generator DeGraeve.com;
• FavIcon Generator Dynamic Drive;
• Favicon Generator & Gallery;
• favicon maker v1;
• favikon;
• Genfavicon;
• Project Fondue Favicon Generator.

Sitemaps

Sitemaps são fundamentais para uma indexação eficiente nos mecanismos de busca. Ajude o trabalho deles e eles ajudam o seu, essa é a regra. E, se você tem dúvidas de como criar um sitemap para seu site, essas ferramentas certamente vem em boa hora.

• Create an XML Sitemap;
• Google (XML) Sitemaps Generator for WordPress;
• Online XML Sitemap Generator Free Online;
• Google XML Sitemap Generator;
• SitemapDoc – Google Sitemap Generator and Editor;
• XML Sitemaps Generator

Heatmaps e Gravadores de Tela

Heatmaps (ou Mapas de Calor) e Gravadores de Tela são excelentes ferramentas para análise de usabilidade. Através de resultados de análises de mapas de calor, é possível aprimorar toda a estrutura de um web site para melhor.

• clickdensity
• ClickHeat
• ClickTale
• Crazy Egg
• Mouseflow

Plugins Firefox

Usando alguns plugins excelentes para Firefox, o desenvolvimento web se torna ainda mais prazeroso e divertido! Confira os principais e essenciais plugins para auxiliar no desenvolvimento para web.

• ColorZilla
• CSS Reloader
• Firebug
• FireShot
• FireFTP
• NoScript
• Page Speed
• SEO for Firefox
• Web Developer
• YSlow

Artigos Relacionados

• Como otimizar códigos jQuery e aumentar a performance do front-end
• 5 dicas para temas WordPress melhores
• 7 ferramentas para web designs melhores
• 8 dicas para fazer códigos melhores com jQuery
• Truques de configuração do WordPress
• Pergunte-se a si mesmo: questões para desenvolver um bom site
• Dicas para otimizar códigos PHP
• Como fazer loading em conteúdos do site
• Melhorando a interação em formulários de busca
• Textarea: dicas e truques que você sempre quis saber