Come Fare un sito web unico per il vostro Aggiornamenti Twitter
16 mag 2008 da chriscoyier · 6 commenti
Twitter offre una API che consente di estrarre informazioni da Twitter per il vostro propri usi. Ancora più facile, offrono un widget piccolo javascript che utilizza automaticamente questa API e ritorna semplice HTML del vostro tweet più recenti.
Facciamo la progettazione di un sito unico per i nostri aggiornamenti su Twitter utilizzando questo widget.
1. Design in Photoshop
Creare un nuovo documento e riempite lo sfondo con un colore grigio scuro. Ho usato # 222222 qui.
Selezionare un colore più chiaro in primo piano grigio (# 545454). Create un nuovo livello sopra il livello di sfondo. Selezionare lo strumento gradiente (sub-strumento dello strumento secchiello). Nella barra in alto ci saranno alcune impostazioni appositamente per lo strumento gradiente. Assicurarsi che siano impostati su "Primo piano a trasparente" e "radiale".
Sul nuovo livello, trascinarlo fuori un gradiente. Fare questo su un nuovo livello è meglio perché poi è possibile trascinarlo attorno e farlo come ti piace.
Ora Google intorno e cercare di trovare un bel Twitter-like Blue Bird. Di seguito è riportato quello che ho acquistato da iStockphoto. Si può acquistare o curiosare per qualcosa che con la personalità del tuo sito.
Ora aggiungete l'uccello, un testo, e una scatola per contenere il vostro tweet. Il font che ho usato non c'era Agenda Nera. La scatola è solo un riempimento di colore blu (# 0081e2) a 18% di opacità e una serie 2px traccia bianca alla modalità "Overlay" miscela.
Ora esportare il tutto (File> Salva per Web e dispositivi) e lo chiamano "page-bg.jpg". Ora siamo pronti per costruire il sito web!
2. Creazione della pagina web di base
Creare una struttura di base del file 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> E il file di base CSS. Useremo l'immagine che abbiamo creato come immagine di sfondo per il corpo, bloccato in alto a sinistra.
/* 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. Vai a prendere il codice dalla pagina Twitter
Prima andare il login a Twitter e andare alla tua home page. Clicca su "Ricevi aggiornamenti sul pulsante sito".
Scegliere "Altro".
Vogliamo che il codice HTML / JavaScript.
Scegliere le opzioni (come il numero di aggiornamenti che si desidera), e poi copiare il codice che vi danno.
Mettendo insieme la nostra pagina
Ora che avete il codice, è possibile entrare e pasta che nella sezione corpo del file index.html. Sarà simile a questa:
<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 si carica la pagina ora, funzionerà, ma tutti gli aggiornamenti saranno completamente senza stile come questo:
Facciamo rimediare aggiungendo al nostro 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 c'è l'abbiamo! A pretty cool e unica ricerca Twitter aggiornamenti della pagina.
Piuttosto un buon tutorial che ho sempre voluto aggiornare la mia pagina twitter, ma non ha mai avuto il tempo di imparare attraverso, questo sarà sicuramente aiutarmi a farlo ora.
Molto bello, Chris. Non è qualcosa che ho tutto quello che interessato a fare (io uso Twitter a volte), ma è stato bello vedere il processo tutorial.
Questo è impressionante! Tuttavia, ciò che dovrebbe essere la dimensione del documento originale photoshop?
Ho provato ma non funziona.
Non so dove mettere il codice che consegne Css.
Mi può indicare più in dettaglio per favore.
Grazie.
Grazie per questo tutorial!
Questo è il bello!