January 23rd

Encurtando uma URL usando a API do bit.ly

Dando uma estudada para uma necessidade de um projeto, desenvolvi uma função simples em PHP para utilizar o serviço de encurtador de url bit.ly.

O script é simples, e pode ser adaptado para o Migre.me por exemplo (em breve exemplo prático).
Segue o código aos interessados
obs: agradecimento ao @flefundes pela ajuda com o curl. :)

Posted via email from tcelestino .blog | Comment »

20120123 @ 1442

Encurtando uma URL usando a API do bit.ly

Dando uma estudada para uma necessidade de um projeto, desenvolvi uma função simples em PHP para utilizar o serviço de encurtador de url bit.ly.
O script é simples, e pode ser adaptado para o Migre.me por exemplo (em breve exemplo prático).

Segue o código aos interessados
obs: agradecimento ao @flefundes pela ajuda com o curl. :)

Posted via email from tcelestino .blog | Comment »

20120123 @ 1436
January 5th

Efeito over Globo.com

Já tem um tempo que o Adalberto Pita (@adalbertopita) procura uma solução para fazer efeito over utilizado na Globo.com. Passe o mouse em cima de qualquer imagem e veja que o efeito é colocado por cima da imagem e não do lado como seria o padrão.
Para ter o mesmo efeito é simples:

HTML
<ul>
    <li><img src=”
“ alt=”“ />
        <span class=”detalhe”>seu texto aqui</span>
    </li>
</ul> 

CSS
ul {margin:0; padding:0;}
ul li {list-style:none; position:relative; width:100px; height:100px;}
ul li span {position:absolute; display:block; top:0; left:0; opacity:0; width:90px; height:90px; transition:all 500ms ease-in; -webkit-transition:all 500ms ease-in; -moz-transition:all 500ms ease-in; -o-transition:all 500ms ease-in;border:5px solid #900}
ul li:hover span {cursor:pointer; opacity:0.9} 

Para incrementar um pouco o efeito, adicionei o “transition” para criar um efeito “fade-in” e “fade-out”.

Solução rodando no Chrome, Firefox e Opera. 

Posted via email from tcelestino .blog | Comment »

20120105 @ 0714
December 1st

Efeito de fade em links usando transition

Com a nova propriedade transition do CSS3 podemos fazer várias efeitos bacanas sem a necessidade de recorrer aos diversos framework’s javascript (jQuery, Mootools etc…). Para entender melhor sobre a propriedade recomendo ler CSS3 Transitions ( W3C School, claro!! ) e o artigo bem legal da galera do Nettuts+
Para mostrar o funcionamento do transition, fiz um exemplo bem simples usando o evento hover como o gatilho para o meu efeito fade.

html
<ul>
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
    <li>Menu 4</li>
</ul>

css
ul, li {
    margin:0;
    padding:10px 5px;
}
li {
    margin-bottom:5px;
    padding-bottom:3px;
}
li a {
    color:#000;
    text-decoration:none; 
    transition: color 1s ease-in; /*padrão*/
    -webkit-transition:color 1s ease-in; /*chrome & safari*/
    -moz-transition: color 1s ease-in; /*firefox*/
    -o-transition: color 1s ease-in; /*opera*/
}
li a:hover {
    color:#C00
}

O resultado pode ser conferido aqui: http://jsfiddle.net/tcelestino/3zcKb/7/
Agora use sua criatividade e abuse em suas folhas de estilo.

Posted via email from tcelestino .blog | Comment »

20111201 @ 0855
November 22nd

Teste o novo YouTube

Para os apressados em conhecer o novo visual do YouTube, segue a dica:
Primeiro acesse o atalho no Chrome Ctrl+Shift+J (Windows) / Cmd + Alt + J (no MacOS) e no Firefox Firefox Ctrl/Cmd + Shift + K.

Apos acessar, digite o código: document.cookie=”VISITOR_INFO1_LIVE=ST1Ti53r4fU”
Recarregue a página e veja o novo YouTube

Media_httpimgskitchco_aabsg

Posted via email from tcelestino .blog | Comment »

20111122 @ 0820
November 11th

Desabilitando o Dashboard no Lion

Para quem não usa o Dashboard no Mac OS X, segue uma dica muito simples de como desabilitar o recurso.
- Abra o Terminal

Digite o seguinte comando:
defaults write com.apple.dashboard mcx-disabled -boolean YES

Feito isso, digite:
killall Dock

Pronto!! O Dashboard é desativado.
Caso queira retornar, faça o mesmo processo, porém, no lugar do “YES” você troca por “NO”.

Testei no Lion, mas deve funcionar nas versões anteriores do SO.

Posted via email from tcelestino .blog | Comment »

20111111 @ 0750
November 1st

A história do Web Standards

Media_httpvitamintale_npldb

Infográfico desenvolvid pela Vitamintalent, contando um pouco da história do Web Standards.

Posted via email from tcelestino .blog | Comment »

20111101 @ 1500

Novo Google Reader

Media_httpimgskitchco_xtzfg

Já tinha lido semana passada que a Google já estava trabalhando no visual do Google Reader. Parece que os rumores foram oficializados hoje.

Com visual mais “clean”, o GReader segue a tendências de visual já apresentada em outros serviços da empresa (Google Docs, Gmail, Calendar etc…), só estava faltando o leitor de feeds.

Media_httpimgskitchco_chcxa

Listagens dos feeds

Media_httpimgskitchco_wkhwk

Leitura dos posts

Posted via email from tcelestino .blog | Comment »

20111101 @ 1213
October 26th
20111026 @ 1307
September 27th

O novo delicious

Agora muito mais social. O recurso “stack” é o mais interessante.

Posted via email from tcelestino .blog | Comment »

20110927 @ 1332