Come fare un sito web unico per il vostro Aggiornamenti Twitter
16 maggio 2008 da · chriscoyier 6 Commenti 
Buzz questo post 
Digg this Post 
Reddit 
Stumble This Post
Twitter offre una API che è possibile utilizzare per estrarre informazioni da Twitter per il vostro uso personale. Ancora più facile, offrono un widget piccolo javascript che utilizza automaticamente questa API e restituisce semplice HTML del vostro tweets recenti.
Let's la progettazione di un sito unico per i nostri aggiornamenti di Twitter utilizzando questo widget.
1. Design in Photoshop
Creare un nuovo documento e riempire lo sfondo con un colore grigio scuro. Ho usato # 222222 qui.
Selezionare un colore più chiaro in primo piano gray (# 545454). Create un nuovo livello in cima al tuo livello di sfondo. Selezionare lo strumento sfumatura (sub-strumento dello strumento secchio di vernice). Nella barra in alto ci saranno alcune impostazioni specificamente per lo strumento sfumatura. Assicurarsi che siano impostati su "Primo piano a trasparente" e "Radial".
Sul tuo nuovo livello, trascinare fuori una sfumatura. Fare questo su un nuovo livello è migliore, perché allora è possibile trascinarlo in giro e farlo proprio come ti piace.
Ora Google intorno e cercare di trovare una bella Twitter-like Blue Bird. Di seguito è riportato quello che ho acquistato da iStockPhoto. Potete comprarlo o navigare in giro per qualcosa che corrisponda la personalità del tuo sito.
Ora aggiungere l'uccello, un testo, e una scatola per contenere il tuo tweets. Il tipo di carattere che ho usato non c'era Agenda Nera. La casella è solo un riempimento di blu (# 0081e2) al 18% di opacità e di un colpo 2px bianco impostato su "Overlay" modalità di fusione.
Ora esportare il tutto (File> Salva per Web e dispositivi) e lo chiamano "pagina-bg.jpg". Ora siamo pronti per costruire il sito!
2. La creazione di pagine web di base
Creare una struttura HTML di base del file:
<!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 CSS di base. Useremo l'immagine che abbiamo creato come sfondo per il corpo, bloccati 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. Andare a prendere il codice dalla tua pagina Twitter
In primo luogo vanno accedere a Twitter e vai alla tua home page. Fare clic su "Ricevi sul tuo sito tasto".
Scegliere "Altro".
Vogliamo che il codice HTML / Javascript.
Scegliete la vostra opzioni (come il numero di aggiornamenti che si desidera), e poi copiare il codice che vi danno.
Mettendo insieme la nostra pagina
Ora che hai il codice, è possibile entrare e incolla che nella sezione body 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, sarà il lavoro, ma tutti gli aggiornamenti saranno completamente unstyled come questo:
Let's fix che con l'aggiunta 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 ci abbiamo it! A pretty cool e unico cercando aggiornamenti Twitter pagina.
Piuttosto un buon tutorial che ho sempre voluto aggiornare la mia pagina Twitter, ma mai avuto il tempo di imparare attraverso, questo sarà sicuramente aiutarmi a fare adesso.
Very nice, Chris. Qualcosa che non ho tutto quello che interessati a fare (io uso Twitter di tanto in tanto), ma è stato bello vedere il processo di tutorial.
This is awesome! Tuttavia, ciò che dovrebbero essere le dimensioni del documento originale di Photoshop?
Ho provato ma non funziona.
Non so dove mettere il codice che Css consegne.
Mi può indicare più in dettaglio per favore.
Grazie.
Grazie per questo tutorial!
Che è bello!