CSS, a solução pra agilizar
Não sei se vocês sabem, mas é bom fazer o design dos sites sempre com CSS. A maioria das vezes o CSS que é um código, fica mais leve do que você fazer um background com imagem por exemplo...
Outra coisa é ícones, ás vezes você precisa colocar várias imagens pequenas no seu site, algumas vezes com fundo transparente, compensa você juntar todas imagens em uma única, e usar a técnica utilizada em muitos jogos, na qual em uma imagem você desenhava todos os golpes dos personagens, depois com programação você dividia as imagens...^^
Outra vantagem é que compensa mais você fazer um elemento flutuar na página com o CSS do que com javascript, por exemplo, uma div que abaixa quando a janela rola... Dá pra fazer dos 2 jeitos, mas com CSS fica muito mais suave e não trava tanto... O que acontece é que nem todos navegadores tem comandos CSS iguais, você tem que pesquisar...
Organizar os elementos na página também é muito mais fácil e melhor com CSS do que com tables, iframes, etc...
Você pode criar CSS que serão usados em várias páginas do seu site, assim quando o usuário mudar de página a página carregarão mais rapidamente, porque o navegador dele já está com o arquivo carregado. Esse é um ótimo pulo do gato pra acelerar seu site! Bastar escrever normalmente no bloco de notas mesmo e depois salvar com extensão .css ...
Você pode analizar o CSS dos sites que você visita pelo código de fonte...
Vou dar alguns exemplos pra vocês aprenderem um pouco mais dessa maravilha...^^
Quando você for carregar um CSS externo no seu site basta você colocar esse código HTML na seção head:
<link rel="stylesheet" href="http://www.seusite.com.br/arquivo.css" type="text/css" />
Exemplo pra fazer um elemento div(retire os comentários pra fazer efeito):
div{
position:absolute; Absolute faz o elemento voar, não fica dentro do seu pai como o relative.
width:500px; Define a largura do div.
height:500px; Define a altura do div.
left:50%; Define que a posição esquerda incial da div é 50%.
top:50%; Define que a posição superior inicial da div é 50%.
margin-top:-250px; Margens negativas fazem o div absolute recuar, ficando no centro da página verticalmente.
margin-left:-250px; Margens negativas fazem o div absolute recuar, ficando no centro da página horizontalmente.
background: rgba(0,0,0,0.5); Define um background preto com transparência de 50%.
font-family:arial; Define que a fonte usada na div será arial.
font-size:20px; Define o tamanho da fonte.
color:#FFFFFF; Define que a cor da fonte será branca.
text-align:center; Define que o texto ficará centralizado.
border-radius:10px; Define o arredondamento da div.
box-shadow: 10px 10px 5px #888; Usado pra fazer o efeito de glow e também drop shadow...
}
Bom gente aí tem bastante comandos como vocês podem ver...^^ É mais pra vocês terem uma idéia de como funciona mesmo, não tou querendo ser professor, até porque não sei fazer o aprendizado gradual, vai ser complicado vocês aprenderem algo...rs Mas vejam o CSS do facebook por exemplo, é ótimo pra aprender truques...^^
Outro dia aprendi por exemplo que as atualizações da linha do tempo são organizadas com o comando:
clear:left;float:left;. Isso é pras atualizações da esquerda na direita muda pra right, já usei essa técnica num site, e foi dificil de chegar nisso, então se você ver algum site fazendo o que você quer fazer, tente copiar como ele fez...=D Se você nunca viu nenhum site como você quer, procure até achar, ou então, chore até aprender a fazer pros outros te copiarem...rsrsrs XDD
Os sites estão usando cada vez mais div, span, li, tags que antes eram pouco usadas, mas essas tags tem muito potencial css, reparem nos códigos de fonte pra vocês verem...
Falando ainda de CSS, você sabia que o google leva muito em conta os elementos com <h1><h2><h3> da sua página? Ele considera h1 como título, h2 como subtitulo, assim por diante, então não deixe de destacar com os <h*> o que é relevante, assim o google te achará(Ah, mas a letra vai ficar grande, pulando linha)...
É simples resolver isso, coloque no CSS: h1{} . E estilise como bem intender entre as chaves!
Outra coisa é ícones, ás vezes você precisa colocar várias imagens pequenas no seu site, algumas vezes com fundo transparente, compensa você juntar todas imagens em uma única, e usar a técnica utilizada em muitos jogos, na qual em uma imagem você desenhava todos os golpes dos personagens, depois com programação você dividia as imagens...^^
Outra vantagem é que compensa mais você fazer um elemento flutuar na página com o CSS do que com javascript, por exemplo, uma div que abaixa quando a janela rola... Dá pra fazer dos 2 jeitos, mas com CSS fica muito mais suave e não trava tanto... O que acontece é que nem todos navegadores tem comandos CSS iguais, você tem que pesquisar...
Organizar os elementos na página também é muito mais fácil e melhor com CSS do que com tables, iframes, etc...
Você pode criar CSS que serão usados em várias páginas do seu site, assim quando o usuário mudar de página a página carregarão mais rapidamente, porque o navegador dele já está com o arquivo carregado. Esse é um ótimo pulo do gato pra acelerar seu site! Bastar escrever normalmente no bloco de notas mesmo e depois salvar com extensão .css ...
Você pode analizar o CSS dos sites que você visita pelo código de fonte...
Vou dar alguns exemplos pra vocês aprenderem um pouco mais dessa maravilha...^^
Quando você for carregar um CSS externo no seu site basta você colocar esse código HTML na seção head:
<link rel="stylesheet" href="http://www.seusite.com.br/arquivo.css" type="text/css" />
Exemplo pra fazer um elemento div(retire os comentários pra fazer efeito):
div{
position:absolute; Absolute faz o elemento voar, não fica dentro do seu pai como o relative.
width:500px; Define a largura do div.
height:500px; Define a altura do div.
left:50%; Define que a posição esquerda incial da div é 50%.
top:50%; Define que a posição superior inicial da div é 50%.
margin-top:-250px; Margens negativas fazem o div absolute recuar, ficando no centro da página verticalmente.
margin-left:-250px; Margens negativas fazem o div absolute recuar, ficando no centro da página horizontalmente.
background: rgba(0,0,0,0.5); Define um background preto com transparência de 50%.
font-family:arial; Define que a fonte usada na div será arial.
font-size:20px; Define o tamanho da fonte.
color:#FFFFFF; Define que a cor da fonte será branca.
text-align:center; Define que o texto ficará centralizado.
border-radius:10px; Define o arredondamento da div.
box-shadow: 10px 10px 5px #888; Usado pra fazer o efeito de glow e também drop shadow...
}
Bom gente aí tem bastante comandos como vocês podem ver...^^ É mais pra vocês terem uma idéia de como funciona mesmo, não tou querendo ser professor, até porque não sei fazer o aprendizado gradual, vai ser complicado vocês aprenderem algo...rs Mas vejam o CSS do facebook por exemplo, é ótimo pra aprender truques...^^
Outro dia aprendi por exemplo que as atualizações da linha do tempo são organizadas com o comando:
clear:left;float:left;. Isso é pras atualizações da esquerda na direita muda pra right, já usei essa técnica num site, e foi dificil de chegar nisso, então se você ver algum site fazendo o que você quer fazer, tente copiar como ele fez...=D Se você nunca viu nenhum site como você quer, procure até achar, ou então, chore até aprender a fazer pros outros te copiarem...rsrsrs XDD
Os sites estão usando cada vez mais div, span, li, tags que antes eram pouco usadas, mas essas tags tem muito potencial css, reparem nos códigos de fonte pra vocês verem...
Falando ainda de CSS, você sabia que o google leva muito em conta os elementos com <h1><h2><h3> da sua página? Ele considera h1 como título, h2 como subtitulo, assim por diante, então não deixe de destacar com os <h*> o que é relevante, assim o google te achará(Ah, mas a letra vai ficar grande, pulando linha)...
É simples resolver isso, coloque no CSS: h1{} . E estilise como bem intender entre as chaves!
Comentários
Postar um comentário