Criar sites

Google analytics para WordPress e Blogger.

Everton Muta — Wed, 24 Apr 2013 08:06:55 +0000

Saiba de todos os passos de seus usuários com essa poderosa ferramenta Google Analytics.

Google analytics se torna uma das ferramentas quase que obrigatória para todo tipo de website e blogs. A melhor ferramenta de análise, acompanhamento e desempenho de sites. O Google Analytics é usado por profissionais de todo o mundo e ainda é gratuito.

O Google analytics pode trazer informações preciosas sobre o seu site, como o comportamento dos usuários, o fluxo de visitas, fonte de tráfegos, tudo sobre o conteúdo que seus usuários estão mais frequentando, duração média de visitas e muito mais.

Entre muitas utilidades que o Google Analytics pode te oferecer é para fins SEO, pois assim você irá saber realmente quais palavras chaves estão sendo mais relevantes no seu site. Como por exemplo, é possível saber em detalhes qual é seu artigo ou página que deu mais resultado, assim podendo fazer uma análise para seus próximos artigos e saber em qual assunto seus usuários estão mais interessados.

É uma maneira de estar perto de seus usuários mesmo que como anônimo e saber todos seus passos dentro do seu conteúdo. Como também é possível saber a taxa de rejeição do seu site pois assim você irá saber com certeza se está agradando ou não seu usuário e ali mesmo encontrar informações úteis para que essa taxa se mantenha sempre baixa.

Como fazer o cadastro do Google analytics.

Para ter acesso ao Google Analytics você precisa ter uma conta no Google. Depois de criada sua conta no Google fazer os seguintes passos para criar uma conta no Google Analytics.

Acesse o site do Google Analytics e ao abrir a página clique no botão Criar conta, como na imagem abaixo.

Em seguida você será direcionado à página explicativa dizendo os três passos para a sua utilização, que são eles: se inscrever, inserir o código no site e saber de tudo sobre seu site.

Clique no botão Inscreva-se.

Em seguida vamos fazer as configurações do nosso site, escolha a opção Classic Analytics e depois escreva o nome do seu website, o endereço do site, selecione a categoria do seu website e faça as configurações do país e fuso horário. Feito isso dê um nome para seu website (nome da conta) e clique em Obter ID de acompanhamento.

Logo irá aparecer os termos para uso da ferramenta Google analytics, “leia os termos” e clique em aceitar.

Finalizando as configurações em seguida você irá receber um código de acompanhamento. Copie este código e guarde para inserir no seu website.

Inserindo o código Google analytics no Site simples.

Para colocar o código do Google Analytics no site vamos abrir o arquivo HTML com seu editor de código e achar o cabeçalho do nosso site e colocar entre as tags head, veja no exemplo abaixo.

Não esqueça de copiar o seu código gerado em sua configuração. Este código abaixo é apenas um exemplo, cada site deve usar o seu próprio código de acompanhamento.


<html lang="pt-br">
<head>
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-37799892-1']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
<title>Como usar Google Analytics</title>
</head>

Como inserir o código do Google Analytics pelo painel do WordPress.

Para colocar o código do Google Analytics no WordPress é o mesmo processo, mas vamos acessar o cabeçalho do nosso site pelo painel do WordPress.

Vá até Aparência e depois Editor e ache o arquivo Cabeçalho.

Insira o seu código de acompanhamento entre as tags head, no exemplo abaixo eu coloquei o código antes do fechamento da tag head.

Como colocar o código do Google analytics no Blogger.

Para colocar o código do Google Análytics no Blogger vamos acessar o painel e clicar em Modelo e em seguida Editar HTML.

E vamos colocar nosso código da mesma forma, entre as tags head,e depois vamos clicar em Salvar Modelo.

Depois de todo processo é só aguardar algumas horas para o Google Analytics rastrear seu código e começar a gerar seus relatórios.

Faça seu login no Google Analytics e comece a monitorar tudo que acontece no seu site.

Espero que esta ferramenta facilite muito seus trabalhos e que você possa realmente tirar um bom proveito dela! Caso tenha alguma dúvida ou algo a acrescentar fique a vontade para deixar seu comentário, ou até mesmo para nos contar sua experiência com o Google Analytics.

Para receber outros artigos em seu e-mail, se inscreva no FEED abaixo e seja avisado quando tiver novos artigos.

Grande Abraço! Até mais…

O post Google analytics para WordPress e Blogger. apareceu primeiro em Criar sites.

Menu scroll fixo com jQuery

Everton Muta — Thu, 18 Apr 2013 05:26:31 +0000

Aprender como criar um menu scroll fixo com jQuery é muito simples!

Menu scroll fixo é muito usado em sites com rolagens automáticas. Este tipo de menu está cada vez mais comum hoje em dia, além de deixar seu site mais elegante o menu fixo facilita e muito a vida dos usuários, principalmente se o seu conteúdo for muito extenso.

Uma das alternativas que vários sites usam para facilitar a navegação dos seus usuários é a tão famosa seta de voltar ao topo. Voltar ao topo com intuito é claro de ter acesso ao menu principal, mas com este menu fixo o usuário já está com todas as alternativas do menu disponíveis sempre que for necessário, podendo também voltar ao topo como no caso da seta.

É preciso tomar cuidado com o tamanho desse tipo de menu scroll fixo, não é muito bom escolher menus muito grandes por causa do espaço que ele vai ocupar na tela do usuário. Como na maioria do tempo o usuário vai estar na parte baixa do site, o menu praticamente vai estar sempre ali fixo, ocupando sempre um bom espaço na tela.

Cada dia que passa podemos ver monitores cada vez maiores, mas não podemos esquecer que ainda não são a maioria que usa monitores grandes e ainda temos a questão de outros dispositivos.

DEMODOWNLOAD

Existe inúmeros scripts para fazer este tipo de menu scroll fixo na web, mas eu usei este por ser simples e em poucas linhas já esta tudo funcionando.

É o mesmo que usei para fazer o tutorial criar sites html5 menu fixo. Resolvi fazer este tutorial mais específico por se tratar de um sistema de navegação muito utilizado e que tem uma grande procura.

Veja o código HTML do menu.

	  <div class="nav-total">
	      
		  <ul>
		      <li><a href="#">Início</a></li>
		      <li><a href="#">Produto</a></li>
		      <li><a href="#">Sobre</a></li>
		      <li><a href="#">Serviços</a></li>
		      <li><a href="#">Localização</a></li>
		      <li><a href="#">Contato</a></li>
		  </ul>
	      </nav>
	  </div>

Podemos ver um menu simples com uma div que envolve todo o menu com largura 100%, e mais a sessão nav que formatei para que ficasse no centro utilizando margin:0 auto; no CSS.

Basicamente o que temos que fazer para fixar qualquer sessão em CSS é atribuindo uma classe com posição fixa.

1
2
3

.fixar  {
    position:fixed;
}

Bem, já sabemos que para fixar nosso menu usaremos uma classe no CSS para fixa-la. Mas quem vai substituir nossa classe que no seu modelo inicial está rolando junto com todo o conteúdo? Aí é que entra o fabuloso jQuery e o script para fazer o serviço cada vez que o usuário rolar a página.

O script vai fazer a substituição da classe CSS .nav-total, que normalmente ficaria estática lá no topo, por outra que, ao rolar a página, o script aciona a classe .f-nav com posição fixa fazendo nosso menu flutuar.

Veja as classes CSS que serão substituídas:

/******classe estática em seu modelo inicial******/
.nav-total  {
	height:60px;
	background: url(img/bg-nav.jpg) repeat-x;
}
/******classe que será adicionada fazendo flutuar o menu depois que o usuário rolar a página******/
.f-nav  { 
    z-index: 9999; 
	position: fixed; 
	top: 0; width:100%; 
}

Veja o script que vai fazer o serviço de substituição da classe:

jQuery("document").ready(function($){
 
    var nav = $('.nav-total');
 
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            nav.addClass("f-nav");
        } else {
            nav.removeClass("f-nav");
        }
    });
 
});

O script faz o seguinte, primeiro ele atribui a sessão nav à classe .nav-total, blz! Estão juntas e nada acontece! Mas aí ele diz, se rolar a página ate 100px adicione a classe f-nav que é justamente a classe que teremos o atributo fixed no nosso CSS, se não, remova a classe f-nav. Essa parte quer dizer que se tudo voltar ao zero ele irá remover a classe f-nav voltando tudo ao normal.

Dependendo da configuração de seu site e a distância que o menu ficar do topo, você tem que mudar essa medida em pixel, adicionando a distância exata para o menu não fixar antes da hora.

Como fazer a chamada dos scripts no seu site:

<head>
	<script src="js/jquery-1.6.3.min.js"></script>
        <script src="js/script.js"></script>
</head>

Basta inserir o link do jQuery, caso seu site ainda não tenha, e o script entre as tags head do seu site! Ou se preferir também podemos colocar no rodapé, na tag footer.

Bem, criamos nosso menu scroll fixo adicionando apenas um pequeno script e mais uma classe no CSS. Se caso você ainda não utiliza o jQuery em seu site você pode estar fazendo o download no site oficial.

Espero ter esclarecido algumas dúvidas deixadas no tutorial anterior, mas caso ainda tenha alguma dúvida deixe seu comentário que eu estarei respondendo a todos.

Para receber os próximos tutoriais gratuitos se inscreva em nosso FEED logo abaixo, insira seu e-mail e não esqueça de ativar o e-mail de confirmação.

Até a próxima!

O post Menu scroll fixo com jQuery apareceu primeiro em Criar sites.

Como utilizar fontes do Google Web Fonts em seu site

Everton Muta — Thu, 04 Apr 2013 03:33:43 +0000

Veja como utilizar em seu site o fabuloso acervo de fontes Google Web Fonts.

Com a chegada do CSS3 uma grande e favorável mudança foi a chegada de Webfonts, muitas barreiras eram enfrentadas para se ter um site diferenciado em relação as fontes, com a maioria dos usuários utilizando apenas as fontes padrões dos seus sistemas operacionais.

Uma das formas mais simples e garantidas que eu recomendo são as fontes do Google Web fonts, pois são fontes próprias para web e todas testadas e aprovadas pela plataforma google.

Além da segurança de usar fontes do Google Web Fonts, temos também a facilidade, sem precisar fazer download de nada, apenas copiando o caminho da fonte desejada que já está hospedada nos servidores do google e especificando o seu nome no seu arquivo CSS.

Se deseja um exemplo temos aqui mesmo no CriarSites. Se você está lendo este tutorial essa é uma fonte do google, a fonte Ubunto. Ela não é a única pois também utilizo nos títulos.

Veja como é fácil utilizar fontes Google Web Fonts.

Acesse o site do Google Web Fontes e siga os passos abaixo.

Escolha a fonte que deseja inserir em seu site e clique em: Quick-use. Você será direcionado a página de configurações da fonte escolhida.

Escolha o estilo da font. Esse estilo varia de acordo com cada fonte.

Logo temos três opções de incorporação:

HTML por código inserindo o caminho na tag head.

CSS @font-face especificando o caminho no seu arquivo.

Javascript incorporando o script fornecido pelo site em algum local em seu site, de preferencia head ou footer.

Eu recomendo o caminho no arquivo CSS, mais prático e sem conflitos.

Logo após especificar o caminho da fonte desejada a fonte está instalada e pronto para usar, temos que utilizar o nome específico que o site fornece para funcionar corretamente.

Caminho para incorporação no arquivo CSS.

@import url(http://fonts.googleapis.com/css?family=Orbitron);

Utilizando a fonte na tag desejada exemplo.

h1  {
font-family: 'Orbitron', sans-serif;
}

O Google Web Fonts tem um acervo de mais de 600 fontes muito elegantes. É praticamente impossível não achar uma que agrade seu estilo e estilo de seu site.

Espero que esta rápida dica te ajude a melhorar suas páginas deixando a leitura de seus usuários mais confortável.

Qual é seu estilo preferido? Deixe seu comentário para que outros usuários possam ver a melhor opção e experiências com Google Web Fonts.

Até a próxima! Abraço!

O post Como utilizar fontes do Google Web Fonts em seu site apareceu primeiro em Criar sites.

Criar sites HTML5 de uma página com scroll e menu fixo

Everton Muta — Fri, 29 Mar 2013 09:46:25 +0000

Aprenda fazer um site simples e elegante com HTML5 e jQuery.

Neste tutorial vamos aprender como criar sites HTML5 em sua estrutura básica, ou seja, navegação, artigo, imagens e rodapé.

Já podemos contar com o suporte parcial na maioria dos atuais navegadores, a atualização do XHTML, o HTML5, mas ainda teremos alguns anos para que todos os navegadores e versões se adaptem a mais nova versão.

Para corrigir algumas versões antigas de navegadores vamos utilizar o plugin html5shiv, um javascript que pode corrigir esse detalhe para nosso HTML5.

Sempre gostei muito de sites de uma página com rolagens automáticas, e sempre quis colocar um tutorial em HTML5 aqui no criarsites.me. Resolvi criar este modelo simples com alguns atrativos interessantes.

Usei no layout o plugin scrollto, facilitando na navegação de nosso modelo de uma página. Para o usuário não ficar perdido entre as sessões do site coloquei o meu fixo no topo ao fazer a rolagem.

Claro que com alguns ajustes pode ficar ainda melhor, basta soltar a imaginação e colocar a mão na massa.

Criar sites HTML5 exemplo criado para nosso tutorial.

DEMODOWNLOAD

Veja logo abaixo a estrutura adotada para este tutorial.

Como podemos ver essa é a estrutura básica para criar sites HTML5, mas podemos fazer muita mais com essa estrutura que em breve todos os sites estarão abordando.

Para quem já está acostumado a criar sites com div, o sistema é o mesmo. Para formatar a determinada seção, adicionamos classes ou id ao nossos elementos. Essa inovação serve para deixar nossa estrutura mais semântica e organizada para os sistemas de buscas, assim entenderem nossa estrutura com mais facilidade.

1 – Primeiro passo: desenvolvimento do tema no programa de imagens.

Eu usei o programa da Adobe Fireworks, sempre utilizo o Fireworks para desenvolver meus projetos. A ideia toda começa no programa de imagens. Lá é onde vamos decidir como vai ficar nosso site, as cores, espaços, tamanho e criar algumas imagens que podemos utilizar no nosso layout na formatação CSS.

2 – Segundo passo: desenvolvimento da estrutura do cabeçalho “head”.


<html lang="pt-br">
<head>
    <title>Tema HTML5 site de uma página | Criarsites.me Demo</title>
    <meta charset="UTF-8">
    <link href="style.css" rel="stylesheet" type="text/css" media="all">

	
</head>

Temos as informações necessárias para incorporação do CSS, informações do nosso site como o título e charset, e um importante script para criar sites HTML5, o html5shiv, que faz o HTML5 rodar em versões antigas de navegadores.

3 – Terceiro passo: desenvolvimento da estrutura do cabeçalho do site e navegação “header” e “nav”.


    <h1>Seu Logo</h1>
</header>
<div class="nav-total">

    <ul>
        <li><a href="#">Início</a></li>
	<li><a href="#artigo1">Produto</a></li>
	<li><a href="#artigo2">Sobre</a></li>
	<li><a href="#artigo3">Serviços</a></li>
	<li><a href="#artigo4">Localização</a></li>
	<li><a href="#artigo5">Contato</a></li>
   </ul>
   <div class="clear"></div> 
</nav>
<div class="clear"></div> 
</div>

No cabeçalho do site podemos inserir nossa logomarca e toda a navegação do nosso site. É importante lembrar a diferença entre a tag head e a tag header, ambos são cabeçalho, mas o head usamos para incorporar os scripts e definições de configuração do site e informações como título e links de CSS, e header, usamos como o cabeçalho que será visto pelos nossos usuários, onde colocamos nosso logo e demais informações e navegação.

Cabeçalho e navegação e reset CSS.

@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Electrolize);
@import url(http://fonts.googleapis.com/css?family=Oswald);
@import url(http://fonts.googleapis.com/css?family=Inder);
@import url(http://fonts.googleapis.com/css?family=Ubuntu+Condensed);
/*
Theme Name: criarsites.me - Blog criarsites.me
Theme URI: http://www.criarsites.me
Description: Tema criado para demonstração do tutorial criar sites com HTML5.
Version: 1.0
Author: Everton Rodrigues Muta - criarsites.me
Author URL: http://www.emstudioweb.com.br
Tags: Criar sites,publicidade digital,Design,Japão,Webdesign
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
body  {
    background:#1C344C;
}
header  {
    width:960px;
	height:100px;
	margin:0 auto;
}
.clear  {
    clear:both;
}
.nav-total  {
	height:60px;
	background: url(img/bg-nav.jpg) repeat-x;
}
.f-nav  { 
    z-index: 9999; 
	position: fixed; 
	top: 0; width:100%; 
} 
nav  {
    width:950px;
	height:60px;
	background: url(img/bg-nav.jpg) repeat-x;
	margin:0 auto;
}
nav ul  li{
   display:inline; 
   float:left;
}
nav ul li a,
nav ul li a:visited  {
   color:#FFF;
   font-family: 'Electrolize', sans-serif;
   font-size:25px;
   text-transform:uppercase;
   float:left;
   font-weight:bolf;
   margin:0 10px 0 5px;
   line-height:60px;
}  
nav ul li a:hover  {
    color:#437CB6;
 
}

4 – Quarto passo: desenvolvimento da estrutura dos nossos artigos “article” e “figure”

id="pagina-total">
<div class="borda">
id="artigo1">
<div class="fundo-linha">
<div class="artigos">
    <h2>PRODUTO</h2>

 <img src="img/figure-1.jpg">
</figure>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.</p><br/>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.</p><br/>		   
</div>
</div>
</article>
</div>
</section>

É importante a utilização de uma div antes da tag HTML5 article, para fazer a rolagem corretamente no HTML5. Aproveitando a utilização da div eu usei para criar bordas e inserir background.

Formatação da seção artigos CSS.

#pagina-total  {
    width:960px;
	background:#1C344C;
	margin:0 auto;
}
.fundo-linha  {
    width:918px;
	height:500px;
	border:1px solid #437CB6;
	background:url(img/bg-article.png)repeat;
	padding:10px;
	float:left;
	margin:90px 0 0 10px;
}
.artigos  {
    width:918px;
	height:500px;
	background:#F0F0F0;
	float:left;
}
.borda  {
    width:960px;
	height:660px;
	margin:10px 0 0 0;
	float:left;
 
}
a{
    text-decoration:none;
	color:#F8F8F8;
    -webkit-transition:color 0.5s ease-out;
    -moz-transition:color 0.5s ease-out;
    -o-transition:color 0.5s ease-out;
    -ms-transition:color 0.5s ease-out;
}
a:hover{
	text-decoration:none;
	color:#FFFFFF;
    filter:alpha(opacity=100);
    -moz-opacity:1;
    opacity:1;
}
figure  {
    float:left;
	margin:10px;
 
}
figure:hover  {
 -webkit-box-shadow:  0px 0px 5px 0px #437CB6;
  box-shadow:  0px 0px 5px 0px #437CB6;
 
}
p  {
	font-size: 20px;
	line-height: 22px;
	letter-spacing: 0.2px;
	text-align: left;
	padding:0 0 0 5px;
	margin: 0;
	color: #555;
	font-family:'Ubuntu Condensed', sans-serif; 
}
h1  {
    font-size:40px;
    color:#FFF;
    margin:10px 0 10px 0;
    background:url(img/bg-h1.png) 0 bottom repeat-x; 
    font-family: 'Electrolize', sans-serif;	
}
h2  {
    font-size:22px;
    color:#2B5074;
    background:url(img/bg-h1-bar.jpg) 0 bottom repeat-x; 
    letter-spacing: 1px;
    margin:10px ;
    font-family: 'Oswald', sans-serif;
}

5 – Quinto passo: desenvolvimento da estrutura do rodapé “footer”.

<div id="rodape-total">

<script src="js/jquery-1.6.3.min.js"></script>
<script src="js/jquery.scrollTo-min.js"></script>
<script src="js/script.js"></script>
<a target="_blank" href="http://criarsites.me" class="direitos">Tema criarsites</a>
<small class="copy">Copyright© 2013 seu site</small>
<a href="#" class="up"><img src="img/up.png"/></a>
</footer>
</div>
</body>
</html>

Formatação CSS do nosso rodapé.

#rodape-total  {
        width:100%;
	height:100px;
	float:left;
	margin:100px 0 0 0;
	background:url(img/bg-footer.png) repeat-x;
}
footer  {
        width:960px;
	height:100px;
	margin:0 auto;
	background:url(img/bg-footer.png) repeat-x;
}
.direitos  {
   float:left;
   margin:80px 0 0 0;
   font-size:14px;
   font-family: 'Electrolize', sans-serif;
}
.up {
    width:30px;
	height:20px;
	float:right; 
	margin:40px 0 0 0;
}
.copy  {
    margin:80px 0 0 250px;
	color:#FFF;
	float:left;
	font-family: 'Electrolize', sans-serif;
 
}

No rodapé geralmente podemos colocar algumas informações de javascript caso já tenha outros scripts no nosso head. Fazemos isso para evitar conflitos entra os scripts.

Neste caso eu incluí a chamada do script do jQuery scrollto para fazer a rolagem automática da nossa navegação. Também temos o link UP para voltar ao topo do site.

Rolagem automática scrollto jQuery script.

Visite a página do desenvolvedor para fazer o download do Script scrollto e jQuery.

$(document).ready(function(){
 
$('nav a,footer a.up').click(function(e){									  
 
$.scrollTo( this.hash || 0, 500);
 
	e.preventDefault();
});
 
});

O script está configurado para executar na navegaçao na tag nav e no footer, fazendo o deslizamento entre as âncoras.

No menu temos o link abaixo:

1	<li><a href="#artigo1">Produto</a></li>

Que vai direcionar para o artigo1 com o id determinado como no exemplo abaixo:

1 2	id="artigo1"> </article>

E assim criamos nossa navegação com rolagem automática com plugin jQuery Scrollto, deixando nosso site de uma página bem interessante.

Menu fixo ao fazer a rolagem usando jQuery.

<div class="nav-total">

    <ul>
	<li><a href="#">Início</a></li>
	<li><a href="#artigo1">Produto</a></li>
	<li><a href="#artigo2">Sobre</a></li>
	<li><a href="#artigo3">Serviços</a></li>
	<li><a href="#artigo4">Localização</a></li>
	<li><a href="#artigo5">Contato</a></li>
    </ul>
<div class="clear"></div> 
</nav>
</div>

O script vai fazer a substituição da classe CSS nav-total que normalmente ficaria estática lá no topo por outra que, ao rolar a página, o script aciona outra classe CSS com posição fixa fazendo nosso menu flutuar.

Script menu fixo com jQuery.

jQuery("document").ready(function($){
 
    var nav = $('.nav-total');
 
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            nav.addClass("f-nav");
        } else {
            nav.removeClass("f-nav");
        }
    });
 
});

Classes CSS.

/******classe estática******/
.nav-total  {
	height:60px;
	background: url(img/bg-nav.jpg) repeat-x;
}
/******classe que será adicionada fazendo flutuar o menu******/
.f-nav  { 
    z-index: 9999; 
	position: fixed; 
	top: 0; width:100%; 
}

Este script do menu foi desenvolvido por Sutana Ryan e podemos ver seu exemplo aqui.

E aqui terminamos nosso site HTML5 com rolagem automática e menu fixo, caso tenha alguma dúvida deixe seu comentário. O tutorial está com tudo pra criar sites HTML5.

Para receber os próximos exemplos de sites HTML5 se inscrever no nosso FEED abaixo que eu estarei enviando por e-mail os próximos exemplos.

Abraço!

O post Criar sites HTML5 de uma página com scroll e menu fixo apareceu primeiro em Criar sites.

Temas WordPress Grátis para lojas virtuais

Everton Muta — Mon, 18 Mar 2013 03:39:18 +0000

Temas WordPress grátis para criar sua loja virtual e-comerce.

Nesta seleção de temas WordPress grátis podemos ver que é possível escolher um tema e-commerce profissional sem desembolsar uma grana na compra do tema, e iniciar suas vendas online com temas super modernos e simples.

Sem deixar muito a desejar as grandes plataformas de e-commerce, o WordPress também está entrando no mundo e-commerce com força total.

Com opções de carrinho de compras e uma grande facilidade de publicar seus produtos, dependendo do tema é preciso instalar alguns plugins de e-commerce, é preciso ver os detalhes de cada tema para seguir as instruções corretas na hora da instalação.

Oque é preciso para ter uma loja virtual com um dos temas abaixo.

WordPress é uma plataforma open source “Gratuita”, e nesta lista temos temas para serem instalados na plataforma gratuita WordPress, que também são grátis.

Não muito diferente do modelo convencional de sites e blogs, para instalar um tema e-commerce WordPress precisamos de um servidor que suporte PHP e Mysql, onde podemos criar nosso banco de dados para fazer a instalação do WordPress.

Podemos ver no tutorial aqui mesmo no Criar Sites um tutorial ensinando fazer a instalação do WordPress em um servidor gratuito que suporta PHP e mysql.

Veja também o video tutorial ensinando passo a passo da instalação.

Vamos aos nossos temas WordPress.

Wootique

DetalhesDemo

Kelontong FREE

DetalhesDemo

Jimoshop

DetalhesDemo

Mystile

DetalhesDemo

Ayoshop

DetalhesDemo

Xenastore

DetalhesDemo

Mio

DetalhesDemo

Ótimos temas e super modernos, alguns temas listados são responsivos, podendo ser acessados por dispositivos móveis como tablets e smartphones.

Caso tenha alguma dúvida por favor deixe seu comentário.

Até a próxima!…

O post Temas WordPress Grátis para lojas virtuais apareceu primeiro em Criar sites.

Como usar 960 grid framework

Everton Muta — Fri, 15 Mar 2013 11:45:59 +0000

Entenda de uma vez por todas como usar 960 grid para criar sites.

Como usar framework 960 grid pra criar sites com mais rapidez e facilidade, podemos criar um layout em minutos com esta ferramenta.

É um tanto estranho dizer que esta ferramenta veio para simplificar nossos trabalhos na hora de criar sites, quando baixamos os arquivos, oque vemos são muitos códigos e a principio parece tudo muito complicado, mas com o tempo podemos perceber que a quantidade de código na verdade é apenas um trabalho já configurado, e oque a nossa parte é realmente simples, inserir as classes do tamanho desejado e todo o alinhamento já está feito.

O conceito real dos sistemas de grade além de facilitar nosso trabalho é um conceito que não veio somente com a WEB, e sim com design em geral o alinhamento.

Quando comecei a utilizar o sistema 960 grid confesso que não pude aproveitar todo seu sistema, por não entender como decifrar todos aqueles códigos, mas uma coisa eu tinha em mente que eu tinha que colocar em meus layouts era o alinhamento.

Eu usava seu plugin para fireworks e desenvolvia todo o layout baseado nas suas grades e formatava depois com meu próprio CSS, um exemplo esta aqui no Criar Sites, podemos ver a formatação em grade de 960 px, mas todo CSS é feito na mão, ou seja a parte melhor do sistema eu deixava de lado.

Vamos ver a diferença entre um site alinhado e um site totalmente desalinhado com 960 grid, é clara a facilidade que temos para decifrar um layout bem alinhado, o desalinhamento provoca uma demora na interpretação do conteúdo e o entendimento.

Layout devidamente alinhado com 960 grid.

Layout desalinhado sem usar 960 grid.

O sistema 960 grid.

O sistema 960 grid é um modo de colocar sites em uma grade de 960 pixels de largura, a razão do número 960 é a serie divisões limpas e margens que se encaixam perfeitamente na maioria das resoluções de telas.

960 grid vem com 3 variações, grade de 12 colunas 16 colunas e uma extra de 24 colunas.

Na versão de 12 colunas a mais estreita tem 60 pixels de largura que depois vão aumentando de tamanho em 80 pixels cada, ficando então colunas de 60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860 e 940.

De modo parecido a grade de 16 colunas, a mais estreita é de 40 pixels e depois cada coluna tem um aumento de 60 pixels.

E na versão extra com grade de 24 colunas, a mais estreita é de 30 pixels e depois cada coluna tem um aumento de 40 pixels.

Utilizando CSS do 960 grid.

Quando olhamos para as barras azuis, temos que ver cada barra horizontal como uma classe CSS, assim como são chamada as classes do sistema 960 grid, grid_1, grid_2, grid_3 e assim por diante.

Baseado pelo sistema de 12 colunas, podemos ver na imagem a baixo as colunas numeradas como se fossem classes, grid_1 a menor e grid_12 a maior.

Com este sistema de nomeação das classes, se torna muito fácil fazer layouts em poucos minutos, temos que ter em mente que a soma das colunas tem ser o resultado do numero total do sistema escolhido.

No exemplo de sistema e 12 colunas, se quisermos colocar em um layout 3 blocos de textos bastaria atribuir a classe grid_4 a cada um de suas divs, ficaria 4 + 4 + 4 = 12 colunas.

Da mesma forma com a versão de 16 colunas, atribuindo a classe CSS de grid_4 na versão 16 colunas o layout ficaria com 4 colunas, 4 + 4 + 4 + 4 = 16.

Com a versão extrade 24 colunas teremos mais colunas ainda, fica a seu critério, a versão 24 colunas é para layouts mis detalhados que precisam de batates divisões, mas seguindo o exemplo teremos, 4 + 4 + 4 + 4 + 4 + 4 = 24.

Puxar e empurrar com 960 grid.

O sistema 960 grid permite puxar e empurrar elementos horizontalmente, isso é possível utilizando as classes no CSS push e pull.

Veja no exemplo abaixo, eu utilizei em um layout de 24 colunas 3 boxes com classes gri_8, mas em 2 boxes eu acrescentei pull_2 e push_2 e o resultado é puxar e empurrar horizontalmente em 2 colunas, podemos mover quantas colunas quizermos, basta acrecentar o número de colunas no push e pull.

Deixar espaços vazios com 960 grid.

Muitas vezes vamos precisar deixar espaços vazios em nosso layout, isso pode ser feito com a classe suffix e prefix.

Muito semelhante a classe pull e push, o suffix e prefix tem quase o mesmo efeito. Onde ao utilizar prefix e o número de colunas a serem deixadas vazias antes do elemento e sufix depois do elemento.

Veja no exemplo abaixo.

Utilizando classes dentro de classes com alpha e omega.

Para realizar esse método temos que atribuir as classes alpha e omega para fazer a correção dos elementos dentro das div mãe.

Uma coisa que temos que ter em mente é que ao adicionar duas ou mais classes dentro de outras é que temos que colocar alpha antes e omega depois.

No primeiro exemplo podemos ver a aplicação de alpha e omega nas 2 ultimas classes, onde tudo se encaixa perfeitamente.


	class="grid_8 ">
    class="grid_8">	<img src="img/grid_8.jpg"/>
    </section>
    </section>

class="grid_16 ">

    class="grid_6 alpha">
	<img src="img/grid_6_alpha.jpg"/>    </section>

    class="grid_10 omega">
	<img src="img/grid_10_omega.jpg"/>
    </section>
    </section>

Agora veja o resultado do mesmo código sem alpha e omega, é um desastre total, o layout se quebra inteiro.


	class="grid_8 ">
    class="grid_8">	<img src="img/grid_8.jpg"/>
    </section>
    </section>

class="grid_16 ">

    class="grid_6">
	<img src="img/grid_6_alpha.jpg"/>    </section>

    class="grid_10">
	<img src="img/grid_10_omega.jpg"/>
    </section>
    </section>

Layout completo feito com 960 grid de exempo para este tutorial.

Veja todos os detalhes do layout online no endereço a seguir => Layout 960 grid

Veja abaixo todo o código.


<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="image/favicon.ico">
	<link href="css/style.css" rel="stylesheet" type="text/css" media="all">
	<link href="css/960_24_col.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
class="container_24">
    class="grid_7 ">
	<img src="img/logo-criarsites.png"/>
	</section>
	class="pull_17 ">
    </section>
	class="grid_24">
	<img src="img/grid_24_menu.jpg"/>
    </section>
	class="grid_8">
	<img src="img/grid_8.jpg"/>
    </section>
	class="grid_8">
	<img src="img/grid_8.jpg"/>
    </section>
	class="grid_8">
	<img src="img/grid_8.jpg"/>
    </section>

	class="grid_8 prefix_8">
	<img src="img/grid_8_prefix_8.jpg"/>
    </section>
	class="grid_8">
	<img src="img/grid_8.jpg"/>
    </section>
 

	class="grid_8 suffix_8">
	<img src="img/grid_8_suffix_8.jpg"/>
    </section>
	class="grid_8">
	<img src="img/grid_8.jpg"/>
    </section>

	class="grid_8">
	<img src="img/grid_8.jpg"/>
    </section>
	class="grid_8">
	<img src="img/grid_8.jpg"/>
    </section>
	class="grid_8 pull_2">
	<img src="img/grid_8_pull_2.jpg"/>
    </section>

	class="grid_8 push_2">
	<img src="img/grid_8_push_2.jpg"/>
    </section>
	class="grid_8">
	<img src="img/grid_8.jpg"/>
    </section>
	class="grid_8">
	<img src="img/grid_8.jpg"/>
    </section>

	class="grid_8 ">
    class="grid_8 ">
	<img src="img/grid_8.jpg"/>
    </section>
    </section>

	class="grid_16 ">

    class="grid_6 alpha">
	<img src="img/grid_6_alpha.jpg"/>
    </section>

    class="grid_10 omega">
	<img src="img/grid_10_omega.jpg"/>
    </section>
    </section>
 
</section>
    id="rodape">
	<img src="img/logo-mini.png"/>
    </section>
</body>
</html>

Oque temos que ter em mente.

Utilizar container_12 para layout de 12 colunas container_16 para de 16 colunas e container_24 para layout de 24 colunas.

Usar as classes grid_1 grid_2 grid_3 e etc…. para definir a largura desejada e lembrando que o total da soma das classes tem que ser o total do container escolhido, se for um container de 12 colunas, 4 + 4 + 4 = 12, e assim serve para os demais.

Usar push e pull para empurrar e puxar o conteúdo para cima de outras classes, independente da sua marcação.

Usar preffix e sufix para criar espaços no layout.

Usar alpha e omega para corrigir as margens de classe dentro de outras.

Onde baixar o sistema 960 grid.

Site oficial 960Grid.gs

É isso pessoal, qualquer dúvida deixe seu comentário.

Abraço!

O post Como usar 960 grid framework apareceu primeiro em Criar sites.

Como vender no Facebook com BazzApp

Everton Muta — Fri, 22 Feb 2013 04:41:22 +0000

Anuncie seu produtos no facebook e atinja milhares de usuários

Vender no facebook com simplicidade e segurança, essa é a promessa do aplicativo BazzApp que recentemente fez parceria com a famosa empresa de pagamentos online PayPal, deixando ainda mais fácil e segura suas vendas e compras pelo facebook.Veja como é fácil inserir sua loja ao seu perfil e fazer suas vendas pelo facebook.

Como vender no facebook? agora isso ficou fácil e seguro, com o aplicativo BazzApp você adiciona sua loja virtual no facebook em instantes e já começa vender seus produtos.

Para anunciar no facebook com o aplicativo BazzApp é grátis, e caso seu produto seja vendido será cobrado uma taxa de 8,5%.

Podemos dizer que vender no facebook e ter seus produtos anunciado para milhares de pessoas com essa taxa de 8,5%, sai bem em conta. Nosso querido e muito utilizado por muitos usuários no Brasil o “Mercado Livre” cobra uma taxa de 9,5%, segundo o valor estipulado nos termos de serviço do Mercado Livre.

O aplicativo BazzApp é interessante porque você pode integrar uma loja virtual para qualquer uma de suas páginas contidas no seu perfil do facebook, tornando ainda mais personalizada sua loja virtual e exibindo produtos específicos de sua página no facebook.

Possui um sistema de calculo de frete com base no CEP informado para sua loja e o CEP do comprador, facilitando nas suas transações.

Como todo tipo de venda online deste tipo onde envolve as duas partes vendedor e comprador.Caso uma das partes seja lesada de alguma forma, o aplicativo tem um sistema de qualificação, onde os usuários podem classificar suas vendas e compras como positivas e negativas informando assim o aplicativo as pessoas que não estão fazendo bom uso do serviço.

Como integrar o aplicativo ao facebook

Primeiro passo é ter uma conta no facebook, se preferir crie também uma página sobre seus produtos.O aplicativo pode ser integrado ao seu perfil e páginas.

Acesse o site do aplicativo BazzApp, onde você será direcionado a página do aplicativo onde deverá dar permissão de uso.

Sua loja será adicionada ao seu perfil onde você deve inserir telefone, descrição da loja e preencher seus dados de conta PayPal e conta bancaria.

Para instalar uma loja a sua página basta clicar no local indicado abaixo.

E em seguida escolha qual página você deseja adicionar a sua loja, caso tenha mais de uma.

Com sua loja configurada é só adicionar seus produtos e convidar todos seus amigos para visitar sua loja virtual no facebook.

Uma ótima oportunidade de divulgação de produtos, e uma forma de atingir muitas pessoas contando com a alta frequência de usuários diariamente no facebook.

Dixe seu comentário caso tenha alguma duvida, caso possa se interessar veja assuntos relacionados logo abaixo.

Um grande abraço e ótimas vendas.

O post Como vender no Facebook com BazzApp apareceu primeiro em Criar sites.

E-book Diário de um Blogueiro

Everton Muta — Wed, 20 Feb 2013 04:13:02 +0000

Júnior Gonçalves em suas experiências no mundo dos blogs.

Neste e-book o autor Júnior Gonçalves conta sua experiencia na trajetória de quase 5 anos no mundo dos blogs, e conta tudo que aprendeu e conquistou com seus blogs.

O e-book conta com informações importantes sobre a criação de blogs, relatos de erros e acertos na longa caminhada que nós blogueiros temos que enfrentar.

Relatos interessantes que nos fazem perceber que o sucesso de um blog pode estar em coisas simples, pequenos detalhes podem fazer toda diferença.

Eu li o e-book gostei e recomendo, são informações pessoais importantes para quem deseja criar seu primeiro blog ou até mesmo para quem já está na batalha.

Um guia para quem deseja entender como funciona o processo de criação de blogs e como escolher a plataforma ideal para seu perfil e muito mais.

Sobre o autor

Júnior Gonçalves possui graduação em Sistemas de Informação pela Fundação de Ensino Otávio Bastos (2009), pós graduação em Desenvolvimento de Sistemas Web pela Faculdade Anhanguera Educacional (2012) e experiência na área de desenvolvimento web, com ênfase nas tecnologias XHTML, CSS, PHP, javascript, Fireworks, CorelDraw, WordPress e SEO.

Atua como auxiliar de T.I. no Instituto Bairral de Psiquiatria em Itapira/SP e como professor de desenvolvimento web no curso Técnico em Informática para Web na ETEC João Maria Stevanatto e Faculdade de Ciências da Computação no IESI Instituto de Ensino de Superior de Itapira.

Acesse a página promocional do e-book.

Diário de um Blogueiro

Um investimento mínimo para um conteúdo de qualidade e que exigi muito trabalho e esforço.

Um abraço a todos e um ótima leitura.

O post E-book Diário de um Blogueiro apareceu primeiro em Criar sites.

Melhor programa de FTP para criar sites programa FileZilla

Everton Muta — Sun, 10 Feb 2013 13:12:08 +0000

O programa de FTP FileZilla o mais utilizado entre os webmasters para criar sites.

FileZilla é um programa de FTP gratuito, super popular e utilizado por webmasters de todo o mundo.

Vamos usar bastante o programa de FTP FileZilla para enviar nossos arquivos para o servidor de hospedagem, nos próximos tutoriais do criarsites.me vamos desenvolver nossos sites e enviar via FTP com este programa.

Os dados de acesso de FTP é fornecido pelo próprio servidor, as vezes já vem configurado uma conta padrão do servidor, mas você pode criar várias contas de FTP dependendo do servidor contratado.

O programa de FTP FileZilla é o mais recomendado entre os programas gratuitos, por ser simples e muito eficiente.

Além da versão cliente ele possui a versão server, utilizada em empresas para enviar arquivos para servidores de grande porte.

É um programa que suporta multi plataformas como Windows, Linux, *BSD, Mac OS X e outras.

Onde baixar.

Acesse o Site Oficial FileZilla

Como fazer a configuração.

Depois de fazer toda a instalação, abra o programa FileZilla e siga esses passos.

Clique em arquivo e depois gerenciador de sites.

Em seguida clique em novo site e coloque as configurações da sua conta de FTP como nome do host, a porta que geralmente é 21, nome de usuário e senha.

Depois clique em conectar.

Na imagem a baixo do lado esquerdo estão as pastas do seu computador, e lado direito as pastas do servidor.

A pasta de diretório do site varia de nome mas as mais populare são public_html e www, entre em contato com seu servidor e peça mais informações a respeito da pasta de diretório dos arquivos do site.

O programa FileZilla possui um sistema de Drag & drop,onde você pode clicar na pasta e arrastar para o diretório desejado. É só clicar e arrastar para a pasta desejada.

Mais uma ferramenta indispensável para criação de sites, qualquer duvida deixe seu comentário.

O post Melhor programa de FTP para criar sites programa FileZilla apareceu primeiro em Criar sites.

Hospedagem grátis para criar sites WordPress

Everton Muta — Fri, 08 Feb 2013 16:05:12 +0000

Hospedagem grátis que suporta WordPress e sem propaganda.

Quando falamos em criar sites com hospedagem grátis já vem aquela imagem de propagandas e lentidão, mas 000Webhost não exibe propagandas e ainda tem algumas ferramentas disponíveis como suporte a PHP, para instalação do nosso WordPress.

Para quem deseja criar sites WordPress ou fazer alguns testes online ou até mesmo hospedar um blog ou site de pequeno porte em uma hospedagem grátis, é uma boa opção.

Fiz um teste e criei uma conta para mostrar como funciona a hospedagem gratuita, e enviei um WordPress versão 3.5.1 a mais atual, e rodo sem problemas.

Criar sites WordPress com hospedagem grátis no ar Site modelo.

Configurações disponíveis de hospedagem grátis para criar sites.

Espaço em disco – 1500 MB.

Transferência mensal de 100 GB.

Suporte PHP.

Podemos criar até 2 banco de dados MySQL

Webmail com até 5 contas de e-mail.

Adicionar até 5 domínios e 5 subdomínios.

Painel de controle customizado.

Construtor de sites simples.

1 Conta de FTP.

Suporte IMAP.

Página de erro customizável .

Veja o passo a passo da criação da conta gratuita.

Acesse o site 000Webhost e escolha a opção FREE.

Coloque o nome do site que deseja criar e nome e senha para para efetuar o cadastro, insira a imagem de segurança e clique em Create My account.

Você irá receber em seu e-mail de registro um link de confirmação de e-mail de cadastro, clique no link de confirmação.

Logo após a confirmação, você vai receber mais um e-mail com todos seus dados de cadastro e o link de acesso ao painel administrativo.

Acesse o seu painel com login e senha de registro.

Em seguida você será direcionado a área de administração, onde deve selecionar o site para entrar no Cpanel.

Pode demorar alguns minutos para aparecer o nome do site na área de seleção.

Sua conta gratuita já está criada, mas se deseja instalar seu WordPress siga os passos seguintes.

No seu painel clique em MySQL para criar seu banco de dados.

Insira o nome do banco de dados e senha e clique em Create Database.

O banco está criado e você sera direcionado a página com todos os dados do banco, guarde esses dados que usaremos na instalação do WordPress.

Com tudo pronto para receber nosso WordPress, baixe a ultima versão WordPress-pt-Br

Abra a pasta do WordPress e encontre o arquivo “wp-config-sample.php”, vamos configurar este arquivo com os dados do banco MySQL.

Use seu editor de código favorito para abrir o arquivo, eu recomendo o Notpad++.

Ao abrir o arquivo wp-config-sample, vamos fazer as configurações do banco de dados para a instalação do WordPress, lembra do banco de dados que criamos?

Insira os dados no arquivo e salve como “wp-config”, assim o WordPress irá reconhecer as configurações automaticamente.

// ** Configurações do MySQL  ** //
/** O nome do banco de dados do WordPress */
define('DB_NAME', 'Nome do banco de dados'); 
/** Usuário do banco de dados MySQL */
define('DB_USER', 'Nome de usuário do banco de dados'); 
/** Senha do banco de dados MySQL */
define('DB_PASSWORD', 'Senha'); 
/** nome do host do MySQL */
define('DB_HOST', 'Nome do Host do banco de dados');

Envie os arquivos do WordPress via FTP para a pasta public_html, no painel de controle você tem acesso as configurações necessárias para acessar o FTP da sua hospedagem gratuita.

Eu uso e recomendo o programa gratuito de FTP FileZilla.

Depois de enviar todos os arquivos do WordPress, acesse o endereço do site para continuar a instalação do WordPress.

Se tudo correu bem você vera uma imagem como esta abaixo.

Insira os dados do site e clique em instalar WordPress.

Pronto! seu WordPress está instalado

Agora é só fazer as configurações necessárias para deixar seu site ou blog rodando em uma hospedagem gratuita, se preferir deixar definitivo na hospedagem é só inserir seu domínio próprio para ficar mais elegante.

Hospedagem grátis para criar sites e fazer seus testes é um dos melhores.

Até a próxima!

O post Hospedagem grátis para criar sites WordPress apareceu primeiro em Criar sites.