Como fazer um site exclusivo para a atualização de Twitter
16 de maio de 2008 por chriscoyier ° 6 Comentários
Twitter oferece uma API que você pode usar para extrair informações do twitter para seus próprios fins. Ainda mais fácil, eles oferecem um widget javascript que automaticamente usa essa API e retorna HTML simples de seus tweets recentes.
Vamos criar um site exclusivo para os nossos atualizações do Twitter utilizando este widget.
1. Design em Photoshop
Crie um novo documento e preencha o fundo com uma cor cinza escuro. Eu usei # 222222 aqui.
Selecione uma cor mais clara primeiro plano cinza (# 545454). Crie uma nova camada em cima de sua camada de fundo. Selecione a ferramenta gradiente (sub-ferramenta da ferramenta balde de tinta). Na barra superior, haverá algumas configurações especificamente para a ferramenta de gradiente. Certifique-se que são definidas como "Foreground to Transparent" e "Radial".
Em sua nova camada, arraste um gradiente. Fazer isso em uma nova camada é melhor, porque então você pode arrastá-la e obtê-lo apenas como você gosta.
Agora, o Google ao redor e tentar encontrar um pássaro do Twitter, como bom Azul. Abaixo está uma que eu comprei de iStockPhoto. Você pode comprá-lo ou navegar em torno de algo que corresponde à personalidade do seu site.
Agora adicione o pássaro, algum texto, e uma caixa para guardar os seus tweets. A fonte que usei havia Agenda Preto. A caixa é apenas um preenchimento de azul (# 0081e2) a opacidade 18% e um conjunto derrame 2px branco para o modo de mistura "Overlay".
Agora exportar a coisa toda (File> Save for Web & Devices) e chamá-lo "página bg.jpg". Agora estamos prontos para construir o site!
2. Criando a Página Básica
Criar uma estrutura de arquivo HTML básico:
<!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> <title>Twitter Page</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> </body> </html> E o arquivo CSS básico. Vamos usar a imagem que criamos como uma imagem de fundo para o corpo, preso ao canto superior esquerdo.
/* Twitter Page Chris Coyier http://css-tricks.com */ * { margin: 0; padding: 0; } body { font-size: 62.5%; font-family: Georgia, serif; background: url(images/page-bg.jpg) top left no-repeat #2f2e2c;} 3. Vá pegar o código da sua página no Twitter
Primeiro, vá fazer login para Twitter e ir à página inicial. Clique nos "receber atualizações sobre o botão site".
Escolha "Outro".
Queremos o código HTML / Javascript.
Escolha as suas opções (como quantas atualizações você quiser), e então copie o código que eles lhe dão.
Juntando nossa página
Agora que você tem o código, você pode ir para dentro e cole isso na seção do corpo do seu arquivo index.html. Será algo parecido com isto:
<body> <div id="twitter_div"><ul id="twitter_update_list"></ul></div> <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script> <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/chriscoyier.json?callback=twitterCallback2&count=10"></script> </body> Se você carregar a página agora, vai funcionar, mas todas as atualizações serão totalmente sem estilo parecido com isto:
Vamos corrigir isso adicionando ao nosso CSS:
#twitter_div { position: absolute; left: 186px; top: 99px; width: 376px; height: 360px; overflow: auto; } ul#twitter_update_list { list-style: none; font-size: 14px; } ul#twitter_update_list li { margin-bottom: 10px; padding: 10px; color: #7a8a99; background: url(images/transpBlue.png); } a { color: #96997a; } E aí temos isso! Um muito legal e único olhar Twitter página de atualizações.
Muito bom tutorial que eu sempre quis para atualizar minha página do Twitter, mas nunca tenho tempo para aprendê-la completamente, isso vai certamente ajudar-me a fazer isso agora.
Very nice, Chris. Não é algo que eu sou tudo que interessados em fazer (eu uso o Twitter ocasionalmente), mas foi ótimo ver o processo tutorial.
Isto é incrível! No entanto, quais devem ser as dimensões do documento photoshop original?
Eu tentei, mas ele não funciona.
Eu não sei onde colocar o código de entregas que o CSS.
Eu poderia indicar mais detalhes por favor.
Obrigado.
Obrigado por este tutorial!
Isso é bom!