Categoria ‘Tutoriais’
| « Conhecendo o Joomla | Dicas para tornar seu site mais rápido » |
Otimizando seu site com a técnica CSS Sprite
20 de novembro de 2009
Há diversas técnicas muito úteis em CSS que devem ser levadas em consideração no desenvolvimento de um website. Uma dessas técnicas é a famosa CSS Sprite, mas que alguns ainda não conhecem.
O que é?
Consiste em agrupar várias imagens do seu site em uma única imagem, e depois manipulá-la através do seu CSS. Isso faz com que a quantidade de requisições ao servidor seja pequena, tornando o site mais rápido.
Algumas vantagens
Sem dúvida a grande vantagem na sua utilização é a rapidez no qual as imagens do site serão carregadas.
Em sites pequenos talvez seu ganho em performance não seja tão evidente, já em sites mais extensos, esta simples técnica faz uma grande diferença.
Além disso, outra vantagem é na manutenção das imagens, onde estarão todas em apenas um arquivo, facilitando a edição do layout. Um site que pode servir como exemplo disso é o Youtube, que utiliza CSS Sprite.
Veja o exemplo abaixo:
IMAGEM
Vamos supor que temos um menu:
HTML
<li><a href=”#” id=”link1″>Link 1</a></li>
<li><a href=”#” id=”link2″>Link 2</a></li>
<li><a href=”#” id=”link3″>Link 3</a></li>
</ul>
Agora vamos estilizá-lo!
CSS
ul#menu li a { background-image: url(‘sprite.png’); background-repeat: no-repeat; color: #fff; display: block; font-weight: bold; height: 40px; text-decoration: none; width: 126px; }
ul#menu li a:hover#link1 { background-position: -378px 0; }
ul#menu li a:hover#link2 { background-position:-252px 0; }
ul#menu li a:hover#link3 { background-position:-126px 0; }
A propriedade CSS que faz a magia acontecer é a background-position, onde o primeiro valor é a posição X (horizontal) e o segundo valor a posição Y (vertical) da imagem que queira exibir.
Neste exemplo, foi necessário apenas uma requisição ao servidor, pois tinha apenas uma imagem utilizada para compor o menu.
Lembre-se que a rapidez de um site é um ponto muito importante atualmente na web, pois se o site demorar para carregar suas imagens o usuário irá desistir e procurar outro que atenda as suas expectativas.
Tags: como criar um site, CSS, Dicas, otimização, Tutoriais
Categoria: Tutoriais
1 Comentário »
Video-Tutorial: Como criar um blog com o WordPress?
28 de outubro de 2008
Veja abaixo um vídeo tutorial que ensina como usar o WordPress para criar seu blog.
Confira também o tutorial em texto clicando aqui.
Tags: Blog, como criar um site, hospedagem de site, video, Wordpress
Categoria: Tutoriais
11 Comentários »
Como criar um blog com o WordPress?
03 de outubro de 2008
Blogs são sites que permitem o registro freqüente de informações (Posts). Estes possuem uma interface limpa, de fácil atualização e têm baixo custo, que fazem desta ferramenta um sucesso.
O WordPress é um dos sistemas gratuitos de blog mais utilizados na internet. Oferece fácil utilização, personalização e manutenção. O rápido crescimento deste sistema se dá ao seu tipo de licença (código aberto), fácil implementação com plugins e widgets e suas características como gereciador de conteúdos.
A RedeHost utiliza o WordPress em seu blog e também disponibiliza um tutorial que ensina passo-a-passo como instalar o WordPress em seu site. Para acessar o tutorial clique aqui.
Tags: Blog, hospedagem de site, Novidades, Wordpress
Categoria: Tutoriais
11 Comentários »
| « Ganhe bônus para divulgar seu site | RedeHost no TechEd 2008! » |
RedeHost em uma frase:
Uma das maiores empresa de hospedagem de sites e registro de domínio do Brasil, a única 100% em cloud computing, reconhecida pelo melhor atendimento e infraestrutura.