Mostrando postagens com marcador site. Mostrar todas as postagens
Mostrando postagens com marcador site. Mostrar todas as postagens

12 de abr. de 2010

Como saber se um site está fora do Ar (status)?

Já tentou acessar um site que você desenvolveu e aparece aquela mensagem idiota linda que o site está fora do ar, aí fica a dúvida "Seria minha internet ou é o servidor?". Pois é meu amigo seus pôbremas problemas acabaram abaixo alguns sites que podem te ajudar a ver se seu site está online.

9 de mar. de 2010

Página com fundo degradê

Hoje você VAI aprender como é simples fazer um efeito de fundo degradê em um site com uma pequena imagem de 1 pixel, com HTML e CSS.

Você irá precisar de Photoshop, esta é uma ótima ferramenta para auxiliar o web designer, destaquei a palavra auxiliar pois existem muitos web designers que apenas utilizam o photoshop e geram o html através do photoshop, assasinando todos os padrões web, pois infelizmente o photshop gera um html bem fraco.

Então, vamos abrir o Photoshop neste caso estou usando a versão CS3, mas qualquer versão você poderá fazer.

Crie um documento com as resoluções (1024x768), foi escolhida esta resolução pois atualmente 80% da internet utiliza esta resolução.



Deixe a cor #7fa6ee como primária na sua paleta
Em seguida você irá escolher a ferramenta


Faça um "traço" com a ferramente na imagem da forma como mostra abaixo, isto definirá a área de degradê (Se for necessário clique na imagem para ampliar).


Ao soltar o mouse o photohop criará veja como ficou



Agora é a hora de diminuir esta imagem para que sua página com fundo degradê não fique pesada. Para isso acesse Image->Image Size... (crtl + alt + i).


Ao clicar uma janela é aberta, altere o width (largura) da imagem para 1


Agora depois de alterar a largura da imagem é só salva, agora vai uma das melhores dicas para você deixar seu site leve, SEMPRE salve as imagens em File -> Save for Web & Devices repare o parâmetros Preset para GIF para definir o tipo da imagem e salve-o com fundo.gif.


Agora que já temos a imagem de fundo, vamos por a mão na massa. Crie um documento HTML em branco.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Web Como um todo! me ensinou - Meu primeiro fundo degradê Vertical</title>
</head>

<body>
<a href="http://webcomoumtodo.blogspot.com" title="Web Como Um Todo!">Web Como Um Todo!</a>
</body>
</html>


Crie um documento CSS denominado wcut.css com o código abaixo, onde definirá propriedade do fundo da tag body

@charset "utf-8";
/* CSS Document */

body{
background:transparent url(fundo.gif) repeat-x 0 0;
}


Agora é só incluir a referência ao documento css na página HTML, insira a linha abaixo entre as tags <head> e </head>

<link href="wcut.css" rel="stylesheet" type="text/css"></link>


Pronto! Seu fundo degradê para seu site está pronto! É só abrir o arquivo para conferir o resultado. Veja aqui o Resultado Final deste tutorial.