27 de dezembro de 2010

Centralizando seu site com CSS

Modo simples de deixar sua página sempre no centro da tela

Vamos utilizar um método, que na minha opinião, é o mais fácil para deixar o site sempre no meio da tela, não importando a resolução ou o tamanho da janela a página sempre fica no meio.

Primeiramente o HTML, teremos que criar uma div que envolva todo o site (como se fosse uma "casca") e nela colocaremos o id="centro". E dentro dela criamos mais uma div, com o id="wrap". Veja como ficou:

<div id="centro">
<div id="wrap">

</div>
</div>
(...)
Agora o CSS, para a nossa "div centro" colocamos float com o valor left, margin com o valor auto (para o cálculo automático da margem), width com o valor 100%, (o valor é em porcetagem por que assim a div ocupa a largura da tela inteira não importando o tamanho da janela ou a resolução do monitor) e border com os valores de 1px, solid e blue apenas para que você possa visualizar a div, coloque o valor em 0px se não quizer visualizar a borda.

Já para a "div wrap" colocamos margin com o valor auto e width com o valor de exemplo de 800px, e border com os valores de 1px, solid e blue (coloque o valor em 0px se não quizer visualizar a borda). Veja:

#centro{
        border:1px solid blue;
        float: left;
        margin:auto;
        width:100%;
       }

#wrap{
        border:1px solid red;
        margin:auto;
        width:800px;
       }

Pronto ! Agora dentro da div "wrap" você desenvolve sua página.

18 de dezembro de 2010

Tutorial de XHTML

Aprenda XHTML sem enrolação



O que é XHTML ? Uma breve introdução.

O XHTML é uma linguagem desenvolvida para exibição de páginas da internet tanto em pcs e notebooks quanto em celulares, pamls, etc. É uma linguagem mais organizada e mais "limpa" em relação ao HTML. Essa nova linguagem consegue ser suportada por vários dispositivos, independentemente da plataforma usada. Se baseia na linguagem XML sem deixar de lado a inguagem de marcação HTML. Além disso a W3C recomenda o uso do XHTML desde 26 de janeiro de 2000 (já faz um tempinho).


Diferenças entre HTML e XHTML.

Não existem grandes diferenças entre o HTML e o XHTML, se você domina o HTML não terá muitas dificuldades em aprender essa linguagem, existem muitas praticas que podiam ser usadas no HTML e que agora no XHTML não podem mais, seria como um HTML mais organizado como dito anteriormente, onde você tem que seguir algumas regras a mais, vamos começar.
(...)
1 No XHTML todos os elementos devem, obrigatoriamente, estar bem aninhados.



Modo errado:
<p><b><i>texto</b></i></p>
Modo certo:
<p><b><i>texto</i></b></p>



2 Todos os elementos devem, obrigatoriamente, possuir tags de fechamento.



Modo errado:
<p>esse é um texto.
<p>esse é outro texto.
Modo certo:
<p>esse é um texto.</p>
<p>esse é outro texto.</p>



2.1 Aqueles elementos que no HTML não possuem uma tag de fechamento, devem ser, obrigatoriamente, fechados com um espaço e uma "/" no final, atenção, não se esqueça do espaço:



Modo errado:
esse é um texto.
<br>
esse é outro texto.
<hr>
<img src="exemplo.gif" alt="uma imagem">
Modo certo:
esse é um texto.
<br />
esse é outro texto.
<hr />
<img src="exemplo.gif" alt="uma imagem" />



3 No XHTML as tags e também os atributos são sensíveis a caixa, por isso devem estar, obrigatoriamente, em caixa baixa (letras minúsculas):



Modo errado:
<BODY>
<P><b><i>texto</i></b></P>
</BODY>
<font COLOR="blue">texto</b>
<img src="exemplo.gif" ALT="uma imagem" />
Modo certo:
<body>
<p><b><i>texto</i></b></p>
</body>
<font color="blue">texto</b>
<img src="exemplo.gif" alt="uma imagem" />



3.1 Cuidado com códigos com letras maiúsculas feitos por editores:



Modo errado:
<div OnMouseOut=function()>
Modo certo:
<div onmouseout=function()>



4 Todos os valores dos atributos devem estar, obrigatoriamente, entre aspas:



Modo errado:
<font color=blue>texto</b>
<img src=exemplo.gif alt="uma imagem" />
Modo certo:
<font color="blue">texto</b>
<img src="exemplo.gif" alt="uma imagem" />



5 A sintaxe deve ser escrita por completo:



Modo errado:
<input checked />
Modo certo:
<input checked="checked" />



5.1 - Uma lista com os atributos que se enquadram no item 5:



declare declare="declare" 
readonly readonly="readonly" 
disabled disabled="disabled" 
selected selected="selected" 
defer defer="defer"
compact compact="compact" 
checked checked="checked"  
ismap ismap="ismap" 
nowrap nowrap="nowrap"
nohref nohref="nohref" 
noshade noshade="noshade"  
multiple multiple="multiple" 
noresize noresize="noresize"



6 Se for usar o &(e comercial) ele deve ser codificado no código HTML.



Modo errado
Maria & João
Modo certo
Maria &amp; João



7 Imagens, o atributo "alt" é abrigatorio em todas as imagens.



Modo errado:
<img src="exemplo.gif" />
Modo certo:
<img src="exemplo.gif" alt="uma imagem" />

ou assim:

<img src="exemplo.gif" alt="" />



8 Use o "id" ao invez do "name", o elemento "name" está em desuso.



Modo errado:
<img src="exemplo.gif" name="foto" />
Modo certo:
<img src="exemplo.gif" id="foto" />



9 Separadores de blocos de código. Não use a sequência "----------" entre os "<-- -->" alguns agentes de usuários mais antigos podem ter problemas para interpretar, use uma sequecia como "========" ou "xxxxxxxx".



Modo errado:
<---------------menu----------------->
  <li>Homze</li>
   <li>Contato</li>
     <li>Sugestões</li> 
    
   <li>Twitter</li> 
 </ul> 
<---------------menu----------------->

Modo certo:
<-- ==========menu============= -->
  <li>Homze</li>
   <li>Contato</li>
     <li>Sugestões</li>     
   <li>Twitter</li> 
 </ul> 
<-- ============menu=========== -->

14 de dezembro de 2010

O que é Feed ou RSS ?

Um breve conceito

Um RSS ou Feed nada mais é do que um endereço na web por onde você pode acompanhar as últimas noticias de um site ou blog, um RSS é representado pelo simbolo:

Clicando no símbolo do feed você pode se inscrever para acompanhar as novidades do respectivo site ou blog.
Em um RSS é mostrado vários resumos das notícias juntamente com o link para a notícias inteira. Hoje, pricipalmente entre a comunidade de blogs, o feed é muito popular.(...)

No que o feed é legal?

Uma das coisas legais de um feed ou RSS é que você não precisa visitar toda hora um site para saber se há posts ou notícias novas, através do feed favoritado em seu browser, por exemplo, você pode saber das novidades sem entrar no site. Apenas os browsers atuais possuem essa função como o Firefox 3+ Chrome, Opera, Internet Explorer 7+, etc.

Com um feed também é possível acompanhar as notícias e postagens de vários sites ou blogs ao mesmo tempo em uma só página através dos sites agregadores de feed.

Para você alguns agregadores de feed:
-Google Reader
-Bloglines
-RSS Owl

29 de novembro de 2010

Relação sites e dispositivos móveis

Como seu site ou blog é visto em dispositivos móveis?



Já parou pra pensar em como seu site ou seu blog é visto em dipositivos móveis? A web já não se limita mais a apenas PCs e Notebooks, estamos em uma era onde ocorre uma explosão de dispositivos movéis no mercado, como celulares e smarthphones.

Na campus Party 2010, houve uma discussão(...) sobre dispositivos móveis e mobilidade que contou com Hilton Mendes, diretor de Terminais e Inovação da Vivo, Nick Ellis, do blog Digital Drops, Marcelo Castelo, diretor da F.biz, e Ricardo Longo, diretor da Fingertips. Veja alguns comentários ditos por eles (fonte):

Nick Ellis:
“A mobilidade é o presente da humanidade, a prova disso é que todos estão conectados aqui.”

Ricardo Longo:
“Aproveitamos a oportunidade que o iPhone trouxe, mas sabíamos desde o começo que não podíamos nos restringir à plataforma da Apple. A ideia é trabalhar sempre com novas demandas.”

Marcelo Castelo:
“A internet dá acesso ao mundo. Mas é o conteúdo que instiga as pessoas a usarem a tecnologia.”

Hilton Mendes:
“Ninguém pode negar que houve uma mudança de paradigmas depois do iPhone.”

Até 2020, 2 bilhões de dispositivos móveis estarão conectados na internet no Brasil (fonte) e, acho eu, que um dos maiores incentivadores para esse crescimento são os planos de telefonia que torna o acesso a web por celulares cada vez mais barato e rápido, já é hora de se preocupar com o desenvolvimento de sites válidos para esses dispositivos, sabe por quê? vamos aos números:

Em uma lista com as 500 maiores empresas brasileiras, apenas 12% dispõem de uma versão mobile de seus portais – excluindo as do setor financeiro. A pesquisa realizada pela em empresa de soluções móveis Mowa, apontam ainda que 95% das empresas não podem ser consideradas totalmente mobilizadas(fonte).

Em um ano foram comercializados oficialmente 175 900 iPhones no País, segundo a consultoria Gartner.(fonte: Portal Exame – 21/08/09).

Pesquisa feita empresa americana InsightExpress concluiu que a publicidade para celular causa um impacto quase cinco vezes maior do que aquela feita para a internet e vista no computador (fonte).

Essas pesquisas mostram alguns motivos pelo qual web designers devem mais atenção para o desenvimento de páginas para dispositivos móveis. E falando nisso, uma ferramenta muito interessante é o ready.mobi que analiza seu site mostra se é apto para ser exibido em dispositivos móveis ou não.

22 de novembro de 2010

CSS Tutorial - CSS Reset

Limpando a lousa antes de desenvolver seu site

css reset

Quando se usa diferentes browsers para testar determinada página da web podemos ver que as tags HTML em seu estado de dafault(sem formatações) são interpretadas de uma forma um pouquinho diferente em cada browser, isso acontece porque cada browser define o seu padrão para as tags, inserir o CSS Reset antes de começar a desenvolver sua página, é uma boa alternativa para resolver esse probleminha de inconsistência.(...)

O CSS Reset basicamente neutraliza o default inconsitente que as tags HTML tem nos browsers, ou seja, dá uma "resetada" nas margin, padding, h1, h2, form, div e etc para que tenha o mesmo padrão consitente em todos os browsers.

Pra usar é muito simples basta criar um arquivo .css apenas com o CSS Reset e importar normamente com o @import ou a tag <link>.
Existem várias tipos de CSS Reset que, afinal, tem o mesmo objetivo, mas vou mostrar as mais utilizadas pelos web designers. São tres tipos:

CSS Reset Genérica
* {
    padding: 0;
    margin: 0;
    border: 0;
}

Embora o CSS Reset acima seja bem comum, ainda assim não é um "reset" completo pois ainda temos que resetar além das margins e paddings também os links, tabelas e itens de lista, etc. Então é mais recomendável o uso dos exemplos abaixo.

Yahoo's CSS Reset
CSS Reset proposta pelo Yui / Yahoo:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
    padding: 0;
    margin: 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
fieldset,img {
    border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-weight: normal;
    font-style: normal;
}
ol,ul {
    list-style: none;
}
caption,th {
    text-align: left;
}
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    font-size: 100%;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border: 0;
}

Eric Meyer Reset CSS
Proposto por Eric Meyer:
html, body, div, span, applet, object, iframe, table, caption,
tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
    vertical-align: baseline;
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    outline: 0;
    padding: 0;
    margin: 0;
    border: 0;
}
:focus {
    outline: 0;
}
body {
    background: white;
    line-height: 1;
    color: black;
}
ol, ul {
    list-style: none;
}
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    font-weight: normal;
    text-align: left;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}

9 de novembro de 2010

10 add-ons do Firefox para web designers

Uma seleção de add-ons que são uma mão na roda



A possibilidade de inserir add-ons é uma das características que diferencia o Firefox de vários browsers e por isso também o torna preferido por muitos web designers. Entre vários addons para desenvolvimento web, o CSS Orbit fez uma seleção de 10 add-ons que vão fazer você não perder muito tempo naquelas funções do dia-a-dia na hora de desenvolver(...) páginas da web, veja alista abaixo:

Firebug

Um ótimo add-on, com ele você pode modificar e monitorar CSS, HTML e Javascript "ao vivo" em qualquer site.





Web Developer

Esse add-on disponibiliza pra você um menu e uma toolbar com uma série de ferramentas para desenvolvedores web.





IE Tab 2

Versão melhorada do clássico IE Tab, permite você visualizar suas páginas da web no IE em uma nova aba com o Firefox.






EditCSS

Um editor de CSS na sua sidebar.






ColorZilla

Com addon você pode capturar o código de qualquer cor exibida em qualquer ponto de seu browser, você também pode ampliar a página e medir a distância entre dois pontos da página, também permite a escolha de cores de um conjunto de cores pré-definidas e salvar as mais utilizadas em paletas personalizadas.





Rainbow Color Tools

Ferramentas de cores para desenvolvimento web.

Extrai o esquema de cores a partir de imagens do site atual e CSS;
Selecionador de cores HSV;
Recupera a cor de qualquer pixel no navegador;
Filtra através de cores salvas por tag ou o url da página que a cor foi encontrada.





View Source Chart

Esse add-on usa um sistema de cores no código fonte da página, adicionando limites visuais fica mais fácil aprender HTML e visualizar a estrutura do código.





HTML validator

Adiciona um validador de HTML no Firefox o número de erros da pagina HTML pode ser vista na barra de status do navegador.






CSS Reloader

Com esse complemento você atualiza apenas o CSS de uma página da web sem precisar atualizar página inteira.





CSS Validator

Valida sua página usando o W3C CSS Validator. Adiciona uma opção que é visível no menu do botão direito do mouse e no menu "ferramentas". Abre os resultados em uma nova aba.

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.

17 de setembro de 2010

Google diz que Chrome 7 é 60 vezes mais rapido que a versão atual !


A Google produziu na terça-feira uma serie de patches que afetam uma série de vulnerabilidades na versão atual do Chrome e também
avanços na aceleração da nova GPU da versão 7 estão atingindo cerca de 60x mais que na versão 6.
Os engenheiros de software do Google James Robinson e Gregg Tavares escreveram no Blog do Chromium:
"Esse sistema capta os melhores gráficos da API para utilização em cada sistema operacional que suporta Cromium: Windows XP/Vista/7, Mac OS e Linux".

"Esses números iniciais mostram uma melhoria de até 60x na velocidade em relação à versão atual do Google Chrome", acrescentaram eles.
O Chrome tem sido tradicionalmente considerado o navegador para bater, quando se trata de velocidade. Vale também lembrar que a última versão beta do Firefox 4 da Mozilla também usa aceleração de hardware para velocidades mais rápidas.


Gráficos 3D

Além de rápidos avanços no desempenho dos gráficos 2D do Chrome, o Google também está trabalhando em recursos gráficos 3D.

"Estamos animado para dar aos desenvolvedores gráficos 2D rápidos, mas pensamos que hardware de aceleração de gráficos na Web significa dar aos desenvolvedores acesso a uma a gráficos 3D programáveis com WebGL", explicaram Robinson e Tavares.

"Com WebGL e 3D CSS, os desenvolvedores podem criar jogos modernos, galerias de fotos impressionantes, visualizações 3D de dados, ambientes virtuais, eo que mais eles podem sonhar."

Um vídeo no YouTube demonstra os recursos 3D em ação no Chrome. A versão do desenvolvedor do Chrome 7 já está disponível, com uma versão estável é esperada ainda neste outono.

Postagem baseada e traduzida de pcworld.com em inglês .

12 de setembro de 2010

Vazou na web a possível interface do IE9!

Site russo deixou escapar essa


Você leu o titulo do post né? "possível" imagem do Internet Explorer, nada confirmado oficialmente essa é apenas uma suposta imagem do tão esperado (ou será que nem tanto assim?) IE9 que vazou de um site russo da Microsoft. Veja abaixo:(...)


A página onde foi divulgada imagem foi apagada mas a senhora Mary Foley foi rapida e publicou em seu blog, depois disso foi só um empurraozinho pra espalhar a imagem por aí.

Pela imagem podemos ver um design bem simplificado, sem a clássica barra de ferramentas no topo (arquivo, ferramentas, etc), sistema de abas que já é velho conhecido nos browsers, repare que o botão de voltar é maior que o de avançar é bem parecido com o do Firefox, e o design do browser em si com essa simpicidade se assemelha ao Chrome.

Podemos detacar nesse browser o suporte para o CSS3 que segundo o site CSS3.info tirou 574 pontos do total de 578 no teste de seletores de CSS3 desse site (impressionante!), enquanto que seu antecessor, o IE8, tirou apenas 330.

É esperado que no dia 15 de setembro a interface do IE9 seja exibida em um evento da Microsoft em São Francisco, vamos esperar pra ver o que a Microsoft tá aprontando.

20 de junho de 2010

CSS3 power !

Veja do que o CSS3 é capaz

Flash ? Você não precisa mais disso para desenvolver animações em uma página da web, nem ficar batendo cabeça para desenvover boxes com cantos arredondados editando imagens ou criar um efeito de sombreamento sombreamento em páginas da web o CSS3 ta aí pra facilitar e surpreender. Veja do que o CSS3 é capaz nesses exemplos(...), o primeiro é o AT-AT Walker (aquele robô do Star Wars: O império contra ataca) em movimento.


Em primeira vista você pode achar que há algum javascript ou uma pitada de flash, mas não, é puro CSS3 e HTML que faz o movimento, você pode ver a demonstração ou como foi feito através do tutorial do site Optimum7.com


e o outro é o logo do Opera feito também com as novas propriedades do CSS3, você pode ver a demonstração e como foi feito.


fonte da imagem: www.flickr.com/photos/nemoorange/4421737904/

E é claro você só vai poder ver essas demostrações corretamente se estiver usando o Chrome, Safari 4.0 ou Firefox 3.6 ou superior, dá pra ter uma idéia de como, por exemplo, o logo do Opera vai ficar se for visto com o IE na imagem acima.

15 de junho de 2010

Google redesign

Uma breve analize do novo design do buscador.

Tempos atrás um dos sites mais conhecidos da web, senão o mais conhecido, o Google, sofreu algumas modificações no seu design, não muito radicais. O novo design ficou bem mais leve visualmente.

google redesign


Logo mais "light"

De cara podemos notar que o logo já não é mais o mesmo sofreu leves modificações no sombreamento e esquema de cores, os botões de busca também foram levemente modificados.(...)

google redesign


O "sequestro" dos underlines

Veja que os underlines dos links da home sumiram e só aparecem com efeito hover.


Nova sidebar e novo rodape

Uma das modificações mais notáveis foi a sidebar do lado esquerdo dos resultados de busca que agora pode ser dividido em categorias (news, images, maps, etc), o pessoal do Google resolveu dar uma "carinha" melhor as categorias na sidebar aderindo a moda dos icones, agora cada categoria tem seu respectivo ícone, e o rodape também ficou mais "light", foram modificações não muito drásticas mas que deixaram o design bem mais moderno que o anterior.

google redesign

google redesign

Se você ainda não está visualizando o novo design do google, tente acessando o Google em inglês aqui.

26 de março de 2010

Inspiration Showcase - Sites #8

Design minimalista

Simplicidade é tudo, pelo menos quando se trata de web design essa característica pode fazer muita diferença dependendo do objetivo que determinado site tem. E falando em simplicidade veja mais uma inspiradora seleção, aqora de sites simples, clean, leves como uma pena, ou melhor dizendo minimalistas. Enjoy !


site minimalista
nick-harrison.co.uk/



site minimalista
undesign.it



site minimalista
rodrigogalindez.com




site minimalista
thirtyconversationsondesign.com



site minimalista
corporateriskwatch.com




site minimalista
feltron.com



site minimalista
am-tokyo.jp



site minimalista
beingwicked.com



site minimalista
jessicahische.com



site minimalista
designisblank.com



site minimalista
establishedandsons.com

13 de março de 2010

Usar ou não usar o 'clique aqui' nos seus links, eis a questão !

Veja como a escrita de seus links influencia na quantidade de cliques



Muitos aspectos podem influenciar na quantidade de cliques dos seus links, a divulgação, o visual do seu site ou blog, a paciencia do visitante ;) e pode acreditar, a maneira que você escreve seus links pode aumentar ou diminuir drasticamente a taxa de cliques.(...)

Como assim?

Como exemplo, vamos usar a pesquisa do site dustincurtis.com onde ele exibe várias frases com um link, todas com o intuito de segui-lo no Twitter, cada uma das frases foi selecionada aleatoriamente, sendo que foram vistas por 5000 visitantes únicos, veja as frases usadas e os resultados:

"I'm on Twitter." ("Estou no twitter")
Usando essa frase e a palavra "Twitter" como link gerou uma taxa de cliques de 4,70%.

"Follow-me on twitter" ("Siga-me no twitter")
Usando essa frase e a palavra "twitter" como link gerou uma taxa de cliques de 7,31%

"You should follow me on twitter" ("Você deve me seguir no twitter")
Usando essa frase e a palavra "twitter" como link gerou uma taxa de cliques de 10,09%

"You should follow me on twitter here" ("Você deve me seguir no twitter aqui")
Veja que interessante, usando essa frase e adicionando a palavra "here" e usando ela como link gerou uma taxa de cliques de 12,81%.

Viu só ! Bastou adicionar a palavra "here" ("aqui") na frase e a taxa de clique aumentou bastante.

Vendo esse outro teste só que agora feito pelo copyblogger.com, é exibido tres tipos de links, todos com o mesmo objetivo.

"Click to continue" ("Clique para continuar")
Gerou uma taxa de clique de 8,53%.

"Continue to article" ("Continue o artigo")
Gerou uma taxa de cliques de 3,3%.

"Read more" ("Leia mais")
Gerou uma taxa de clique de 1,8%.

Não só você tem que chamar a atenção de alguém para clicar no seu link, como você também deve esclarecer o que acontecerá se o visitante clicar nesse link de forma objetiva e clara, o que acontece em alguns sites é que o visitante clica no link achando que aconteceria aquilo que está descrito mas na verdade é redirecionado para outra página onde ele tera que clicar em outro link e depois em outro para chagar ao objetivo, isso é chato pra qualquer um. Chame a atenção e ofereça um link direto para aquilo que está descrito e pense bem no uso de uma boa mensagem não muito apelativa. ;)
Aproveitando a oportunidade, fique a vontade para me seguir no Twitter aqui. ;D

2 de março de 2010

CSS Tutorial - Criando um botão flutuante back-to-top (topo da página)

back to top

Olá ^_^, vamos criar um botão flutuante onde o usuário clica nele pra voltar ao topo do blog, mesmo que a página role o botão continua fixo no canto da página, essa mesma dica serve pra você criar um botão de Feedback, Twitter ou o que você imaginar. É bem simples !
Primeiramente o CSS, crie isso:
.botaotopo {
display:scroll;
position:fixed;
bottom:2px;
right:2px;
}
Entre todas essas propriedades, quero destacar aqui o position:fixed ele é responsável por fixar o botão no canto da página.



Agora criamos um link com a imagem, recomendo inserir esse código logo depois da tag <body>:
<a class="botaotopo" href="#" title="Para o topo !">
<img src="http://ENDEREÇO-DA-IMAGEM-AQUI.gif" border="0" />
</a>
Não esqueça de adicionar a class="botaotopo" no link (como acima), e veja que no lugar do endereço do link foi adicionado apenas um "#" pois esse link não servirá para redirecionar para outra página, apenas para o topo da mesma por isso colocamos apenas esse caractere. Substitua o http://ENDEREÇO-DA-IMAGEM-AQUI.gif pelo endereço da imagem de sua preferência.

Atualização(12/03/10)
Recebi alguns comentários de pessoas que estavam com dificuldades para iserir esse botão em seu blog por não ter muita intimidade com o CSS e/ou HTML, utilize esse outro método, é só inserir apenas esse código que já está com o CSS imbutido no link, isira logo abaixo da tag <body>:
<a style="display:scroll;position:fixed;bottom:2px;right:2px;" href="#" title="Para o topo !">
<img src="http://suaimagemdobotaoaqui.gif" border="0" />
</a>

13 de fevereiro de 2010

Achando a combinação de cores certa para seu site !

Achar a combinação certa pra cada tipo de site é uma tarefa difícil e deve ser bem analizada, imagina, você entra em um site chamado... é... deixa eu ver... mundoempresarial.com (nem sei se existe), você acha que é um site sério e aí você se depara com mais de dez cores diferentes no site, verde, amarelo, azul, rosa, não tem nada a ver com o nome, mas casos assim existem, e para ajudar você a encontar aquela combinação certa... ...eu indico os sites:

colorschemedesigner.com e o colourlovers.com

coresdosite
No colorschemedesigner.com você irá se deparar um um círculo de cores onde você clica na cor de sua preferência para fazer a combinação que pode ser usada no seu site.

coresdosite
E uma coisa interessante, acima existem 6 opções para o tipo de combinação de cores, entre elas estão: mono, complement, triad, tetrad, analogic, accented analogic.

Na opção "mono" você encontra uma combinação em degradê da cor que você escolher no círculo.

Na opção "complement" é adicionado a sua combinação uma cor um pouco mais diferente das outra, mas que combina.

Em "triad" são três cores diferentes que se combinam exibidas pra você.

Em "tetrad" é o mesmo que o "triad" só que são quatro cores diferentes.

E mais duas opções de combinações que são a "analogic" e a "accented analogic".

A sua combinação de cores é exibida no lado direito, pra saber o código exadecimal delas é só passar o mouse sobre as cores na combinação. Ainda existe a opção de exportar a combinação que você no fez pro seu computador no formato XHTML, basta ir em "Export..." no canto superior direito do site e depois clicar em XHTML+CSS, na pagina que aparecer basta dar um "salvar destino como...", pronto! Agora você pode ver a combinação de cores posteriormente sem precisar estar conectado na internet.


coresdosite
Outro site interessante é o colourlovers.com onde você encontra uma gama de paletas de cores enviadas por usuários do site para sua inspiração.

E agora quer saber se as cores e os textos do seu site ou blog estão suficientemente contrastantes? Veja essa postagem: Cores do seu site de acordo com a acessibilidade.

12 de fevereiro de 2010

Inspiration Showcase - Sites #7

Sites com um design clean

Simplicidade, é possivel desenvolver um site sem muito enfeite e deixá-lo com uma cara agradável para o visitante ? A resposta é, sim, e é até recomendado, a prova de que sites simples ficam belos e agradáveis aos olhos está aí em baixo, veja essa seleção de sites com um design "clean" que são de encher os olhos.

clean site
offsetmedia.co.uk


clean site
flossy.be


clean site
only2designers.com


clean site
danjoedesign.com


clean site
vivianne.nu


clean site
lookdesigns.net


clean site
brilliancy.eu


clean site
rdbrown.me.uk/


clean site
o2sources.com


clean site
studioluma.it