27 de outubro de 2010

Inspiration Showcase - Sites #9



Desculpem pela demora ^__^ , mas depois de um tempo sem postagens na seção "Inspiratin Showcase" a seção voltou a ativa.
Mais um site, agora é o Blog Avoado enviado pelo Victor Pagani, possui postagens que abordam inspirações, freebies, noticias e tutoriais, muita coisa relacionada a design, um blog com um design simples e bem agradável.




Envie seu blog também para a seção "Inspiration Showcase" !

23 de outubro de 2010

Verifique se seu site é tableless

Saiba se seu site está dentro dessa recomendação da W3C


A W3C é um orgão que regulamenta normas para web e propõe em uma de suas normas que os sites sejam "tableless", sendo tableless seu site é indexado com mais facilidade pelos mecanismos de busca a página fica mais leve, torna o site mais compatível com browsers atuais e consequentemente vai estar dentro das web standards.

Na web existe uma boa ferramente pra te auxiliar nisso(...), é o site w3tableless.com onde você pode verificar se sua página é tableless ou não, basta digitar o endereço do seu web site no campo e clicar em "check", se for tableless irá retornar um "Congratulations" pra você. Fica a dica.

Mas se você não sabe o que é um site tableless, recomedo a leitura da postagem "Tableless, conceito e importância" que é um resuminho básico sobre o conceito de tableless.

16 de outubro de 2010

Como importar o CSS para sua página HTML

Importando através do @import e link



Importar um arquivo .css para sua página HTML é bem simples !

Podemos usar dois modos, atraves do @import que é uma propriedade CSS, ou <link> que é uma tag HTML

Usando o @import

Digitamos as tags <style> e dentro dela colocaremos o @import como abaixo, tudo isso logo antes da tag </head>(atenção pessoal iniciante, não é antes da <head> é antes da </head> com uma "/"), e no lugar de meuarquivo.css coloque o nome da sua folha de estilos .css, lembre-se de(...) colocar o CSS na mesma pasta que está o seu HTML, veja:
<html>
<body>  
<head> <title>titulodosite</title> 
...
<style type="text/css">
@import url("meuarquivo.css")
</style>

</head>
<body>
...
</body>
</html>

Usando a tag <link>

O outro modo de importar é usando a tag <link> antes da tag </head>, o nome do seu arquivo .css você coloca no lugar do "exemplo.css", faça como abaixo:
<html>
<head>
<title>titulodosite</title>
... 
<link rel="stylesheet" type="text/css" href="exemplo.css">

</head>
<body> 
...
</body>
</html>
Não se esqueça de colocar o seu arquivo .css na mesma pasta do seu HTML.

2 de outubro de 2010

Efeito muticores em seus links

Um código javascript bem interessante que deixa seus link como um arco-iris



Olá ! Encontrei um código muito interessante na web, mais precisamente no blog mybloggertricks.com que deixa seus links (quando está no estado hover) não só com uma cor, mas várias cores que se alternam, um efeito multicolorido, veja a demostração aqui.

Atenção ! Muito cuidado com esse efeito, dependendo do tema do seu site ou blog pode ficar chamativo demais. ^_^

O primeiro passo é copiar o código javascript abaixo, logo antes da tag de fechamento </head> no código do seu site ou blog:
<script type='text/javascript'>
//<![CDATA[
var rate = 20;
if (document.getElementById) 
window.onerror=new Function("return true")
var objActive;  // The object which event occured in 
var act = 0;    // Flag during the action 
var elmH = 0;   // Hue 
var elmS = 128; // Saturation 
var elmV = 255; // Value 
var clrOrg;     // A color before the change 
var TimerID;    // Timer ID
if (document.all) { 
    document.onmouseover = doRainbowAnchor; 
    document.onmouseout = stopRainbowAnchor; 
} 
else if (document.getElementById) { 
    document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT); 
    document.onmouseover = Mozilla_doRainbowAnchor; 
    document.onmouseout = Mozilla_stopRainbowAnchor; 
}
function doRainbow(obj) 
{ 
    if (act == 0) { 
        act = 1; 
        if (obj) 
            objActive = obj; 
        else 
            objActive = event.srcElement; 
        clrOrg = objActive.style.color; 
        TimerID = setInterval("ChangeColor()",100); 
    } 
}

function stopRainbow() 
{ 
    if (act) { 
        objActive.style.color = clrOrg; 
        clearInterval(TimerID); 
        act = 0; 
    } 
}

function doRainbowAnchor() 
{ 
    if (act == 0) { 
        var obj = event.srcElement; 
        while (obj.tagName != 'A' && obj.tagName != 'BODY') { 
            obj = obj.parentElement; 
            if (obj.tagName == 'A' || obj.tagName == 'BODY') 
                break; 
        }
        if (obj.tagName == 'A' && obj.href != '') { 
            objActive = obj; 
            act = 1; 
            clrOrg = objActive.style.color; 
            TimerID = setInterval("ChangeColor()",100); 
        } 
    } 
}

function stopRainbowAnchor() 
{ 
    if (act) { 
        if (objActive.tagName == 'A') { 
            objActive.style.color = clrOrg; 
            clearInterval(TimerID); 
            act = 0; 
        } 
    } 
}

function Mozilla_doRainbowAnchor(e) 
{ 
    if (act == 0) { 
        obj = e.target; 
        while (obj.nodeName != 'A' && obj.nodeName != 'BODY') { 
            obj = obj.parentNode; 
            if (obj.nodeName == 'A' || obj.nodeName == 'BODY') 
                break; 
        }
        if (obj.nodeName == 'A' && obj.href != '') { 
            objActive = obj; 
            act = 1; 
            clrOrg = obj.style.color; 
            TimerID = setInterval("ChangeColor()",100); 
        } 
    } 
}

function Mozilla_stopRainbowAnchor(e) 
{ 
    if (act) { 
        if (objActive.nodeName == 'A') { 
            objActive.style.color = clrOrg; 
            clearInterval(TimerID); 
            act = 0; 
        } 
    } 
}

function ChangeColor() 
{ 
    objActive.style.color = makeColor(); 
}

function makeColor() 
{ 
    // Don't you think Color Gamut to look like Rainbow?
    // HSVtoRGB 
    if (elmS == 0) { 
        elmR = elmV;    elmG = elmV;    elmB = elmV; 
    } 
    else { 
        t1 = elmV; 
        t2 = (255 - elmS) * elmV / 255; 
        t3 = elmH % 60; 
        t3 = (t1 - t2) * t3 / 60;
        if (elmH < 60) { 
            elmR = t1;  elmB = t2;  elmG = t2 + t3; 
        } 
        else if (elmH < 120) { 
            elmG = t1;  elmB = t2;  elmR = t1 - t3; 
        } 
        else if (elmH < 180) { 
            elmG = t1;  elmR = t2;  elmB = t2 + t3; 
        } 
        else if (elmH < 240) { 
            elmB = t1;  elmR = t2;  elmG = t1 - t3; 
        } 
        else if (elmH < 300) { 
            elmB = t1;  elmG = t2;  elmR = t2 + t3; 
        } 
        else if (elmH < 360) { 
            elmR = t1;  elmG = t2;  elmB = t1 - t3; 
        } 
        else { 
            elmR = 0;   elmG = 0;   elmB = 0; 
        } 
    }
    elmR = Math.floor(elmR).toString(16); 
    elmG = Math.floor(elmG).toString(16); 
    elmB = Math.floor(elmB).toString(16); 
    if (elmR.length == 1)    elmR = "0" + elmR; 
    if (elmG.length == 1)    elmG = "0" + elmG; 
    if (elmB.length == 1)    elmB = "0" + elmB;
    elmH = elmH + rate; 
    if (elmH >= 360) 
        elmH = 0;
    return '#' + elmR + elmG + elmB; 
}
//]]>
</script>
Em var rate = 20 (bem no início do código) você pode mudar a velocidade com que as cores mudam, nesse caso você mudaria o número 20 por qualquer outro valor. valores maiores aumentam a velocidade e valores menores diminuem.

Feito isso, aproveite, ;) agora qualquer link que você criar em sua página estará com o efeito, veja a demostração aqui.
Espero que você, leitor, tenha gostado.