Maior interação com o usuário
Publicado por: ygor27 em: junho 25, 2009
Interação com o usuário
O vídeo abaixo mostra, em um ponto de venda a utilização da realidade aumentada, um bom exemplo de com a interação de um produto com o usuário pode ser uma vantagem competitiva muito grande para uma empresa.
Ferramentas de otimização para web sites
Publicado por: ygor27 em: junho 25, 2009
Ferramentas de análise, para otimização de sites
As análises de um web site são muito importantes para o sucesso de seu web site, neste post estarei apresentando algumas
ferramentas e técnicas para a otimização de seu web site.
Digite seu domínio seja ele de um blog ou site, ou página que deseja realizar a análise, tenha informações sobre o trafego, informações sobre links e muito mais.( e necessário se registrar no site, o registro e gratuito)
ferramenta de análise Trifecta
SEO Analysis Tool da SEO Workers
Esta ferramenta lhe repassa várias informações sobre sua página, análise de meta tags, ancoras, links da página, keywords e
muito mais.
Digite seu domínio o site lhe traz várias informações sobre pagerank, ranking alexa, links internos e muito mais.
Acompanhe sua presença na web
A ferramenta faz análise de páginas semelhantes para evitar possíveis punições por conteúdo duplicado.
Ferramenta gratuita do google que traz várias informações sobre indexação, sitemaps, links e muito mais, uma otima fonte de informação para melhor indexação do conteúdo do seu site pelo google.
Ferramenta de análise da velocidade do web site.
Faz comparação entre até 10 dominios diferentes em relação a velocidade de carregamento das páginas, o que pode ser um grande diferencial na comparação entre sites que possuem, um quantidade de trafego elevada.
Talvez a ferramenta mais utilizada para análises de web sites, traz várias informações sobre visitantes, tempo que cada visitante ficou em seu site, de onde estão vindo as visitas, uma ótima ferramenta para análise, e defineir o direcionamento futuro para seu web site.
tela principal do google-analytics
Ferramenta de análise em tempo real sobre visitas ao seu site, possui planos gratuitos e pagos quevariam de $4.99 por mês á $49.99.
Ferramenta de análise de visitas do yahoo.
Possui várias ferramentas de análise como heatmap e outras, possui trial gratuito para avaliação, os planos pagos variam de $5 á $400 por mês.
Verifique os blogs que possuem links para o seu web site.
Lhe diz a quantidade de links que apontam para seu web site.
Faz uma analise das páginas de seu website, e dos link que apontam para ele.
Lembre-se sempre que em primeiro lugar para que seu site consiga mais visitas em primeiro lugar e necessário um conteúdo de qualidade e de relevancia para o usuário.
Sites acessíveis com web standarts
Publicado por: ygor27 em: junho 24, 2009
Site acessível com web standarts
Um elemento essencial para criação de um website e a usabilidade, pois se os usuários não conseguirem, navegar em seu site não retornarão, neste texto vão 9 dicas de como tornar seu código XHTML mais acessível, seguindo os padrões da WC3
Um código de qualidade faz a diferença
1- Especifique o DOCTYPE
O doctype e essencial para que o browser exiba corretamente seu website no computador do usuário, e quais são os doctypes que meu site pode possuir?
Lembrando que cada página de seu site possui apenas um doctype, no inicio do código
XHTML 1.1:
- <?xml version="1.0" encoding="UTF-8"?><br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Strict:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
2-Defina o Namespace e a linguagem padrão de seu website
O XHTML namespace e linguagem padrão são definidos no HTML, o namespace define todos os elementos que você pode usar em sua página.
A linguagem definida no XHTML diz para o usuário qual a linguagem do conteúdo do site, e essas definições também são exigidas pelos padrões da WC3.
XHTML 1.1:
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
XHTML 1.0:
- <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
3-Encira as Meta Tags
As meta tags são inseridas no elemento <head>,os http-equiv meta tags são usados em conjunto com o doctype do site, e ajuda na exibição correta de seu website
A meta tag “language” é muito importantes para seu website. A descrição e keywords meta tags são mais importantes para acessibilidade por que são comunmente usadas pelos leitores de tela.
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />
- <meta name="description" content="A descrição de seu web site" />
- <meta name="keywords" content="algumas keywords importantes para o seu site" />
- <meta name="revisit-after" content="10 days (tempo que o Crawler do google deve voltar a visitar seu site" />
- <meta name="language" content="pt-br" />
- <meta name="copyright" content="empresa proprietária do site" />
- <meta name="designer" content="designer responsável pelo projeto" />
- <meta name="robots" content="index,follow"/>
4-Use uma navegação acessível
Utilize um navegação simples e de fácil compreenção pelo usuário para que o mesmo não se perca no conteúdo do site, utilize um alto nível de contraste para que o usuário identifique facilmente o que está escrito em seu menu, nos títulos e nos textos em geral.
Lembre-se que existem pessoas que não visualizam certas cores, possuem dificuldades com fontes
em tamanho muito reduzido, e outros usuários que utilizam leitores de tela, e não conseguem ver imagens
mantenha seu site com uma navegação simples e clara
1-Inclua o <title> do web site
- <title>Título de sua página</title>
2-Inclua os elementos (<h1>, <h2>, etc.)
- <h1>Texto de maior importância</h1>
- <h2>Texto de importância secundaria</h2>
- <h3>Texto de terceira importância</h3>
3-Todos os elementos (<h1>, <h2>, etc.) devem conter elementos textuais, e não apenas imagens
ERRADO:
- <h2><img src="logo.png" alt="caminho da sua imagem" /></h2>
CERTO:
- <h2><img src="logo.png" alt="caminho da sua imagem" />Texto da imagem</h2>
5-Propriedade de escape do Javascript
Quando incluir Javascipt diretamente em sua página lembre-se de incerir as CDATA tags (caracter data), entre os elementos <script>, veja abaixo como utilizar as CDATA tags no javascript
<script type="text/javascript">
//<![CDATA[
$(function() {
$('#divone').tipsy({fade: true, gravity: 'n'});
$('#divtwo').tipsy({fade: true, gravity: 'n'});
});
//]]>
</script>
6-Use apenas letras minusculas nos atributos.
Todos os elementos e atributos dos elementos devem ser escritos em letras minusculas, porem os valores dos atributos podem ser tanto em letra minusculas quanto maiusculas.
Os padrões da WC3 tamben setam isso veja aqui
ERRADO:
- <A href="#" onClick="doSomething();">Send us a message</A>
CERTO:
- <a href="#" onclick="doSomething();">Send us a message</a>
7-Incira o elemento Label nos formulários
Incira o elemento <label> em todos os formulários, para que os leitores de tela saibam o que o formulário quer dizer, veja como utilizar a tag <label>
Mantenha os formulários acessiveis
<p><label for="searchbox">Search: </label><input type="text" id="searchbox" /></p>
<p><input type="checkbox" id="remember" /><label for="remember"> Remember</label></p>
8-Incira textos suplementares para imagens
Todas as imagens em seu web site devem conter o texto suplementar no atributo alt que venha a suprir a falta da imagen, pois os usuários de leitores de tela não saberão o que aquela imagen quer dizer uo significa caso o atributo alt, ou no caso do browser não conseguir mostrar a imagen o usuário saberá o significado da mesma
ERRADO
- <img src="caminho da sua imagen" />
- <img src="caminho da sua imagen" alt="" />
CERTO:
- <img src="caminho da sua imagen" alt="texto suplementar" width="450" height="350" />
9-Utilize os atributos "id" e "class" CSS corretamente
Não utilize um "id" igual para dois elementos, você pode utilizar o elemento "class" igual, pórem o elemnto "id" não deve ser repetido, pois isso pode acaretar em resultados inesparados nos browsers, o seu site não passrá pela validação da WC3
ERRADO:
- <p id="leftNav">Home</p>
- <p id="leftNav">Contact</p>
CERTO:
- <p id="homeNav" class="leftNav">Home</p>
- <p id="contactNav" class="leftNav">Contact</p>
Apos de aplicar todas as técnicas para garantir a usabilidade e a acessibilidade em seu web site faça as verificações da WC3, e de usabilidade, e lembresse sempre de que o foco total do web site deve ser o usuário, e uma boa estrturação do mesmo, fara uma grande diferença para o sucesso do mesmo,
Referencia do material: Smashing Magazine
Coletânia com mais de 500 ícones
Publicado por: ygor27 em: junho 24, 2009
Confira a coletânea com mais de 500 icones para seu projetos web
Coletânea com mais de 500 ícones
Uma ícone, muitas vezes é o diferencial de um projeto, confira no site da smashingmagazine uma coletânea de mais de 500 ícones para utilizar nos mais diferentes projetos, sõa ícones de vários tipos, de redes sociais, escritório, fotografia e muito mais, confira no link abaixo a coletânea completa
Plugin para Jquery, efeitos para “web 2.0″
Publicado por: ygor27 em: junho 24, 2009
Novo plugin para Jquery
Confira esse nova plugin para Jquery, com uma vasta coleção de efeitos para seu website como efeitos de navegação, transição de imagens, Tabs, Tooltips e muito mais.
Novo-plugin-para-Jquery
O plugin possui apenas 5,8 kb, e pode ser facilmente baixada no site do (site) , o plugin possui duas versões, uma Open Source e outra Comercial, o site do plugin também possui uma boa documentação e alguns demos de exemplo, confira na lista abaixo alguns exemplos
Ultimos comentários