Comment faire un site internet unique pour vos mises à jour Twitter
Mai 16, 2008 par · chriscoyier 6 Commentaires 
Twitter propose une API que vous pouvez utiliser pour tirer des informations de Twitter pour votre propre utilisation. Encore plus facile, ils offrent un widget peu de JavaScript qui utilise automatiquement cette API simples retours HTML de vos tweets récente.
Let's concevoir un site web unique pour nos mises à jour Twitter en utilisant ce widget.
1. Design in Photoshop
Créez un nouveau document et remplir le fond avec une couleur gris foncé. J'ai utilisé # 222222 ici.
Sélectionnez une couleur plus claire avant-plan gris (# 545454). Créez un nouveau calque au dessus de votre calque de fond. Sélectionnez l'outil dégradé (sous-outil de l'outil Pot de peinture). Dans la barre du haut il y aura quelques réglages spécifiquement pour l'outil de dégradé. Assurez-vous qu'ils sont réglés sur «originaux à d'transparent" et "Radial".
Sur votre nouveau calque, faites glisser sur une pente. Faire cela sur un nouveau calque sont préférables, car alors vous pouvez la déplacer autour et le faire exactement comme vous le souhaitez.
Maintenant, Google autour et essayer de trouver un Twitter Nice-comme Blue Bird. Ci-dessous est celui que j'ai acheté à iStockphoto. Vous pouvez l'acheter ou parcourez le site, pour quelque chose qui correspond à la personnalité de votre site.
Maintenant, ajoutez l'oiseau, du texte, et une boîte pour contenir vos tweets. La police j'ai utilisé il y avait l'ordre du jour Noire. La boîte est à remplir de bleu (# 0081e2) à 18% d'opacité et un coup 2px blanches posées à la "Overlay" mode de fusion.
Maintenant exporter le tout (Fichier> Enregistrer pour le Web & Devices) et l'appeler "page-bg.jpg". Maintenant, nous sommes prêts à construire le site!
2. Création de la page Web de base
Créer une structure de base de fichiers HTML:
<!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> Et le fichier CSS de base. Nous allons utiliser l'image que nous avons créé une image de fond pour le corps, collé à la partie supérieure gauche.
/* 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. Va chercher le code de votre page Twitter
D'abord allez vous connecter à Twitter et accédez à votre page d'accueil. Cliquez sur l'icône «Get mises à jour sur votre bouton de site".
Choisissez "Autres".
Nous voulons que le code HTML / JavaScript.
Choisissez vos options (comme le nombre de mises à jour que vous voulez), puis copiez le code qu'ils vous donnent.
Rassembler notre page
Maintenant que vous avez le code, vous pouvez entrer et de le coller dans la section body de votre fichier index.html. Il ressemblera à quelque chose comme ceci:
<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> Si vous chargez la page maintenant, cela va fonctionner, mais toutes les mises à jour seront complètement Unstyled comme ceci:
Let's Fix qu'en ajoutant à notre 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; } Et là, nous l'avons! A pretty cool et uniques en quête mises à jour de la page Twitter.
Tout un bon tutoriel, j'ai toujours voulu mettre à jour ma page twitter mais n'ont jamais eu le temps de l'apprendre par le biais, ce sera certainement m'aider à le faire maintenant.
Very nice, Chris. Quelque chose que je ne suis pas du tout intéressé à le faire (j'utilise Twitter occasionnellement), mais il était bon de voir le processus de tutoriel.
This is awesome! Cependant, quelles devraient être les dimensions du document original Photoshop?
J'ai essayé, mais ça ne marche pas.
Je ne sais pas où mettre le code qui Css livraisons.
Je pourrais préciser plus en détail s'il vous plaît.
Merci.
Merci pour ce tutoriel!
C'est gentil!