Desenvolvimento web

Desenvolvimento de site por R$150,00/Mês

Desenvolvimento Web responsivo com Melhor Custo-beneficio

Planos de desenvolvimento web com hospedagem Gratís
Arquivo de Négocios | LCF HOST

Négocios


Erros comuns em desenvolvimento web para campanhas de SEO

Conheça erros comuns em desenvolvimento web para campanhas de SEO e saiba como evitá-los

Uma boa campanha de SEO acontece quando várias ações de otimização são realizadas, conjunta e simultaneamente. E, certamente, uma dos aspectos da estratégia de uma ação de SEO são as ações técnicas tomadas no desenvolvimento web.

Este é um artigo traduzido do original “Why my SEO campaign failed? Part 2: Common Web Development mistakes“, do blog Web SEO Analytics, e sofreu pequenas modificações.

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 projetoou 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:

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?


Ser um generalista não é uma coisa ruim

Já pensou em ser um profissional de web “generalista” ao invés de especialista? Leia este artigo e conheça os prós e contras dessa abordagem na carreira.

Nos últimos anos tem havido um afastamento do profissional web generalista para especialista, como estrategistas de conteúdo, arquitetos de experiência do usuário e codificadores front-end. Onde uma vez havia um único emprego, agora existem muitos, com esferas cada vez mais estreitas de responsabilidade.

Mas enquanto a maioria está se tornando mais especializada, muitos têm rejeitado a abordagem, permanecendo “generalistas” — incluindo a ampliação de seus interesses para áreas como marketing, psicologia, estratégia de negócios e outros. Não surpreendentemente, isso pode atrair críticas negativas de alguns pares que veem os generalistas negativamente.

Por que ser um “generalista” é algo ruim?

Parte da crítica se baseia na complexidade da web. Por exemplo, saber tudo sobre web designjá foi possível, mas agora é irrealista. Mas o fato de que o web design se tornou tão complexo significa que precisamos de generalistas para olhar além dos “silos de especialistas”.

O perigo é que, sem generalistas, os especialistas ficam tão envolvidos em seus silos que lhes é difícil trabalhar com especialistas em outras disciplinas. O generalista é necessário para encorajar a colaboração cruzada e para olhar além dos silos em desenvolvimentos emergentes na web.

Não confunda ser um generalista com não possuir habilidades

A percepção é que os generalistas são comuns e relativamente não-qualificados, porque todos começamos como um quando adentramos no desenvolvimento web. Mas essas pessoas não são verdadeiros generalistas.

Um generalista é alguém que é bem informado a respeito de uma ampla gama de assuntos. Isto não descreve a maioria dos desenvolvedores web — e, certamente, aqueles que estão começando. É importante não confundir ser um generalista com não ser qualificado.

Para facilitar o entendimento dos generalistas em desenvolvimento para web, alguns remetem ao termo “Pau-para-toda-obra”. Mas isso também é problemático, porque pode trazer uma conotação negativa em alguns casos. De qualquer maneira, os generalistas se sentem orgulhosos de suas capacidades de amplo conhecimento em diversas áreas.

Ser um especialista não é a única maneira de conseguir bons trabalhos

Não podemos negar que existe uma “percepção geral” de que a especialização é uma maneira muito melhor de se diferenciar em um mar de generalistas, que muitas vezes leva a empregos melhores — tanto em sentido pecuniário, quanto em satisfação pessoal.

Certamente, especializar-se é uma maneira de se diferenciar, ninguém pode negar este fato. Mas não a única maneira. Pode-se, também, confiar no trabalho de qualidade, no conhecimento de certos setores e até na amplitude da experiência e do conhecimento. Quanto aos especialistas mais qualificados para trabalhar em projetos maiores, isso também não é verdade.

Grandes projetos envolvem grandes equipes, e um generalista é muitas vezes necessário para reunir os diferentes especialistas e fazê-los trabalhar juntos de forma eficaz.

Generalistas também são chamados “passantes”, já que conseguem passar pelas diversas áreas do desenvolvimento web, facilitando a comunicação entre diferentes grupos de profissionais.

Isso significa que devemos todos rejeitar a especialização e nos tornarmos generalistas? De modo nenhum! Mas, em muitas situações, um generalista é necessário.

Você deve ser um generalista?

Como sabemos, não há nada de errado com a especialização. O que se está querendo chamar atenção é que, em certas circunstâncias, ser um generalista tem suas vantagens — e propicia vantagens para muitos profissionais trabalhando juntos num mesmo projeto web.

Aqui estão algumas circunstâncias que vêm à mente:

  • Prosperar na variedade. Generalistas têm mais oportunidades do que outros para explorar novos desenvolvimentos, técnicas e tecnologias. Se você é levado a constantemente aprender coisas e enfrentar novos desafios, então a variedade constante de disciplinas na web pode muito bem lhe servir.
  • Sua equipe de web é pequena. Pequenas equipes em grandes organizações, agências, produtoras etc, precisam de generalistas. Essas equipes exigem que todos façam o que é preciso ser feito, o que, inevitavelmente, exige que você cuide de muitas tarefas.
  • Freelancer. Trabalhar por si próprio muitas vezes exige que você seja Pau-para-toda-obra. A maioria dos clientes vai precisar de você para ajudá-los com tudo o que é relacionado à web. Especializar-se atuando como freelancer é possível, mas, certamente, não é a norma.
  • Pesquisa e Desenvolvimento. Em organizações e agências maiores, alguém precisa manter um olho em tecnologias emergentes. Enquanto especialistas vão fazer isso dentro de seus nichos, tendências inevitavelmente surgirão ao longo do tempo . O generalista será aquele que irá identificar essas novas oportunidades e avaliar quando investir nelas.
  • Você gere seu próprio negócio. Ser um generalista quando se gere o próprio negócio de desenvolvimento web não só permite se manter informado sobre uma variedade de tópicos e vendê-los aos clientes, como ajuda a entender o que as pessoas relacionadas à empresa fazem e se certificar de que as disciplinas funcionam bem em conjunto.

Enquanto alguns de nós devemos nos tornar generalistas por escolhas de carreira ou temperamento, há também boas razões para escolher este caminho em detrimento de outro.

Por que se tornar um generalista?

Os generalistas se sentem orgulhosos de suas capacidades de amplo conhecimento em diversas áreas.

Tornar-se um generalista é, em muitos aspectos, um excelente caminho a se tomar na carreira web. Para começar, ele mantém suas opções abertas: um generalista está sempre procurando novas áreas para explorar e, por isso, está idealmente posicionado para se deslocar para novos campos, como mobile ou HTML5.

Mantenha-se ágil e se adapte às mudanças

O perigo é que, como especialista, você se torna tão obscurecido por sua área de especialização que você não pode detectar novas oportunidades ou, pior ainda, não pode antecipar uma eventual retirada do mercado lenta de seu nicho. Considere aqueles que sabem como programar em nada mais que ColdFusion ou Flash… Essas tecnologias estão completamente mortas? Ainda não, mas os sinais mostram que é questão de tempo.

O potencial para mais trabalho

Ao ser capaz de se adaptar rapidamente a novas circunstâncias, um generalista raramente fica sem trabalho. Além do mais, ele pode criar a maioria dos produtos do início ao fim. Não só muitos generalistas acham isso gratificante, mas também maximiza a lucratividade, já que eles raramente precisam terceirizar. Isso está alinhado com as expectativas do cliente, que, geralmente, é que o fornecedor entregue a maioria de suas necessidades web — claro, pode haver ocasiões em que você precisa recorrer a especialistas.

Mas, antes de você resolver abandonar o caminho de ser um especialista, é justo compartilhar alguns perigos de ser um generalista.

Perigos de ser um generalista

Mais uma vez: o mote não é sugerindo que ser um generalista é certo para todos ou que algo está errado ao se especializar.  Mas ser um verdadeiro generalista não é um mar de rosas.

A luta para mostrar seu valor

Certamente, um dos maiores desafios para ser um generalista é se estabelecer como um expert e se destacar na multidão.

Generalistas muitas vezes são vistos quase como párias dos profissionais de web. Mas a verdade é que verdadeiros generalistas, aqueles com conhecimento extenso a respeito de uma ampla gama de assuntos, são muito raros. Os clientes compreendem que eles têm que pagar mais por habilidades altamente especializadas, mas não reconhecem a necessidade de pagar tanto por um conjunto amplo de habilidades diversas.

Além disso, generalistas raramente são os inovadores — se você é o tipo de pessoa que se importa com essas coisas. Eles não recebem a glória de desenvolver novas técnicas CSS ou estabelecer novos estilos de design. Em vez disso, os generalistas marcham atrás da vanguarda, selecionando os elementos que valem a pena adotar no mainstream.

A corrida constante pelo aprendizado

Generalistas continuamente têm de digerir o conteúdo de uma enorme variedade de fontes e decidir o que é de valor e o que se deve ignorar. Isso é incrivelmente exigente e, não raramente, alguma nova tecnologia ou tendência pode ser “descartada” para somente mais tarde, devido a movimentos vários da indústria, descobrir que vale a atenção.

Um generalista está sempre procurando novas áreas para explorar.

Se você não tem um perfil de ser estudioso/curioso, então ser um generalista certamente não é para você. Um generalista investe muito tempo todos os dias para ler blogs de especialistas que inovam para que possa ficar atualizado — também é preciso assimilar o que é aprendido, o que envolve tentar/testar uma variedade de técnicas.

E, certamente, algumas dessas novas técnicas podem simplesmente estar além das habilidades de um generalista.

Os limites de um generalista

Cair na armadilha de querer experimentar praticamente qualquer coisa que atravessa seu caminho é comum para um generalista. Embora admirável, essa qualidade pode acarretar prejuízo: generalistas podem desperdiçar horas tentando fazer o que um especialista poderia fazer em minutos. Pior ainda, o resultado pode ser não tecnicamente impecável e prejudicial à sua reputação.

Generalistas precisam conhecer seus limites — seja por saber quando chamar um especialista para ajudar ou simplesmente aceitar que eles não podem ser envolvidos em certas tarefas.

Conclusão sobre generalistas na web

É importante que haja um contrapeso ao impulso cada vez maior para a especialização. Mas é mais do que isso. Também é preciso haver um “respeito recém-encontrado” em relação aos generalistas: um reconhecimento de que o desenvolvimento de uma compreensão ampla dos aspectos cada vez mais complexos da web demanda tanta habilidade e esforço como se tornar um especialista em uma área.

Finalmente, este artigo também pode ser considerado um apelo àqueles que se consideram generalistas: levem seu papel a sério! Sejam generalistas verdadeiramente eficazes, que podem oferecer serviços valiosos para seus clientes e colegas e assumir compromisso de forma profissional.

Dessa maneira, certamente generalistas não ficarão carentes de bons trabalhos.


Os melhores bancos de imagens (stock images) grátis

Lista com os melhores bancos de imagens grátis (free stock images) em uma compilação sensacional para usar imagens em qualquer projeto web.

Todos nós já fizemos uma busca por imagens no Google. Mas em função do acordo antipirataria antipirataria com a Getty Imagesa empresa decidiu remover o botão “Ver imagem”. Também pensamos que fosse algum topo de brincadeira de mal gosto, mas é a sério mesmo! Se você fizer uma busca por imagens neste exato momento, já vai notar a falta do amado botãozinho…

A opção de arrastar uma imagem para a barra de busca (“busca reversa”) continua lá — e para os que não descuidaram dos mistérios profundos do clique com o botão direito do mouse, o impacto pode não ser assim tão grande –, mas o grande público, com a ausência da opção, certamente vai começar a visitar muito mais sites do que fazia antes, se é que vocês me entendem.

Fazendo do limão que a Google nos deu uma deliciosa limonada, segue lista dos melhores sites para conseguir imagens grátis para serem usadas — as famosas stock photos. Isso mesmo: os melhores bancos de imagens grátis que podem ser usadas à vontade, imagens sem direitos autorais. E estamos falando de boas imagens, de alta resolução, para serem usadas em qualquer projeto web!

Pexels

Sem dúvida alguma, Pexels é um dos melhores serviços de banco de imagens de graça que existem atualmente. Grande parte das imagens “hero” aqui do desenvolvimento para web são de lá. Dê uma passeada pelos posts para ter uma amostra da qualidade das imagens que o site oferece.

Para virar fã de vez, todas as imagens estão sob a licença Creative Commons Zero (CC0), que, na prática, significa que são de domínio público e é permitido usá-las à vontade, para qualquer fim, com ou sem edição, inclusive comercialmente.

O objetivo do Pexels é oferecer “high quality and completely free stock photos“, quer dizer, fotos de alta qualidade e completamente grátis. Até o momento, estão conseguindo. Com louvor.

Foter

Uma outra excelente opção quando o assunto é banco de imagens gratis é o Foter. Ao oferecer “Premium Royalty-Free Stock Photos“, ele também é uma alternativa de peso que deve ser sempre altamente considerado ao se procurar boas imagens.

Mas qual é o segredo para ser um stock de imagens com mais de 220 milhões de opções? Eles usam a API do Flickr para buscar fotos licenciadas sob Creative Commons!

Fazer uma busca por algum termo do interesse/necessidade ou navegando pelas categorias do Foter, rapidamente você vai comprovar que ele também é uma das melhores opções de banco de imagens disponíveis atualmente.

Pixabay

A primeira coisa que pode ser lida ao entrar no Pixabay é: Imagens gratuitas de alta qualidade. Mas talvez você encontre algo a mais: vídeos! Para entender melhor, não é preciso mais do que as própria explicação que consta no site:

Imagens e vídeos gratuitos que você pode usar em qualquer lugar: Pixabay é uma vibrante comunidade de criativos, compartilhando imagens e vídeos livres de direitos autorais. Todos os conteúdos são lançados no Creative Commons CC0, o que os torna seguros de usar sem pedir permissão ou dar crédito ao artista — mesmo para fins comerciais.

Com quase 1,5 milhão de opções (e crescendo), talvez você se arrependa de não consultar o Pixabay quando estiver procurando por imagens.

Unsplash

Há 3 regras do Unplash que você deve saber:

  1. As imagens são grátis para uso pessoal e comercial;
  2. Nenhuma atribuição é necessária e;
  3. Novas fotos são adicionadas diariamente.

A empresa canadense oferece incontáveis opções de imagens para serem usadas à vontade que podem ser encontradas através de busca, categorias ou coleções próprias, organizadas e disponibilizadas também de maneira gratuita.

Acesse e navegue um pouquinho pela Unsplash para comprovar a qualidade. Realmente não fica devendo nada para qualquer outro serviço de stock image similar.

Visual Hunt

Se você entra em um stock de imagens e quer opções, qual é o número de opções de imagens disponíveis bom o suficiente? Se a resposta é algo em torno de 350 milhões de fotos grátis, então certamente este é o momento de conhecer o Visual Hunt.

High quality free photos in one place“. Esse é o lema do Visual Hunt. Para tanto, eles são uma espécie de agregado de vários stocks de imagens, coletando diversas fotos pela web à fora e as juntando em um só lugar — também usando aquela ajudinha marota da API Flickr.

A maioria das imagens têm licença CC0, são divididas por categorias e tags e a busca é bastante eficiente. Ah, e eles deixam fazer o embed diretamente do site!

StockSnap

Sendo um auto-denominado serviço de curadoria de imagens, a frase que o pessoal da StockSanap gosta de divulgar é: “StockSnap is the best place on the internet to find beautiful free stock photos”, ou, em outras palavras, o melhor banco de imagens grátis da internet. Para saber se é verdade ou não que seja “o melhor”, você mesmo vai ter que entrar para conferir.

Todas as imagens — que podem ser encontradas pela busca, categorias ou uma seção especial de “tendências” — também estão sob Creative Commons Zero. Use sem pudores!

Contribua com os bancos de imagens grátis

Certamente a lista de sites de stock photos apresentados no artigo não pretende ser uma completamente abrangente. Existem literalmente milhares de sites que disponibilizam bancos de imagens e seria uma maluquice querer colocar todos em uma só listagem.

Mas estes são excelentes sites, de renome e reconhecimento mundiais. E sabe como chegaram a este status? A maioria deles permite a contribuição de qualquer um que julgue que suas imagens sem realmente de qualidade e devam ser compartilhadas sem limites com o mundo.

Se você gosta de dar uns cliques e gostaria de ajudar com estes fabulosos serviços de banco de imagens, veja quais desses lhe agradam mais, faça seu login e comece a fazer do mundo das imagens grátis um lugar ainda melhor!


Mitos de interface mobile – Mito 2: sites móveis requerem menos features

Segunda parte da série sobre mitos de interface mobile, abordando o mito: sites móveis requerem menos features.

Tenho certeza de que todos nos lembramos de como costumávamos usar a internet há quase 10 anos — estávamos principalmente procurando por “conteúdos sensíveis ao tempo”. Naquela época, nossas necessidades eram bastante imediatas e específicas.

Não é mais o caso.

Este é o segundo artigo da série sobre 5 mitos de interface mobile:

  • Mito 1: usuários móveis estão sempre com pressa
  • Mito 2: sites móveis requerem menos features
  • Mito 3: simplicidade é bom, complexidade é ruim
  • Mito 4: diretrizes não podem ser quebradas
  • Mito 5: designers e visitantes pensam igual

Mito 2: sites móveis requerem menos features

Naquela época, pessoas em dispositivos móveis acessando um site tinham pouca ou nenhuma intenção de explorar ou comprar qualquer coisa. As conexões de dados eram mais lentas e dispendiosas. Fazia sentido projetar sites móveis para tarefas reduzidas, oferecendo o mínimo.

A mentalidade geral era “se está em dúvida, deixe de fora” e se as pessoas quisessem visualizar o site completo, precisariam acessar de um desktop.

A verdade: priorize e maximize as capacidade que o mobile oferece

De acordo com a Pew Internet, a dependência de smartphones aumentou. 1 em cada 10 adultos nos EUA usa seus smartphones como principal meio para se conectar à internet e esse número está crescendo rapidamente. Para reforçar o cenário, enquanto o uso geral da internet aumentou, serviços de banda larga para residências têm se estabilizado nos últimos anos.

Hoje em dia, quando alguém visita um site em seu dispositivo móvel, espera encontrar tudo o que a versão desktop oferece. A maneira prática de conseguir isso é priorizar e maximizar os recursos de dispositivos móveis, incluindo:

  • Tirar proveito dos superpoderes de sensores de dispositivos móveis (algo que os desktops não possuem)
  • Colocar mais conteúdos e recursos em um site mobile — dependendo dos objetivos do visitante, isso pode significar a adição de botões de compartilhamento fixados na tela uma funcionalidade de toque rápido para voltar ao topo da página
  • Desenvolver sites para se adaptarem às necessidades específicas de cada tipo de dispositivo

A ideia é se livrar do pensamento de que uma tela menor indica menos intenção de explorar/usar. Ao invés de eliminar recursos em dispositivos móveis, priorize-os!

Ninguém está sugerindo que as informações sejam apresentadas exatamente da mesma maneira, independentemente de por qual dispositivo/configuração o acesso seja feito. Veja este exemplo:

Neste comparativo, fica claro que o espaço diminuto da tela é mal aproveitado à direita. À esquerda, já se foi direto ao ponto, estimulando o visitante a realizar a ação principal planejada sem delongas.

Fim da segunda parte sobre mitos de interface mobile

Tal como citado no primeiro artigo da série, este mito também já foi derrubado por Luke Wroblewski em 2011 (!), em seu livro Mobile First. Aqui no desenvolvimento para web também já alertamos sobre isso há anos…

Mas é realmente impressionante como até hoje aqueles que projetam sites continuam perpetrando a prática de remover recursos/informações de sites a partir de visitas mobile. Em muitas das vezes os pobres desenvolvedores não temos nada com isso; o erro vem “de cima”…

De qualquer maneira, fica a lição do artigo: priorize e maximize recursos de dispositivos móveis e tente ao máximo não penalizar quem acessa seu site/app oferecendo menos informações/recursos.


URLs amigáveis (slug) à WordPress

Apenda a gerar URLs amigáveis como é feito no WordPress e implemente em seu sistema PHP

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!

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:

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


O que SEO pode aprender com UX?

Pontos interessantíssimos sobre UX, SEO, a relação entre ambos e o que pode acontecer a estas carreiras a partir de agora.

Experiência do Usuário (ou User Experience, também chamada UX) desempenha um papel fundamental em orientar decisões básicas que moldam web sites e produtos digitais e, cada vez mais, está “tomando seu lugar à mesa”, por assim dizer. A razão é porque UX é multidisciplinar, englobando Design, Arquitetura da Informação, Usabilidade, Design de Interface, Estratégia de Conteúdo e Pesquisa. Apesar da sua relativa “juventude”, UX, como disciplina, tem crescido exponencialmente nos últimos anos.

Consultores de SEO são trazidos mais tarde ao processo e, geralmente, têm um alcance de trabalho limitado em UX, mas seus esforços podem ter um impacto mais amplo por causa dos números. Então, por que SEO parecem ter menos força com a liderança executiva?

Ambas as disciplinas construíram suas reputações na tomada de decisões apoiadas por dados, mas como especialistas em SEO podem aplicar o sucesso de UX em seus cargos?

Breve história

Pessoas que trabalham com Experiência do Usuário (UX) não acabaram de surgir. Eles eram psicólogos, jornalistas, designers de interface e arquitetos da informação – pessoas que escutam bem e pode traduzir suas descobertas em recomendações contextuais. UX, em sua forma atual, existe desde meados da década de 1990. Anteriormente, pessoas da área de UX estariam trabalhando em áreas afins como:

  • Psicologia
  • Ergonomia
  • Interação Humano-Computador
  • Design de Produtos
  • Biblioteconomia

SEO existe desde, pelo menos, 1997, e evoluiu em conjunto com a tecnologia. Antes disso, o análogo mais óbvio seria marketing. Há pontos em comum definidos nos dados que os profissionais de UX e SEO trabalham, mas as pessoas que trabalham nestas áreas têm diferentes origens e prioridades que podem contribuir para a desconexão entre os dois.

A maioria das pessoas que querem/têm um site veem SEO como uma grande prioridade. Ninguém quer pagar por um sistema que não existe aos olhos dos mecanismos de busca e, portanto, corre o risco de ter seu crescimento obstruído. SEO é uma preocupação crítica, mas é, em última análise, secundária a uma grande experiência.

O papel da UX

Implementar processos centrados no usuário se tornou uma prioridade em muitas empresas porque tem um alto retorno sobre o investimento (ROI), muitas vezes resultando, diretamente, em maior satisfação do cliente, crescimento do negócio e engajamento de marca.

Não existe uma definição singular sobre o que é o processo de UX, já que os que atuam na área trazem sua própria combinação única de habilidades e conhecimentos para os projetos e porque as recomendações variam de acordo com cada contexto em que se está trabalhando.

Alguns diriam que UX se concentra em acrescentar “personalidade” e utilidade para um meio inerentemente sem emoção. Um bom profissional de UX irá:

  • Ajudar pessoas (“usuários”) a alcançar seus objetivos
  • Equilibrar os objetivos do negócio com a integridade da experiência do usuário
  • Em última instância, ajudar as pessoas a melhorar suas vidas através da tecnologia

A grande marca de um consultor de UX é a facilitação (entre as preocupações dos stakeholders, estratégia, design, conteúdo e engenharia). Consultores de UX idealmente atuam como agentes de mudança dentro das empresas.

SEO e UX são diferentes

As pessoas realmente não enxergar uma interseção entre UX e SEO. É mais ou menos como na Corrida de Revezamento: eles não querem se tocar, só querem se apressar e seguir em frente.

Simplificando, SEO leva as pessoas a um site, aumentando a encontrabilidade de informações; e UX as mantêm lá, fazendo com que a informação seja envolvente e utilizável. Não é mágica. Os comportamentos de busca de informação que as pessoas usam para encontrar o que estão procurando pela primeira vez são muito diferentes dos “gatilhos” que levam a tráfego repetido.

Ambas as disciplinas são necessárias para acomodar diferentes tipos de informações de comportamentos de busca; o objetivo primordial deve ser o equilíbrio entre o ranking nos mecanismos de busca e a integridade da experiência da marca. Em última instância, a relação do usuário de longa duração é com a experiência.

“Me dê alguma coisa acionável”

Todo estão fazendo o trabalho necessário para ajudar produtos digitais a encontrarem sua audiência; como isso é alcançado é “o” ponto de diferenciação. Tudo se resume a todos pedindo a mesma coisa: “Me dê alguma coisa acionável”.

O que UX e SEO consideram como “acionável”?

SEO considera métricas web como acionável – dados quantitativos que são derivados a partir de medições. Ao lidar com o tráfego web, minutos ganhos podem se traduzir em números enormes em sites de grande escala. Devido ao fato de os consultores serem trazidos mais tarde no ciclo de planejamento de um produto, há uma ênfase em melhorias incrementais conforme o tempo passa.

UX emprega métodos de pesquisa qualitativa e quantitativa em sua busca pelo equilíbrio entre utilidade e prazer. Dependendo do projeto, você pode precisar de dados quantitativos, como web analytics. Outras vezes você pode usar dados qualitativos como:

  • Entrevistas com usuários
  • Análise heurística
  • Pesquisa de campo

Essas fontes de dados, qualitativas e quantitativas, são essenciais para a identificação de oportunidades de mudança – grandes e pequenas.

Estratégia de Conteúdo e SEO a longo prazo

A longo prazo, SEO deve quase que cuidar de si mesmo com uma boa Estratégia de Conteúdoe uma “voz de marca” diferenciada – conteúdo real deveria, teoricamente, levar a ganhos reais de tráfego.

Envolvente, o conteúdo exclusivo é essencial para a sua estratégia, claro. Essa estratégia poderia envolver o crescimento do “estilo” de uma marca ou o estabelecimento de liderança de pensamento em um campo, em particular, ou o desenvolvimento de uma marca orientada a serviço. Conteúdos novos também são cruciais se você está focado em compartilhamento social e backlinking, já que ambos aumentam o alcance de um site e fazem crescer a base de usuários.

Técnicas de SEO podem desvirtuar a Estratégia deConteúdo se aplicadas em excesso. Quando os ganhos são mais de de otimização, ao invés de conteúdo real, relevante, a experiência geral é diminuída. A desvantagem desta maior ênfase na estratégia de conteúdo é que SEOs podem, eventualmente, não serem mais necessários em dado momento.

Mas existe alguma forma de agregar valor e fazer crescer o papel de SEO que não está em desacordo com a experiência holística do cliente?

Educação como chave para a elevação da disciplina

É a educação a chave para elevar a disciplina e levar a SEO para o próximo nível?

Uma coisa que UX tem feito muito bem na última década é se promover. Existe uma comunidade ativa na internet dedicada a melhorar e legitimar a UX, ajudando a próxima geração de profissionais da área a crescer em seus cargos.

Design originalmente se referia ao apelo visual, mas esses esforços criativos muitas vezes tornaram muitos sites inutilizáveis… Design se expandiu para incluir UX, o que transformou o site atrativo num sistema coeso. Os sistemas foram ficando funcionais e atrativos, mas não particularmente interessantes, daí a necessidade da Estratégia de Conteúdo.

Qual é o objetivo de um sistema atraente, funcional e envolvente que não se pode encontrar? Assim, a necessidade de SEO. É um pouco de especialidade nicho que às vezes é tratado como um adendo pelo pessoal que faz a administração.

SEO ainda está, muitas vezes, associado a táticas questionáveis devido à época em que era mais comum que atualmente comprometer a experiência global em função de pequenos ganhos em rankings de busca. Táticas como:

  • “Keyword stuffing”
  • Rodapés obesos, cheios de links
  • Conteúdo falso e/ou de baixa qualidade

Capacitar a próxima geração de designers e SEOs para tomar decisões inteligentes e educar as partes interessadas nesse sentido é a chave para o crescimento da disciplina e elevação da percepção do nível executivo de SEO.

Jakob Nielsen recentemente levantou um excelente ponto sobre SEO de curto prazo ser, principalmente, sobre um bom design. E a definição de “bom design” deve incluir projetar com SEO em mente, para além de todas as outras coisas que os designers de hoje têm de se preocupar. Seria incentivar jovens designers de projetos de sistemas a não violarem osprincípios básicos de encontrabilidade, acessibilidade e credibilidade.

Quando designers se preocupam com os princípios básicos de SEO, eles têm o poder de melhorar a integridade de seus projetos. Quando as pessoas têm um sentimento de “posse” do processo, eles são mais propensos a valorizar a ênfase adicional nas melhores práticas de SEO. Consultores então seriam livres para o trabalho mais especializado ou para encontrar novas maneiras de contribuir para expandir a definição de seus papéis.

O valor de UX

Não existe uma quantidade finita de trabalho, empregos ou de receita; a grande coisa a respeito de UX é o tanto que as pessoas estão dispostas a pagar por isso. Rúben Steiger fala sobre isso em seu artigo “Who’s the Chief Experience Officer?“.

Em seu livro “Future Shock”, de 1971, o futurista Alvin Toffler falou sobre a vindoura “indústria experiencial” em que as pessoas no futuro estariam dispostas a alocar altos percentuais de seus salários para viver experiências incríveis […] […] Empresas precisam começar a pensar sobre a relação holística entre suas marcas, produtos e serviços. “Moldar” uma experiência requer um projeto que considera estes três elementos de marca, produto e serviço, a fim de gerar resultados bem sucedidos.

Faz sentido que as empresas teriam que sentar e prestar atenção às oportunidade em mãos. Diretores de Experiência (CXOs) até já começaram a fazer incursões na estrutura executiva da indústria da tecnologia. Quantos profissionais fizeram isso recentemente?

Muitas empresas querem ser a Apple, uma empresa reconhecida pela qualidade de sua UX, mas estes “wannabes” (termos pejorativo para se referir a pessoas que querem ser o que não são) não estão dispostos a colocar o trabalho em seus processos de design de produto e cadeia de suprimentos para suavizar os solavancos. Você não pode simplesmente imitar a aparência de um sistema porque, no minuto em que os usuários começarem a tentar fazer as coisas que querem/precisam fazer, as diferenças se tornam claras.

Experiência do Usuário tem um lugar à mesa porque o valor agregado é claro. Processos eficientes de design centrado no usuário resultam em maior satisfação do cliente, o crescimento do negócio e num engajamento global de marca. A contribuição da UX para produtos digitais, em última análise, ajuda as pessoas a melhorarem suas vidas através da tecnologia.

Pode a SEO ganhar um assento à mesa?

Especialistas em SEO podem ter de se adaptar a fim de evitar o destino de “marginalização”. Estratégia de Conteúdo apenas começou a ter seu “lugar ao sol” e sua contínua popularidade poderia reduzir a necessidade de otimização de busca para todos. Especialistas em SEO terão que aprender novas especialidades no futuro ou enfrentar a concorrência cada vez mais dura por trabalhos? Há outras oportunidades além dos paradigmas habituais para fazer crescer a posição de SEO dentro das organizações?

UX capturou o Zeitgeist (“Espírito do Tempo”) porque tem uma comunidade robusta dedicada a crescer, educar e legitimar o campo, e provou seu valor para a liderança executiva. Alguns diriam que SEO tem um problema de percepção, indo sempre pelo caminho do nível executivo.

Pode ser hora de considerar uma reeducação das partes interessadas e membros da equipe sobre o valor de SEO.


Pixels, pixels ou pixels? Dicas de Web Mobile com viewport

Foi-se o tempo em que pixel significava apenas o menor ponto na tela. Bastava dizer que uma imagem tinha 200px, e então ela ocuparia 200 pontos, ou seja, 25% de uma tela de tamanho padrão 800×600.

Mas o mundo mobile mudou completamente o jogo e, hoje, o conceito de pixel pode significar várias coisas.

(Atualização: escrevi mais detalhadamente sobre esses aspectos dos pixels diferentes e viewport, incluindo telas retina, no meu livro A Web Mobile, publicado pela editora Casa do Código. Se você estuda design responsivo, sites mobile, e assuntos relacionados, vai gostar desse livro.)

Os primeiros Smartphones

Era muito comum que os smartphones da Nokia lá pelos idos de 2007 tivessem uma resolução de 240×320 pixels, como um N95.

Quando surgiu o primeiro iPhone, sem teclado e só touch, a Apple decidiu explorar um tamanho maior de tela, 320×480 pixels. Era o dobro dos pixels normalmente usados na época, com um tamanho físico mais ou menos também com o dobro do tamanho.

Esses valores representam o tamanho físico do aparelho, o número de pixels físicos existentes. Na prática, um iPhone conseguia exibir páginas com mais que 320 pixels de largura. O truque era trabalhar com a ideia de zoom.

Na imagem anterior, abrimos o site da Caelum, que tem 960px de largura, em um iPhone de 320px. Repare como, apesar de menor, o Site está sendo renderizado corretamente.

Mas nosso HTML e CSS não foi codificado pensando em 320px, e sim em 960px. Quando colocamos a imagem do logotipo, por exemplo, nosso HTML diz <img src=".." width="160" height="50">. E, obviamente, o logo não está sendo renderizado a 160px, senão ocuparia metade da tela de 320px do iPhone. Se você medir, verá que o logo está sendo renderizado em mais ou menos 52px, ou 1/6 da tela do iPhone.

CSS pixels e o layout viewport

Repare que usamos uma medida de pixels no HTML/CSS que difere do pixel real usado na tela. O navegador do iPhone, na verdade, se comporta como se tivesse 980px de largura, embora o aparelho tenha apenas 320px. Isso é feito para que o usuário possa ver páginas feitas para Desktop sem problemas.

Nossa página funciona como se tivéssemos 980px disponíveis. Quando escrevemos “245px” no CSS, estamos nos referindo a 1/4 dessa tela imaginária de 980px. Na hora de exibir, porém, os 980px serão encaixados nos 320px reais, aplicando um zoom out.

Essa tela imaginária de 980px é o que chamamos de layout viewport. É o tamanho com o qual trabalhamos no nosso HTML/CSS, sem nos preocuparmos com a renderização no aparelho. Repare que um pixel no layout viewport tem outro significado do pixel físico do aparelho. É comum chamá-lo de CSS pixel.

Zoom e o visual viewport

Mas navegar no celular nessa página gigante sem zoom é praticamente impossível. A grande diferença da navegação mobile com a Desktop é o frequente uso do zoom e o scroll em todas as direções.

Na imagem acima, demos um zoom para ver mais detalhes. Repare que a o layout da página continua o mesmo. Um elemento de “245px” continua ocupando 1/4 do total do nosso layout viewport. A diferença é que, agora, só estamos visualizando uma parte do layout viewport; o restante está fora da tela, e precisaríamos fazer scroll para ver.

Isso nos leva para outro conceito importante: o visual viewport, que representa o tanto do layout viewport que conseguimos visualizar no momento.

Geralmente não estamos interessados no tamanho do visual viewport. Lembre que os CSS pixels são sempre relativos ao layout viewport.

Sites mobile e a meta tag viewport

Abrir um site Desktop no celular é uma experiência pouco agradável. Frequentemente, vamos querer criar uma página otimizada para mobile, que não demande tanto zoom e já mostre o conteúdo em tamanho e formato interessantes para uma tela tão pequena.

Como fazer? Obviamente, não podemos deixar a página com layout fixo em, por exemplo, 960px. Podemos tentar um width:100% no elemento principal, pensando em se adaptar a diversos tamanhos de tela.

Nosso layout viewport é considerado como 980px e o site é mostrado como se fosse de Desktop, com zoom mínimo e conteúdo praticamente ilegível. Que tal colocar width:320px, o tamanho real do dispositivo?

O layout viewport continua em 980px mas o conteúdo fica em 320px. O usuário precisa dar zoom para visualizar e, pior, a página fica com um imenso espaço em branco.

O que precisamos é uma forma de redimensionar o layout viewport para que ele seja mais adequado a tela pequena do mobile. A Apple introduziu uma meta tag viewport no iPhone que, depois, foi adotada em praticamente todas as plataformas móveis – Android, Opera, Windows Phone etc.

<meta name="viewport" content="width=320">

Isso indica ao navegador que o layout viewport deve ser 320px. Agora, colocar width:100% vai significar 320px, deixando a visualização mais confortável.

Viewport flexível com device-width

Deixar “320” fixo na nossa tag de viewport pode não ser uma boa ideia. Há diversos aparelhos diferentes no mercado, cada um com tamanho diferente. E mobile agora também inclui tablets, como o iPad, que tem largura de 800px.

É possível deixar a meta tag viewport com tamanho flexível, baseado no tamanho do aparelho. Basta usarmos:

<meta name="viewport" content="width=device-width">

Isso assumirá o valor, por exemplo, de 320px no iPhone e 800px no iPad. Outros aparelhos poderão assumir outros valores.

Altíssimas resoluções

Antes de aparecerem os Androids de alta resolução e, depois, o iPhone 4, toda a história dos pixels se resumia a diferença entre os CSS pixels e os device pixels. Isso porque um device pixel no iPhone clássico significava um pixel físico na tela.

A retina display mudou isso. O iPhone 4 passou a vir com resolução de 640×960 pixels, melhorando a renderização de textos e imagens. Outros celulares foram até além. O Galaxy Nexus, por exemplo, tem resolução HD de 720x1280px.

Como ficam nossas páginas mobile então que assumiam uma resolução bem menor? Com resolução tão alta quanto um Desktop, os celulares mais modernos vão renderizar as páginas bem pequenas, como um site Desktop? Nossas páginas continuam funcionando porque esses dispositivos de alta resolução continuam reportando um device-width de 320px, pra manter a compatibilidade.

A ideia de reportar um device-width diferente do tamanho de pixels físicos surgiu no Android e depois foi copiada pelo iOS e outras plataformas.

Dessa forma, conseguimos evoluir a resolução da tela com densidades de pixels maiores (dpi) sem afetar a forma como o usuário usa nosso Site mobile, que continua otimizado para telas pequenas.

Os três pixels

Um pixel, pode então, representar três conceitos diferentes quando lidamos com mobile:

Pixel físico: número real de pixels na tela. Nos celulares modernos, é um número altíssimo, com ótima resolução, geralmente com densidade acima de 300 dpi.

Device pixel: é o número de pixels reportado pelo aparelho como sendo seu tamanho. É pensado pra ser um valor que ofereça conforto visual para o usuário olhando para aquele tamanho de tela. É comum que esse valor seja 320px em celulares, copiado do iPhone original.

CSS pixel: é o que usamos no HTML/CSS como px, representando um tamanho dentro do layout viewport. Quando colocamos a meta tag viewport com valor width=device-width, estamos dizendo que nosso CSS pixel é igual a um Device pixel.

Hoje, no Desktop, esses três pixels são equivalentes**. Mas, em breve, teremos que lidar com esse tipo de diferença também no Desktop com a chegada das telas de alta densidade também aos computadores.

Lidando com zoom

Mesmo otimizando nossa página para 320px, o usuário ainda pode dar zoom na página. Em alguns cenários, pode ser interessante desabilitar o zoom, o que pode ser feito na tag viewport com user-scalable:

<meta name="viewport" content="width=device-width, user-scalable=no">

De maneira geral, é interessante deixar o usuário dar zoom caso queira, já que este é um gesto comum ao usar a Web no celular. Podemos, porém, controlar os níveis de zoom com as propriedades minimum-scale e maximum-scale:

<meta name="viewport" content="width=device-width, minimum-scale=0.5, maximum-scale=4">

O código acima indica que o usuário pode aumentar até 4x a página e diminuir até pela metade.

Podemos controlar também o nível padrão de zoom quando a página é aberta, com initial-scale:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

O valor 1.0 é muito comum quando trabalhamos com device-width e significa o zoom padrão. Se tivermos uma página Desktop não otimizada pro viewport de mobile, podemos usar essa propriedade para controlar o zoom inicial (lembre que o inicial é mostrar todo o layout viewport de 980px, o que pode não ser interessante).

Por fim, é importante citar um bug do iOS que afeta o zoom e o viewport quando rotacionamos o dispositivo em uma página com width=device-width que permita zoom. Se você abre a página no modo retrato, ele vai assumir o scale como 1.0, deixando o visual viewport igual ao layout viewport. Ao rotacioná-lo para modo paisagem, o dispositivo mantém o visual viewport no valor antigo, mas aumentando o layout viewport. Na prática, a página dá zoom automático e o lado direito da página não fica visível. O usuário, que não deu zoom, precisa diminuir o zoom para ver tudo.

É um bug famoso que acontece só no Mobile Safari do iOS, não existindo no Android e outras plataformas. A solução mais direta é desabilitar o zoom por completo, algo que é feito em diversos sites mobile por causa desse bug. Mas não é a solução ideal, já que poder dar zoom é uma feature que interessa ao usuário mobile. Existem alguns hacks para tentar resolver esse problema no iOS.

Conclusão

Trabalhar com telas diferentes é um grande desafio. O uso da meta tag viewport procura facilitar a padronização das páginas nos mais diversos tamanhos de telas e densidades de pixels. Compreender os diferentes significados de viewports e pixels é essencial para se desenvolver para mobile.

E, usando ainda media queries, podemos criar páginas que se adaptem facilmente a diversos dispositivos.

O curso WD-43 da Caelum, de desenvolvimento Web, trata também de tópicos de Web Mobile. Mostramos o uso do viewport e media queries para criação de uma página responsiva. Além disso, meu livro A Web Mobile, aprofunda em diversos assuntos de design responsivo e aspectos técnicos de sites para dispositivos móveis.

Referências

** No Desktop, quando damos zoom numa página, também temos a complicação dos viewports diferentes e a diferença entre CSS pixels e device pixels. Mas, na prática, todo mundo ignora e assume zoom de 100%, onde os CSS pixels são iguais aos device pixels.


Missões de manutenção do site
Mantenha seu negócio on-line funcionando sem problemas com um controle mensal dessas áreas cruciais
Recentemente, eu estava na concessionária de automóveis assistindo o trabalho de mecânica no meu carro, e de repente um pensamento me pareceu: quantos proprietários de empresas on-line verificam regularmente sob o capô para garantir que seus sites estejam funcionando sem problemas?

E mesmo que você faça exames freqüentes no seu site, você tem certeza de que está dando uma resposta completa? Cerca de uma vez por mês, você deve “pular o capuz” para realizar um check-up abrangente, encontrar o que não está funcionando e consertá-lo. Aqui está o que você deve procurar:

Estatísticas de tráfego O
seu host deve fornecer estatísticas básicas, mas considere obter o programa gratuito do Google Analytics ou usar os serviços de uma empresa de análise de internet baseada em taxas – você terá uma visão mais profunda de como seus visitantes viajam através do seu site. Você deve ser capaz de responder as seguintes perguntas:

  • Em quais páginas seus visitantes deixam seu site? Por exemplo, eles abandonam seu site na página da ordem sem fazer um pedido? Em caso afirmativo, talvez haja um problema com o processo de check-out.
  • Quanto tempo os visitantes gastam no seu site e em cada página individual? Se eles visitam sua página inicial e depois saem quase que imediatamente, obviamente você não está chamando sua atenção.
  • Como seus visitantes o acham? São sites particulares que enviam muito tráfego ao seu lado? Você pode aproveitar isso de alguma forma em parceria com eles? A maioria de seus visitantes vem de um motor de busca específico? Em caso afirmativo, qual poderia ser o motivo disso – e como você pode contrariar o tráfego de outros motores de busca? Quais palavras-chave e ofertas em seus anúncios de pagamento por clique estão melhorando? Você pode incorporá-los em outros lugares em seu site?
  • O que está causando picos de trânsito? De onde vêm os visitantes? Existe um novo link apontando para o seu site? Uma campanha de e-mail ou anúncio de PPC é particularmente bom? Poderia haver uma razão sazonal? Como você pode fazer isso uma ocorrência regular?
  • Onde vivem os seus visitantes? Se houver muito interesse de um determinado local, você pode ajustar seu site para atender especificamente a essas pessoas (por exemplo, oferecendo serviços em outro idioma)?
  • Quais termos de pesquisa e palavras-chave resultam na maior parte do tráfego para o seu site? Você pode colocar mais destes – ou outras palavras-chave semelhantes – em seu código e conteúdo para atrair ainda mais tráfego?

Estatísticas de vendas O
tráfego é bom, mas as vendas fazem você ganhar dinheiro. Acompanhe suas taxas de conversão – a porcentagem de seus visitantes que realmente se tornam clientes pagantes. Muitas rotas com poucas conversões indicam que existe algum tipo de desligamento entre a mensagem que leva as pessoas ao seu site e a mensagem que eles estão a ver quando chegarem lá. Olhe para onde você perde essas pessoas e você verá por onde começar a ajustar e testar. O menor tráfego com altas conversões significa que você está fazendo as coisas certas no seu site e você precisa se concentrar em obter mais tráfego.

Taxas de resposta por e-mail
Verifique sempre seus números de tráfego e vendas cuidadosamente após cada envio de e-mail. Você pode descobrir quais linhas de assunto e ofertas promocionais estão funcionando melhor para você, e mesmo quais horas do dia, semana e ano são melhores para seus e-mails.

O e-mail ainda é uma das técnicas de marketing mais eficazes, e você aproveitará o máximo se você automatizar todas essas tarefas de e-mail desde o início. Um sistema de gerenciamento de e-mail como iContact economizará tempo e fornecerá resultados detalhados em um formato amigável para que você possa facilmente analisar o que está funcionando e o que precisa funcionar.

Manutenção geral
Aqui estão algumas outras coisas relacionadas ao seu site que você deve observar de perto:

  • Verifique se há links quebrados e outras falhas técnicas em seu site. As Ferramentas do Google para webmasters podem ajudar com isso. Outro bom recurso para verificar links quebrados e outros fatores que afetam o desempenho do seu site – como a velocidade de carregamento do seu site – é o Sitereportcard.com .
  • Procure palavras-chave relevantes para sua indústria para ver se o seu site aparece nos resultados da pesquisa.
  • Verifique os sites dos seus concorrentes regularmente para ver se eles estão executando promoções especiais ou têm novos produtos. Se você realmente deseja ver seu funcionamento interno, você pode usar uma ferramenta paga como KeywordSpy ou iSpionage para ver quais palavras-chave estão usando e onde. E certifique-se de se inscrever para seus boletins informativos ou feeds RSS – é uma ótima maneira de manter a guia sobre o que eles estão fazendo.
  • Procure na web frases aleatórias das páginas do seu site para se certificar de que ninguém esteja usando seu conteúdo sem voltar para você.
  • Procure no nome da sua própria empresa e URL para ver se alguém está dizendo algo ruim sobre você.

Um mau funcionamento no seu site pode ser tão prejudicial para o seu negócio como uma falha de freio seria para o seu carro. Idealmente, você deve reservar um dia a cada mês para realizar uma revisão importante do site. Isso manterá seu negócio funcionando tão bem como um motor bem oleado.


Saiba mais sobre Wireframes antes de contratar um desenvolvedor da Web
Você deve explicar sua visão se você espera que seu desenvolvedor web compartilhe sua visão.
As opiniões expressas pelos contribuintes empresariais são próprias.

Como alguém que esteve em ambos os lados do contrato, como freelancer e como cliente, uma das coisas mais bem vindas que você pode fazer para um freelancer é ajudá-los com seu trabalho de forma significativa.

Você é o cliente do inferno?

Quando se trata de desenvolvimento web, isso significa duas coisas. Primeiro, leia os Clientes do Inferno e se esforça para nunca ser “esse cara”. Em segundo lugar, esteja pronto para apresentar seu desenvolvedor web com um wireframe.

Quando digo a palavra wireframe, o que você imagina? Se você está pensando em CGI e modelos poligonais dos anos 80, você está um pouco fora da marca. Um wireframe de design web é como esse esqueleto poligonal, mas para um site.

O que é um wireframe?

É um layout gráfico e design que não exige nenhuma codificação, manipulação de imagem, ou mesmo mais do que colocar um lápis em uma folha de papel quadrado. Basta verificar alguns desses exemplos .

Um wireframe é uma ferramenta incrivelmente útil para um desenvolvedor web. Isso mostra exatamente o que você tem em mente e dá-lhes uma idéia da escala de vários elementos, os elementos cruciais que você deseja incluir em suas páginas. O wireframe é uma espécie de truque de codificação que eles podem precisar para implementar para que tudo aconteça.

Desta forma, você não os surpreende com “oh, e por sinal, eu quero a navegação na barra lateral” ou “hey, na verdade, você pode fazer essa imagem estática uma apresentação de slides?”

Você economizará tempo, você economizará dinheiro e você salvará o sangue, o suor e as lágrimas de você e seu desenvolvedor web.

Mas espere! Eu estou assustado.

Se você tem medo da complexidade de um wireframe, não se preocupe com isso. Você não precisa fazer um design em escala completa de todas as páginas em seu site. Tudo o que você realmente precisa são os princípios básicos. Você quer saber onde você terá sua navegação e qual o tipo de layout que deseja para as páginas do produto.

Você quer um par de detalhes sobre quantos slots extras você precisa para miniaturas de artigos ou outros produtos relacionados. Alguns dos wireframes da galeria acima são muito simples, não mais do que um punhado de caixas aninhadas em outras caixas, mas ainda é suficiente para um desenvolvedor web começar.

Além disso, lembre-se, faz parte do trabalho do desenvolvedor para ajudá-lo a refinar o design. Eles podem dizer-lhe “hey, este design é um pouco confuso, e se cortarmos isso e mudarmos para lá?”

O design moderno é uma chave.

Eles podem dizer-lhe que os padrões de design modernos sugerem que você não deveria ter sua navegação no lado direito na calha. Eles podem usar seu wireframe como base. Apenas corta as primeiras cinco ou seis fases de prototipagem de ida e volta, o desenvolvedor normalmente teria que passar para chegar a este estágio com você.

Os wireframes também são muito fáceis de criar, desde que você tenha e mantenha uma visão do que você deseja que seu site pareça. Eu já disse que você pode colocar um lápis em uma folha de papel e fazer um, mas você também pode usar uma das dezenas de aplicativos lá fora.

O padrão da indústria que encontrei é o Balsamiq, que é livre para tentar e barato para comprar. Ou você pode usar outras ferramentas como Wireframe.cc, Moqups ou UXPin para soluções baseadas na web.

Se preferir trabalhar a partir de um tablet ou dispositivo móvel, o OmniGraffle funciona no iOS, o Wire Flow funciona no Android e o Fluid UI funciona em ambos.

Tudo o que você faz é um processo.

Na verdade, não é tão difícil quanto parece – ou soa. Lembre-se, produzir qualquer coisa é um processo iterativo. Passando de uma idéia para um esboço, de um esboço para um wireframe, de um wireframe para um projeto mais detalhado, e de lá para um protótipo é típico.

Qualquer quantidade de ajuda que você possa trazer para o seu desenvolvedor percorrerá um longo caminho – e confie em mim – é muito apreciada.


Uma nova ferramenta para adicionar recursos do Facebook ao seu site

Boas notícias para o empresário das redes sociais: o Facebook facilitou a integração de suas funções sociais em muitos sites. O gigante da mídia social baseado em Menlo Park lançou seu próprio plug-in pré-fabricado para o popular site e ferramenta de blogs , o WordPress.

Com o novo plug-in, chamado Facebook para WordPress , os proprietários de sites podem adicionar botões Like, Subscribe, Send e Recomendações facilmente em páginas não só, mas também em álbuns de fotos e lojas online – adicionando opções adicionais de compartilhamento e engajamento. Uma função chamada Social Publisher publica automaticamente novos conteúdos em um site de volta para a página do Facebook da empresa. Existem também funções Insights, que acompanham a quantidade de atividade que ocorre.

Ao ser apelidado de “o oficial” plug-in do Facebook para o WordPress, esta ferramenta entra em um campo lotado de complementos do Facebook, incluindo o Facebook Connect , o Facebook Tab Manager e os membros do Facebook .

Aqui estão quatro razões pelas quais um negócio pode considerar a integração de recursos do Facebook em sua experiência online:

1. É fácil de adicionar. 
Os sites que funcionam no WordPress devem encontrar o plug-in simples de baixar e configurar a partir dos painéis de controle do WordPress. As opções incluem cor, tamanho e escolha as páginas para colocar links no Facebook.

Para sites que não usam o WordPress, você ainda pode adicionar muitos desses recursos ao seu site. Visite os desenvolvedores.Facebook.com e escolha entre opções semelhantes. O Facebook fornecerá algumas linhas de código para copiar e colar nas ferramentas de edição nas páginas de controle de um site.

2. Obter novos “amigos”. 
Ao adicionar um botão “Curto” ou “Compartilhar” em uma página ou publicação, as empresas estão permitindo que clientes e visitantes compartilhem conteúdo facilmente em suas próprias paredes no Facebook. Esse recurso pode ajudar a espalhar a mensagem de uma empresa mais, mais rápido e ajuda as informações a serem virais.

Considere também usar o recurso de comentários do Facebook. Permite que as empresas evitem discriminadores anônimos e coloca nomes e rostos reais para comentários.

3. Acesse análises mais detalhadas. 
O recurso Insights do plug-in pode fornecer uma dimensão adicional às análises para empresas. As empresas já têm acesso aos dados de log da Web para quantas pessoas visitam seu site e de onde elas são. Mas com a Insights, as empresas podem dizer quantos visitantes realmente “gostam” de uma página.

Por exemplo, postar um álbum de fotos com 100 visualizações pode ser analisado adicionalmente, rastreando qual imagem obtém o máximo de “Likes”. Os dados que você coleciona da Insights podem ajudá-lo a melhorar o envolvimento do cliente com seu site.

4. Mantenha sua marca socialmente relevante. 
O plug-in torna tão simples quanto possível colocar um ícone bem conhecido, como o botão “Curtir” do Facebook na página da empresa. Com mais e mais clientes socialmente conscientes, isso pode ajudar a aumentar a credibilidade adicional em um site.


Página 1 de 41234