A página inicial de seu site, provavelmente, é a página mais importante de todo seu domínio. Ela é o primeiro contato do visitante com seu site, o tapete de boas vindas para sua empresa. É por meio dela que o visitante vai decidir se explora o site ou se vai embora. E para conseguir o maior público possível, ela tem de estar perfeita.

Ao acessar o construtor de sites da Turbosite, a sua primeira interação vai ser com construção da página inicial. Todos nossos Templates já modelam uma ideia de localização e conteúdos que você pode colocar nessa página, o que já ajuda bastante a dar seus primeiros passos. Porém, tudo isso ainda não é o bastante para transmitir uma identidade única para seu site.

A equipe da Turbosite retirou da página da UpInside 5 dicas para a construção da página inicial. A seguir você confere estratégias interessantes, que buscam manter o visitante mais tempo em sua página e atraí-lo para navegar por outros conteúdos de seu site.

1) Sirva conteúdo de qualidade

Existe uma falsa ideia na internet que temos que servir muito conteúdo diariamente em nossos sites. Mas até que ponto isso é promissor? Será que vale tudo para atrair mais usuários ao site? E ainda, será que esse tipo de estratégia é sustentável?

A dica aqui é, vale mais 100 posts de qualidade do que 1000 posts mais ou menos. E a ideia é bem simples.

Todo site é construído com um nicho de mercado específico. Quando recebemos nossos usuários, eles entram em nosso site por um link de interesse. Pesquisa, indicação, social. Seja qual for a origem do tráfego, ele entrou procurando algo.

Se tivermos 100 posts dentro do site que forneçam conteúdo atrativo para esse usuário, a chance de navegação por mais conteúdo é bem maior. Com links de relação ou mais vistos você consegue servir mais conteúdo de interesse.

Ainda por ter menos posts e com mais qualidade, seu usuário vai consumir o conteúdo em menos tempo, vai aproveitar melhor esse conteúdo e ter uma experiência agradável.

Agora, se você tiver 1000 posts e entre eles 100 posts de primeira. A chance deste usuário bater em um conteúdo sem relevância antes de criar um vínculo é bem maior. O resultado? Talvez seu usuário saia e não volte mais.

Claro que a frequência também é importante. Afinal é muito raro você ler a mesma coisa 2 ou 3 vezes. Mas vale mais 1 post bom por semana, que 7 ganchos de conteúdo sem qualificação para seus prospectos.

Claro, se você tiver 1000 posts de primeira a conversão e ranqueamento são bem maiores.

2) Desperte o interesse sem entregar o conteúdo

Estamos falando de página inicial, que é o link de entrada para seu conteúdo. Essa página deve ser tratada como uma capa. Sua função é exibir as atualizações e entregar valor e interesse ao seu usuário. Não o conteúdo!

Procure aqui servir uma boa hierarquia de conteúdo. Crie uma vitrine de seus posts e exiba apenas o essencial. Uma capa, um título e uma pequena descrição com links de acesso intuitivos para que o usuário navegue em seu site.

Sites que mostram muito na capa tendem a ter maior rejeição e menos ranqueamento no Google. Isso acontece porque o motor entende que se o usuário não navegou é porque não gostou do que viu ou não encontrou o que o link propôs.

Também procure não servir muitos posts. Eu diria para você ficar entre 7 e 10 atualizações. Isso é importante pois esses posts terão seu rodízio. A medida que você posta novidades você está alterando o visual da capa.

Isso é importante para que o usuário tenha sempre um impacto diferente ao acessar seu site.

3) Nada é de graça, pague pela interação

Essa dica é simples e muito importante para que seu site tenha realmente conversões positivas em servir links de compartilhamento, curtidas e tudo mais. A interação não deve ser requisitada e sim remunerada.

Sua moeda aqui é o conteúdo. Então não faz sentido você servir Plugins de curtidas ou compartilhamento na página inicial do site. A não ser que você crie sua share box e consiga colocar esses links dentro do contexto do layout.

Mas no geral pense assim. Porque um usuário iria compartilhar ou curtir qualquer coisa antes de realmente gostar (curtir) daquilo? Então a página inicial do seu site não serve para pedir interações. Isso deve ser feito depois de entregar o conteúdo.

Mas claro, a página inicial pode fornecer prova social. Então em vez de servir uma ação de curtir, prefira servir uma box mostrando quantas pessoas já curtiram sua página. Isso gera engajamento com seu usuário.

A melhor prova social hoje é o like box do Facebook. Pois ele mostra (quando ocorre) os seus amigos que já curtiram aquilo e isso é uma grande prova social. Se seu amigo gosta você aumenta a confiança do usuário no site.

4) Evite tirar seu usuário do site

A página inicial do site tem por conquista a maior relevância para links. É como se fosse nosso MAPA do projeto. Sabemos naturalmente que a home foi construída para indicar o conteúdo do site. Nos levar até os melhores, mais vistos e últimos posts do mesmo.

Nosso comportamento? Qualquer usuário que entre em um site pela página inicial procura links para clicar! Um caminho ou direção para chegar até um conteúdo que procura. Sem falar na pesquisa interna.

Então é muito importante que você evite links externos na página inicial. E esses links podem estar em banners do AdSense, parceiros, entre outros. Se seu usuário sair do site logo que acessa a página inicial, sua taxa de rejeição aumenta imediatamente.

5) Monitore o comportamento

Existem várias formas de você monitorar o comportamento dos seus usuários. O GA (Google Analytics) é a melhor e mais completa ferramenta para isso.

Com o monitoramento correto você consegue saber muito mais do seu público. Monitorando a pesquisa por exemplo. Você consegue saber com precisão o que cada usuário procura dentro do seu site. Com isso você pode saber sobre o que escrever no futuro.

Você também pode criar vários funis dentro do GA. Criando um passo a passo de URL, um link de entrada ou até um destino, e assim saber quantos usuários estão convertendo aquele objetivo. Assim você pode melhorar ainda mais a experiência deste usuário nesse quesito.

Por fim, você ainda pode criar alertas de tráfego. Quantos % melhorou com relação ao dia, mês, semana anterior entre outros. Assim quando você posta um novo título ou cria alguma estratégia diferente. Você consegue saber se aquilo deu certo ou não.

Isso funciona para o site em um todo. Mas veja que é possível saber se sua página inicial está conseguindo essas conversões. Monitorar os links e saber se está realmente intuitivo para o usuário navegar a partir dela.

Deixando o JavaScript um pouco de lado, mostraremos como fazer alguns componentes, como por exemplo um select customizado, usando apenas CSS. Existem vários plugins JavaScript que fazem, mas por que não fazer apenas com css deixando o site com melhor desempenho e o código mais simples?

Abaixo você pode conferir um ótimo exemplo desse metodologia. Com um simples código CSS é possível criar um accordion para sua página.

Gostou desse efeito? Então continue lendo a postagem e explicaremos todo o funcionamento dessa metodologia.

Na verdade não há muito segredo para se fazer um componente apenas com CSS, o truque está na tag  label. Com a label podemos usar o atributo for e um input (checkbox ou radio) para manipular os eventos das animações, como por exemplo, o evento de click. Vamos explicar melhor com um exemplo bem simples.

Código HTML:

<div class="content">
    <input type="checkbox" id="content-change-color" />
    <p>Aqui é o texto que trocará de cor.</p>
</div>
<label for="content-change-color">clique para trocar a cor do texto.</label>

Código CSS:

#content-change-color:checked + p{
    color: red;
}

Abaixo você pode conferir o funcionamento:

Acreditamos que tenha ficado claro até aqui, para quem não conhece o seletor “+” do css ele é um pattern utilizado para encontrar elementos igual ao .next() do jQuery, ele pega o próximo irmão e coloca o estilo setado, com essa base já da pra entender como funciona mas vou explicar os passos.

Ao clicar na label ele da o check no input que tenha o mesmo id do seu atributo “for” ou no input que estiver dentro da própria label, no css colocamos um estilo pra quando o input estiver com o checked e usamos o “+” para estilizar o próximo elemento.

Podemos ir muito além com outros seletores como por exemplo o “~” que faz uma busca não apenas no irmão mas em todos os irmão que forem interrompidos com outras tags por exemplo, ou mesmo o “>” que pega o primeiro filho.

Para quem quizer saber mais sobre seletores css veja esse link.

Agora que você já conhece um código básico, passamos para a construção de um componente accordion. Abaixo você confere o código para gerar o efeito visto acima:

Código HTML:

<div class="accordion">
    <label>
        <input type="radio" name="accordion-radio" />
        <strong>Título 1</strong>
        <div>Conteúdo 1</div>
    </label>
    <label>
        <input type="radio" name="accordion-radio" />
        <strong>Título 2</strong>
        <div>Conteúdo 2</div>
    </label>
    <label>
        <input type="radio" name="accordion-radio" />
        <strong>Título 3</strong>
        <div>Conteúdo 3</div>
    </label> 
</div>

 Código CSS:

.accordion{
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 14px;  
}
  
    .accordion label{
      background: #f1f1f1;
      border: 1px solid #ccc;
      border-radius: 5px;
      box-sizing: border-box;
      display: block;
      margin-top: 1px;
      position: relative;
    }
      .accordion strong{
        box-sizing: border-box;
        display: block;
        height: 34px;
        margin-top: 1px;
        padding: 7px;
        position: relative;
      }  
        .accordion strong:after{
          content: '';
          border: 7px solid transparent;
          border-top: 10px solid #282828;
          position: absolute;
          top: 12px;
          right: 15px; 
          
          -webkit-transition: all .3s ease-out;
          transition: all .3s ease-out;
        }  
        .accordion input{
          height: 34px;
          left: 0;
          opacity: 0;
          position: absolute;
          top: 0;
          width: 100%;
          z-index: 1;
        }
        .accordion input:checked + strong:after{
          top: 4px;
          right: 15px;
          
          -ms-transform: rotate(180deg);
          -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
        }
        .accordion input:checked + strong + div{
          padding: 10px 20px;
          height: auto;
        }
      .accordion div{
        background: #fff;
        box-sizing: border-box;
        border-top: 1px solid #ccc;
        border-radius: 0 0 5px 5px;
        height: 0;
        padding: 0 20px;
        overflow: hidden;
        -webkit-transition: all .3s ease-out;
        transition: all .3s ease-out;
      }

É claro que esse código ficou maior, porém voltando a atenção apenas a label e input, podemos trocar nosso input de radio para checkbox para podemos abrir mais de um ao mesmo tempo. Como esse exemplo mais completo já da pra imaginar o quanto podemos fazer apenas com css não é?

Não basta apenas ter um site bonito, precisa também de uma Hospedagem confiável e rápida, a Turbosite está a mais de 15 anos prestando serviços em Hospedagem.
Quer saber mais? Acesse: www.turbosite.com.br.

Apenas apertando a tecla F12, conseguimos ter acesso ao console da página, registro de erros, código fonte, mudar completamente o estilo da página, tempo e banda do carregamento de cada elemento, entre várias outras funções. O Developer Tools é uma ótima ferramenta, indispensável para qualquer projeto web.

Encontramos um artigo no blog howchoo que ensina a aplicar o tema Dark em nossa ferramenta, ideal para quem quer deixar o console com sua cara. Os passos a seguir ensina aplicar o tema Zero Dark Matrix.

Para novos aventureiros, siga estritamente esses passos.

Passo 1: ativar a opção Developer Tools Experiments

Pela barra de endereço, acesse chrome://flags. Role a página um pouco para baixo e procure pela opção “Ativar experiências das Ferramentas do desenvolvedor”. Ative-a e reinicie seu navegador (feche e abra novamente).

Passo 2: ativar UI Themes personalizados.

Aperte F12 para abrir seu Developer Tools. Click no ícone Settings (um ícone de engrenagem, na parte de cima na direita), selecione “Experiments” e marque a opção “Allow custom UI themes”. Feche a ferramenta em seguida.

Passo 3: baixe um tema

Nesse tutorial usaremo o tema DevTools Theme: Zero Dark Matrix. Click aqui para baixar-lo pela Chrome Web Store. O tema será baixado como uma extensão do navegador. Baixe o tema e ative-o.

Passo 4: abra seu Developer Tools

Pronto! Você acaba de aplicar uma tema “Dark” ao seu Developer Tools.

Existem diversos temas para serem aplicados, recomendamos também os temas greybeard e Flatland. Se você achou mais algum tema interessante, compartilhe-o com seu comentário abaixo.

A publicação abaixo explica, de forma bem simples, como aplicar filtros em imagens usando apenas CSS3. A possibilidade de aplicar filtros com CSS já é possível desde algo em torno de 2011, mas apenas para o motor WebKit. Agora essa possibilidade se transformou de fato em rascunho do W3C para que um dia vire uma recomendação. O suporte ainda não é muito bom, mas, dependendo do seu público, você já pode usar agora.

A sintaxe é simples e bem fácil de entender:

seletor { filter: funcao(valor) | none }

Os valores possíveis por enquanto são:

• blur()
• brightness()
• contrast()
• drop-shadow()
• grayscale()
• sepia()
• hue-rotate()
• invert()
• opacity()

O script abaixo mostra os diferentes efeitos aplicados à imagem.

Abaixo você pode ver alguns exemplos:

Existem algumas observações interessantes sobre a aplicação dos filtros. Por exemplo, se você quiser combinar os filtros sepia() e grayscale(), certifique-se de adicionar sepia() antes do grayscale(), caso contrário o resultado será apenas grayscale().

Você pode não entender o efeito de hue-rotate(), sugiro que leia mais sobre HUE aqui. Leia mais sobre cores na web aqui.

Dos três modos de otimização (configuração de hardware do servidor, configuração de rede do servidor e otimização de código), apresentamos aqui métodos para otimização por código MySQL.

MYSQLREPORT

Como primeiro passo, você pode usar o comando MYSQLREPORT para gerar relatórios sobre bancos de dados que estão atingindo o limite de sua capacidade de uso  e estabelecer um patamar para operações e usos adicionais. Talvez também você se veja obrigado a modificar arquivo de configuração (my.cnf) para registrar o log de consultas lentas. Identifique as consultas que estão processando muito devagar e as possíveis causas.

Para acessar a documentação completa do MYSQLREPORT, recomendamos esse link: man.he.net/man1/mysqlreport.

EXPLAIN

Aplique o comando EXPLAIN antes do script SELECT para o MySQL retornar um registro contendo a análise do script para aquela tabela consultada. Esse método retorna algumas informações, como ID, SELECT_TYPE, TABLE, TYPE, KEY_LEN, REF, sendo que as informações que você vai querer para avaliar o desempenho do código são:

• POSSIBLE_KEYS: mostra os índices disponíveis para serem utilizados naquela consulta;
• KEY: mostra o índice escolhido pelo MySQL para realizar a consulta;
• ROW: número estimado de linhas percorridas para encontrar o resultado do SELECT;
• EXTRA: sugestões de otimização em índices da consultas, como usar DISTINCT, NOT EXIST, USING INDEX, entre outras.

EXPLAIN SELECT * FROM funcionarios;

ANALYZE

Use o comando ANALYZE para gerar uma distribuição de chaves, para a tabela a ser utilizada pelo otimizador de consultas do MySQL, para decidir quais índices serão melhores se utilizados em uma consulta.

ANALYZE TABLE funcionarios;

OPTIMIZE 

Se há grandes quantidades de inserções/exclusões em uma tabela, principalmente se a tabela conter muitos campos do tipo varchar, text e blob, o disco será comprometido à várias fragmentações. O comando OPTIMIZE deve ser usado com freqüência para esse tipo de situação. O comando ira otimizar a movimentação da cabeça de leitura e gravação do disco durante a recuperação de dados, implementando a desfragmentação do disco causada por campos de comprimento variável.

OPTIMIZE TABLE funcionarios;

LOAD DATA INFILE

Para a importação de dados para uma tabela, o comando LOAD DATA INFILE, no lugar do comando SELECT, irá apresentar um desempenho até 20 vezes melhor.

LOAD DATA INFILE 'filedata.dat' INTO TABLE funcioanrios (col1,col2,...,colM) 
     FIELDS TERMINATED BY '|'");

TRUNCATE

O comando DELETE deleta linha por linha, enquanto TRUNCATE deleta todas as linhas de uma só vez. Portanto, se você não estiver interessado no número de linhas suprimidas de uma tabela, como resultado do comando DELETE, utilize o comando TRUNCATE com a seguinte sintaxe:

TRUNCATE TABLE funcionarios;

Prioridade dos comandos

Se há mais consultas do que inserções de dados, você pode ter uma prioridade mais baixa do comando INSERT utilizando

INSERT LOW_PRIORITY

ou

SELECT HIGH_PRIORITY

Se o cliente não está interessado nos resultados do comando INSERT, então esta operação já pode imediatamente utilizar menos os recursos do sistema, utilizando-se o seguinte comando:

INSERT DELAYED

Isso torna o sistema mais rápido porque acumula as inserções em lotes.

Permissões no MySQL

Além de incrementar na segurança da conexão, criar usuários com permissões específicas reduzem o overhead das verificações das permissões em todos os comandos realizados no MySQL, melhorando assim no desempenho do sistema. Como exemplo, um leitor do blog apenas tem interesse na leitura de postagem, leitura e inserção de comentários. Criar um usuário de nome “leitor”, com acesso apenas a leitura da tabelas ‘postagens’, e acesso a leitura e escrita à tabela ‘comentarios’, será de fato uma boa prática. A segurança será incrementada, já que aquele usuário não terá permissão de acessar, modificar ou deletar outros registros que não são de seu respeito, como também o desempenho, já que o overhead do usuário constará suas propriedades de acessos de antemão.

GRANT Oper1,...,OperN ON db_name.tb_name TO user_name@computer_name IDENTIFIED BY password;

BENCHMARK

Por fim, para saber quanto tempo uma determinada função ou expressão MySQL está demorando, use a função MySQL embutida:

SELECT BENCHMARK ( 10000, ( SELECT col1 FROM funcionarios LIMIT 1 ) );

Lembrando que, para passar consultas na função BENCHMARK, obrigatoriamente a query deve retornar 1 linha com 1 coluna.

 Outras dicas corriqueiras

• Utilize ORDER BY sempre na primeira tabelas, de preferência em índices, quando estiver realizando uma consulta em várias tabelas interligadas;
• Utilize LIMIT, o MySQL irá primeiro avaliar o comando LIMIT para depois executar funções como ORDER BY e GROUP BY;
• Realize UPDATE e INSERT em um lote inteiro de registros, de uma só vez, além de realizar uma ação por cada registro;
• Remova parênteses desnecessários na cláusula WHERE.

Referências: Como otimizar consultas MySQL, Using EXPLAIN to Write Better MySQL Queries, Como otimizar consultas no MySQL-Análise das queries.

1 – Carregue o conteúdo pelo Google Code

Se você utiliza sempre o jQuery em seus sites, uma excelente maneira de acelerar o carregamento é usar o arquivo jquery-1.11.1.pack.js diretamente do Google Code. Além de diminuir o gasto com banda, o navegador do usuário faz cache do arquivo entre os vários sites que usam essa técnica o que dará uma experiencia de navegação melhor para o visitante.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" 
     type="text/javascript"></script>

2 – Combine e minimize todos seus scripts

Sempre use compressor em seu código. Isso tornará o conteúdo de seu site mais rápido para carretamento, além de facilitar a leitura de seu site pelo navegador. Como exemplo, o YUI Compressor do Yahoo! Só não esqueça de manter o código original, para quando precisar de dar manutenção nele.

3 – Use o log do Firebug.

Use a função console.log(Object) do Firebug para escrever mensagens no console, muito melhor que alert(“”). O Firebug facilita acesso as propriedades dos objetos. Como elementos DOM são sempre objetos, estamos tratando deles o tempo todo.

4 – Use menos funções de seleção, faça cache.

Funções de manipulações do DOM são muito caras para o processamento. Tente usa-las o mínimo possível

for (i = 0; i < 1000; i++) {
     var minhaLista = $('.minhaLista'); // seleciona 1000 vezes
     minhaLista.append('<li>Esse é o elemento ' + i + '<li>');
}

Funções como .append(), .prepend(), .after(), .before() são relativamente custosas e podem deixar as coisas lentas.

var meusItens = '';
for (i = 0; i < 1000; i++) {
     meusItens += '<li>Esse é o elemento ' + i + '</li>';
}
$('.minhaLista').html(meusItems);

Escrever no DOM somente uma vez é um pouco mais rápido. Já que aqui estamos mesmo lutando por optimizações (lembrem-se dos mobiles), vale né?

5 – Use IDs em vez de classes sempre que possível

A função de busca por com CSS3 Selector é muito legal de se usar, mas o jQuery implementa ela em JavaScript, e usando o máximo que a API do DOM deixa. Isso as vezes não é o ideal para performance, acredite. Uma busca por ID no DOM quase sempre é mais eficiente que a busca por classe, prefira sempre usar ID.

6 – Dê um contexto para seus seletores

As seguintes formas de uso são mais rápidas do que buscar um elemento no documento inteiro.

jQuery( expression, contexto );
$('contexto').find('expression');
$('contexto expression');

7 – Use encadeamento de funções

Uma das características mais legais do jQuery é a possibilidade de encadear métodos. Usar encadeamento também ajuda a diminuir a quantidade de seletores.

$('#meuPainel')
     .find('TABLE .primeiraColuna')
     .removeClass('.primeiraColuna')
     .css('background', 'red')
     .append('<span>Essa celula agora é vermelha</span>');

8 – Saiba como usar a propriedade de animação

Todos adoram as animações pré-definidas como slideDown() e fadeIn() para conseguir alguns efeitos com incrível facilidade. Nos meados do lançamento do jQuery, pela facilidade e simplicidade, as animações em web pages virou uma febre desencadeada.

É também fácil ir ainda além por causa da facilidade que é usar o poderoso método animate(). Se você olhar os metodos slideDown() e fadeIn() dentro do framework verá que são apenas atalhos para o metodo animate(). Esse método simplesmente pega qualquer estilo de CSS e aplica transições de um valor a outro. Então as mudanças nas propriedades width, height, opacity, background-color, top, left, margin, color, font-size e qualquer outra que você quiser podem ter animações!

É muito fácil animar todos itens do seu menu para 100 pixels usando isso.

$('#myList li').mouseover(function() {
     $(this).animate({"height": 100}, "slow");
});

Diferentemente de outras funções do jQuery, as animações são colocadas em fila de execução automaticamente. Se você quiser rodar uma segunda animação somente quando a primeira terminar, então é só chamar o método novamente sem precisar usar um callback.

$('#myBox').mouseover(function() {
     $(this).animate({ "width": 200 }, "slow");
     $(this).animate({"height": 200}, "slow");
});

$('#myBox').mouseover(function() {
     $(this).animate({ "width": 200, "height": 200 }, "slow");
});

9 – Conheça sobre delegação de eventos

O jQuery torna fácil adicionar eventos em elementos do DOM de forma inobstrusiva, o que é muito bom, mas adicionar muitos eventos é ineficiente. A delegação de eventos permite que você adicione em muitas situações menos eventos e atinja o mesmo resultado:

$('#minhaTabela TD').click(function(){
     $(this).css('background', 'red');
});

Vamos fazer uma função simples para tornar uma celula da tabela vermelha quando você clicar nela. Digamos que você tenha uma tabela com 10 colunas e 50 linhas, então são 500 delegações de eventos. Não seria melhor se fosse possivel agregar o evento somente uma vez e então quando a tabela fosse clicada, chegar ao elemento que realmente foi clicado antes desse se tornar vermelho?

Para isso é que serve a delegação de eventos e isso é simples de implementar.

$('#minhaTabela').click(function(e) {
     var clicado = $(e.target);
     clicado.css('background', 'red');
});

10 – Use o método data() do jQuery para armazenar estados

O jQuery possui um metodo interno chamado data() que pode ser usado para armazenar informações de chave/valor sobre qualquer elemento DOM.

$('#minhaDiv').data('estadoAtual', 'desligado');

11 – Escreva seu próprio seletor

O jQuery possui vários seletores prontos para ajudar na seleção de elementos pelo ID, class, tag, atributo e muito mais. Mas o que fazemos quando é preciso usar seletores que vão além do que o jQuery deixa?

Bom, uma possivel solução seria adicionar classes nos elementos e usa-las para seleciona-los. Uma outra maneira é extender os seletores assim:

$.extend($.expr[':'], {
          mais100px: function(a) {
          return $(a).height() > 100;
     }
});
 
$('.box:mais100px').click(function() {
     alert('O elemento que você clicou possui mais de 100 pixels de altura');  
});

Mais exemplos dessa funcionalidade você pode pegar aqui.

12 – Use as funções de auxilio do jQuery

O jQuery já quebra um galho ao facilitar a manipulação de elementos DOM, mas também adiciona metodos uteis para iterar, filtrar, clonar, juntar arrays ou remover elementos duplicados. Vale a pena passar um tempinho na página que explica essas utilizades.

13 – Use a função “noconflict” para evitar conflitos com outros frameworks

A maioria dos frameworks para JavaScript usam o simbolo $ como atalho. Para evitar problemas existe uma solução simples, a função .noconflict() que permite definir outro atalho para o framework:

var $j = jQuery.noConflict();
$j('#minhaDiv').hide();

14 – Saiba quando uma imagem terminar de carregar

Use o método .load() em um elemento de imagem (IMG) com um callback.

$('body').append('<img src="" alt="" id="minhaImagem" />');
$('#minhaImagem').attr('src', 'imagem.jpg').load(function() {
     console.log('Image Loaded. W: '+$(this).width()+' H: '+$(this).height());
});

15 – Como saber se um elemento existe?

Você não precisa checar se um elemento existe antes de manipular ele por que o jQuery simplesmente não faz nada caso o elemento não estiver no DOM. Mas as vezes você pode precisar executar algum pedaço de código que depende da existência de um elemento, para isso use:

if ($('#minhaDiv')[0]) {  
     // bloco de código
}

16 – Return ‘false’ para evitar a continuação de um evento

Quando você adiciona algum afeito em um elemento, vai perceber que o bloco de código vai ser executado, porem o navegador irá para o endereço do link. Você pode usar “href=’#'” para evitar isso, mas assim a página irá voltar para o topo quando a ação de click for executada. Para evitar isso, adicione um “return false;” ao fim do bloco de código:

$('popup').click(function(){  
     // bloco de código
     return false;
});

17 – Atalho para a função “ready”

Você já deve estar acostumado a usar a função ready() para executar o código assim que a página tiver sido carregada. Pois saiba que pode economizar um pouco de código simplesmente usando:

$(function (){  
     // código
});

18 – Identifique váriaveis do tipo jQuery

Se você começar usar as dicas para evitar chamadas desnecessarias as funções do jQuery vai perceber que no seu código o número de variaveis carregando objetos jQuery irá aumentar bastante. Para evitar que você se confunda e chame a função de seleção – $() – em um elemento que já é jQuery, identifique variaveis que carregam objetos do jQuery com um $ antes do nome.

var $elemento = $(elemento);

19 – Sempre use a última versão

O framework está sendo constantemente melhorado por John Resig, seu criador. Sempre que uma versão nova sai ela possui melhoras na performance e se mantem atualizada com o que existe de novo nos navegadores.

Então, utilize sempre a última versão.

Hoje, se você tem interesse em criar uma  página acessível à vários ambientes, apenas adaptar o layout à variações de resolução não basta. Algumas metodologias devem ser revistas para uma completa adequação. Eventos gerenciados pelo DOM, como key press, mouse over e mouse out, não funcionam muito bem em dispositivos móveis. Enquanto conteúdos que são ativados por meio de alguma ação, não serão bem aproveitados para usuários com alguma deficiência, por exemplo.

Alguns tópicos serão levantados durante esse artigo, envolvendo questões quanto á portabilidade e acessibilidade.

Independência de dispositivo

Eventos que funcionam somente pelo mouse são um grande problema para a acessibilidade, pois nem todas as pessoas conseguem utilizar o mouse. Quem utiliza leitor de tela, por exemplo, navega exclusivamente pelo teclado. Pessoas com determinados tipos de deficiência física poderão não ter a habilidade de usar o mouse convencional e poderão utilizar teclados e mouses adaptados. Por isso, todas as funções de uma página devem ser dispositivo-independentes, ou seja, devem funcionar pelo mouse, teclado ou outro dispositivo. Além disso, o foco do teclado não deve ficar fixado ou “preso” em algum elemento, pois o usuário deve poder percorrer toda a página pelo teclado facilmente. Valendo lembrar que em dispositivos móveis, muitos eventos são inexistentes.

Como exemplo, aquele popover que aparece na página, coma opção de fechar ao click de um botão gera uma excelente usabilidade, mas uma acessibilidade terrível para usuários que não conseguem alcançar aquele botão. Uma simples adição de código aplica à tecla “ESC” do teclado a ação de fechar o popover.

window.onload = function(){
	document.onkeydown = function(e){
		// tecla ESC
		if(e.keyCode==13){
			fecha_popover();
		}
	}
}

Se forem utilizados eventos de JavaScript específicos para mouse, devem ser utilizados os correspondentes para teclado:

Adequar a navegação da página pela tecla “TAB” do teclado é outra dica importante. Ordene o conteúdo da sua página para que este tipo de navegação passe apenas por conteúdos utilizáveis, como formulários e links.

Por fim, sempre teste o site navegando por todo o conteúdo somente pelo teclado, com setas e “TAB”, e em diferentes navegadores.

Alterações temporais do conteúdo

É muito comum a utilização de conteúdos que se movem, como os slideshows. Esse tipo de elemento não deve mover-se automaticamente, pois o usuário é quem deve decidir se quer “rolar” o conteúdo ou não. Assim, devem ser oferecidos controles para iniciar, pausar e reiniciar tais rolagens. Esses controles devem ser acessíveis também pelo teclado e devem estar bem descritos, para quem utiliza leitor de tela.

Atualização e redirecionamento automáticos

Quando ocorre uma mudança, atualização ou redirecionamento repentino na página, o usuário pode sentir-se confuso ou desorientado, especialmente se estiver utilizando algum recurso de Tecnologia Assistiva, como um leitor de tela, por exemplo. Isso ocorre em páginas com atualização ou redirecionamento automáticos. A atualização automática periódica – muito utilizada por canais de notícias – é comumente realizada através do uso do o atributo http-equiv com conteúdo “refresh” do elemento meta no HEAD do documento.

Em páginas onde a atualização é absolutamente necessária, o usuário deverá ser informado que a página é atualizada automaticamente.

Quanto ao redirecionamento automático, o mesmo deve ocorrer de forma transparente para o usuário. Ou seja, não devem ser utilizadas marcações para redirecionar a uma nova página, como o uso do atributo http-equiv com conteúdo “refresh” do elemento META.

Limite de tempo

Em uma página onde há limite de tempo para realizar uma tarefa deve haver a opção de desligar, ajustar ou prolongar esse limite. Essa recomendação não se aplica a eventos em que o limite de tempo é absolutamente necessário. Deve-se lembrar que, em ambos os casos, o limite de tempo deve ser informado.

Ao especificar o tempo limite para o usuário conclua a ação, não se deve tomar como modelo um desktop conectado a teclado e mouse convencionais. Dispositivos móveis mostram uma ergonomia mais precária, comparadas ao desktop, exigindo um esforço maior e mais prolongado para resolver algumas ações. Deficiências motoras retardam a conclusão de alguns trabalhos na página da web. É importante adequar o tempo levando em conta o dispositivo que o usuário esteja utilizando, e a dificuldade que usuários possam ter concluir trabalhos convencionais.

Intermitência de tela

Não apenas pela acessibilidade, mas também pelo bom gosto. Não devem ser utilizados efeitos visuais piscantes, intermitentes ou cintilantes. Em pessoas com epilepsia fotosensitiva, o cintilar ou piscar pode desencadear um ataque epilético. Além disso, elementos piscantes podem causar desconforto, desatenção e confusão para os usuários.

A importância do contraste para usuários com Daltonismo

A deficiência de cor vermelho/verde é o tipo mais comum de Daltonismo. Por isso, deve-se evitar a utilização de contrastes entre essas duas cores.

• Utilizando combinação de cores verde/vermelho: com a deficiência de cor não é possível perceber o contraste entre as cores.

• Utilizando combinação de cores verde/lilás: mesmo com a deficiência de cor, ainda é possível perceber o contraste.

Elementos ocultos na tela

É bastante comum, e deixa a página “inteligente”, ocultar texto que devem ser mostrar apenas se o usuário desejar velos. Mutas vezes por alguma ação do mouse over  aplicada a um ícone de ajuda, por exemplo, para configurar uma capacidade de aprendizagem. Porém, dependendo método aplicado ao elemento para esconde-lo da página, aplicativos de leitores de tela não conseguem alcançar o conteúdo. Dependendo do método, a acessibilidade à aquela ajuda, não exite.

Abaixo é mostrado os diferentes métodos para esconder um elemento da página, e sua reação aos aplicativos leitores de tela.

Elementos ocultos na tela

Por fim, para a avaliar se sua página é Web acessível, existem ferramentas automáticas que auxiliam na avaliação de acessibilidade. O aplicativo eMAG sugere um passo a passo para avaliar a acessibilidade de um site:

1. Validar os códigos de conteúdo HTML e folhas de estilo;
2. Verificar o fluxo de leitura da página, utilizando um navegador textual ou um software leitor de tela;
3. Checar o fluxo de leitura das páginas sem estilos, sem scripts e sem as imagens;
4. Verificar as funcionalidades disponíveis na barra de acessibilidade, como atalhos e contraste;
5. Efetuar a validação automática de acessibilidade, através de avaliadores automáticos;
6. Realizar a validação manual, com uso de checklists de validação humana.

Um recurso bastante útil na avaliação de acessibilidade de um site são as extensões para navegadores para análise de acessibilidade:

• Para Firefox: Accessibility Evaluation Toolbar (link para um novo site)
• Para Google Chrome: Accessibility Developer Tools (link para um novo site)
• Para Internet Explorer: Web Accessibility Toolbar for Internet Explorer (link para um novo site)

Artigo Retirado de Curso eMAG – gov.br

Em contrapartida, está cada vez mais complicado colocar o seu site em evidencia na internet, principalmente para as pequenas empresas ou empresas que não dispõe de recursos para investir em marketing digital.

Como enfrentar a concorrência então?

O Google possui uma hoje uma ferramenta que pode ser útil para o seu negocio. Ela ajuda os consumidores a tomar a melhor decisão de compra.
É basicamente um site de comparação de preços. Onde você anuncia seus produtos juntamente com outros concorrentes e mediante as condições oferecidas, o cliente opta pelo melhor lugar para comprar.

Conhecido como Google Product Search nos Estados Unidos e no Reino Unido, aqui no Brasil o Google Shopping é um mecanismo de pesquisa de compras.

No Google Shopping Brasil a ordem de exposição dos produtos ofertados pelos fornecedores aparecem mediante sua relevância e de acordo com as palavras usadas pelo consumidor no momento da pesquisa.

Agora o mais interessante: Pelo Google Merchant Center, os varejistas conseguem inserir seus produtos de forma gratuita.

Os dados dos feeds do Google Merchant Center também podem ser úteis para os varejistas que desejam anunciar no Google. As Extensões de produto são um formato de anúncio do Google AdWords que combina dados e imagens do produto provenientes do Google Merchant Center. Esses anúncios aparecem nos resultados de pesquisa quando o usuário pesquisar um produto específico, mostrando um anúncio mais relevante.

Dicas – Ao cadastrar seus produtos, fique atento:

1. Título da sua página de produto
– O titulo da sua página deve ter relação direta com o produto anunciado, e deve ser relevante.

2. O preço
– Você deve ter um preço competitivo!

3. A descrição do produto
– Não insira apenas as informações vindas do fabricante. Caso você tenha algum diferencial na descrição, você pode aparecer melhor posicionado;

4. Atributos no Feed
– Quanto mais completo, mais chances de aparecer bem posicionado;

5.Imagens –Caso você
envie uma variedade de fotos, ou fotos com boa qualidade, as suas chances de
aparecer bem posicionado no Shopping aumentam.

Comece agora! E boas vendas!

Posso dizer que o e-mail marketing foi usado exaustivamente e com ótimos resultados até os anos de 2009, e quem trabalha de perto com internet pode observar que a partir desta época, esta ferramenta começou ter quedas de resultados bastante expressivos, principalmente na conversão de vendas.

É o fim desta forma de divulgação? Acredito que não. Nem o e-mail como meio de comunicação, nem como estratégia de marketing. Mas acredito que a forma com que esta ferramenta é usada está mudando! Ou já mudou! Embora muitas pesquisas ainda afirmem que esta ferramenta ainda gera muitos resultados quem atua na área sabe que a coisa mudou.

Um ponto altamente relevante são que as empresas, através de seus funcionários da nova geração, vem trocando o antigo e-mail por novas formas de comunicação, como redes sociais e SMS e outras ferramentas de comunicação instantânea. E temos que considerar também que o volume de SPAM tem feito com que as pessoas percam a credibilidade nesta ferramenta.

Mas o e-mail marketing, se bem usado, é uma poderosa ferramenta de marketing! E que pode sim atingir a um enorme público interessado no seu produto ou serviço!

Então como podemos ter resultados usando e-mail marketing?

Seguem algumas dicas:

COMPRAR LISTAS DE EMAIL
– Jamais! Normalmente as listas vendidas em internet já foram cobradas por centenas de outras empresas e tratam-se de endereços que devem receber dezenas de outros e-mails todos os dias. Certamente esta pessoa não irá ler o seu e-mail! Além de tudo, estas listas nem sempre tem uma boa qualidade, possuindo endereços desatualizados, e que nem existem mais. E algumas delas nem mesmo possuem segmentação, e você estará enviando e-mails a pessoas que não tem o perfil para ser seu cliente.

CONTEÚDO
– Tudo em exagero cansa!
E o envio de e-mail marketing, por mais interessante que seja a sua oferta, não vai ser diferente! Evite o envio exagerado de propaganda para seus usuários. Recomendo aqui, que sempre que for possível, troque o disparo de e-mail marketing por uma Newsletter, ou seja, um boletim informativo, com links de notícias ou artigos que possam ser interessantes ao seu cliente. Na newsletter, você pode inserir banners promocionais, porém seu cliente é que decidirá se tem interesse ou não pelos seus produtos.

USUÁRIOS CADASTRADOS
– Seu mailing deve ser composto por pessoas que se cadastraram em seu site e desejam receber informações sobre seu negócio!

RESPEITE AO USUÁRIO NÃO CADASTRADO
– Lembre-se, o usuáriopode optar por não querer mais receber seus e-mails e precisa ser respeitado! Não receber mais suas mensagens não significa necessariamente que ele não quer mais fazer negócios com sua empresa no futuro. Mas se você não respeitar uma vontade dele no presente, com certeza perderá o cliente e ganhará um inimigo.

Usando com bom senso, é uma ferramenta fundamental e muito poderosa para o seu negócio, pois cria um interessante vinculo com seu cliente. Não desperdice essa chance!

Diversas formas podem revelar se a usabilidade – e carrinho de compras – opera corretamente. Uma delas é o Google Analytcs, uma ferramenta de análise que, por exemplo, permite estudar o comportamento dos usuários gratuitamente. Quando perceber algo estranho procure determinar o problema! É de suma importância que entenda como o sistema do site funciona e assim monitorá-lo e aprimorá-lo.

Existem também espaços utilizados para realizar testes com consumidores antes mesmo de o site ser lançado, é chamado de laboratórios de usabilidade, com ele é possível identificar lacunas de usabilidade melhor que qualquer software disponível na internet. São problemas invisíveis ao “olho mecânico” e requerem estudos detalhados por especialistas. De todo modo, essa eficiência existe um preço, apesar de o custo beneficio ser vantajoso, se não tiver verbas suficiente procure uma alternativa.

Abaixo serão abordados alguns fatores que podem ajudar na usabilidade do carrinho de compras:

Elementos do carrinho de compras:  Antes de atingir um nível ideal de usabilidade alguns elementos devem ser desenvolvidos e controlados. Nem tudo pode ser superado, mas em parte contido. Entender a natureza humana e como as pessoas utiliza o seu site pode ajudar a escolher elementos que realmente sejam úteis aos consumidores.

Feedback visual: Consumidores tem a necessidade de visualizar uma confirmação visual de todas as ações que realizam no site. Sites que não oferecem feedbacks visuais durante a transação correm o risco de perder a venda, podem gerar insegurança entre os compradores e passam a impressão que não operam corretamente.

Evite JavaScript: É uma linguagem de programação que precisa do suporte do navegador para funcionar. Por exemplo, se o feedback visual for feito em javascript e o navegador do cliente não suportar a linguagem o recurso não funcionará. Logo terá um efeito negativo no site e nas funções do carrinho de compras.

Evite Flash: O mesmo problema do javascript. Porém, mais grave. O flash precisa ser instalado no computador do cliente e também precisa estar na mesma atualização que o seu site de compras. Todos aqueles que usam uma versão inferior do seu site terá que baixar a atualização, podem ser redirecionado para o site do Adobe (fabricante do Flash) para baixar a nova versão e começar o processo de compra desde o inicio.

Utilize cores de forma inteligente: As cores do site é um elemento importante para obter uma boa usabilidade. Elas empregam o objetivo de hierarquizar os elementos do carrinho e sinalizar ao consumidor seu próximo passo. Por exemplo, se o site tem a cor verde predominante utiliza o azul em elementos com maior prioridade, como o botão “Comprar”, por exemplo. Tonalidades do verde neste caso também podem ser usadas.

Processo de pagamento ágil e fácil: Deve ser o mais curto e fácil possível. Quanto mais rápido o cliente finalizar a compra no processo de pagamento, maiores as chances de comprar e ficar satisfeito com a sua empresa.

Mostrar etapas do processo de pagamento: Cada etapa do processo deve indicar o número total de passos a serem seguidos, assim como a etapa atual. Isso ajudará os consumidores saberem o que fizeram e o que precisa ser feito.

Pedir informações na ordem correta: Informações de cartão de crédito nunca devem ser solicitadas até o cálculo e a apresentação de todos os encargos que incidem na compra. Pedir esta informação antes de divulgar as despesas totais aumenta as chances de o cliente abandonar sua loja.

Com essas dicas você pode agora ter seu e-commerce com o TurboSite. Clique aqui e conheça mais sobre a Loja Virtual.

Fonte: E-Commerce News