איך להכין אתר אינטרנט ייחודי עבור צויץ עדכונים שלך
16 מאי 2008 על ידי · chriscoyier 6 תגובות 
לצפצף מציע ה-API שבו ניתן להשתמש כדי למשוך מידע מ לצפצף לשימושים שלך. אפילו קל יותר, הם מציעים יישומון JavaScript קטנה אשר ישתמש באופן אוטומטי API זה ומחזירה HTML פשוט של tweets האחרונות שלך.
בואו לעצב אתר ייחודי עבור עדכוני TWITTER שלנו ניצול זה יישומון.
1. עיצוב ב-Photoshop
ליצור מסמך חדש ולמלא את הרקע בצבע אפור כהה. נהגתי # 222222 כאן.
לבחור צבע אפור בהיר הקידמה (# 545454). יצירת שכבה חדשה על גבי שכבת הרקע שלך. בחר בכלי הגרדיאנט (משנה הכלי של הכלי דלי צבע). בסרגל העליון יהיו כמה הגדרות במיוחד עבור הכלי שיפוע. לוודא שהם מוגדרים "קדמה אל שקוף" ו "רדיאלי".
על השכבה החדשה שלך, לגרור החוצה הדרגתי. עושה את זה על שכבה חדשה היא הטובה ביותר כי אז אתה יכול לגרור אותו סביב ולקבל את זה בדיוק איך שאתה רוצה.
כעת גוגל מסביב ולנסות למצוא צפצוף נחמד כמו-Blue Bird. להלן אחד אני שנרכש iStockPhoto. ניתן לרכוש אותו או לעיין סביב משהו התואם את האישיות של האתר שלך.
עכשיו להוסיף את העוף, טקסט כלשהו, וקופסת להחזיק tweets שלך. את הגופן אני הייתי שם היה סדר יום שחור. התיבה אינה רק מילוי של כחול (# 0081e2) על אטימות 18% ו שבץ 2px לבן להגדיר את "כיסוי מצב" תערובת.
עכשיו לייצא את כל העניין (File> Save for Web & Devices) וקוראים לזה "דף-bg.jpg". עכשיו אנחנו מוכנים לבנות את האתר!
2. יצירת דף אינטרנט בסיסי
צור מבנה קובץ 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> ואת קובץ CSS בסיסי. אנו נשתמש יצרנו את התמונה כתמונת רקע עבור הגוף, דבק הימנית העליונה.
/* 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. לכי תביאי את הקוד מדף לצפצף שלך
הראשון הולך להיכנס לצפצף וללכת הבית שלך. לחץ על "קבל עדכונים על כפתור באתר שלך".
בחר "אחר".
אנחנו רוצים את ה-HTML / קוד Javascript.
בחר אפשרויות (כמו כמה עדכונים אתה רוצה) שלך, ולאחר מכן להעתיק את הקוד שהם נותנים לך.
לשים יחד בדף שלנו
עכשיו שיש לך את הקוד, אתה יכול ללכת ולהדביק את זה לתוך החלק של הגוף קובץ index.html שלך. זה ייראה משהו כזה:
<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> אם לטעון את הדף עכשיו, זה יעבוד, אבל את כל העדכונים יהיה unstyled לחלוטין כמו זה:
בואו לתקן זאת על ידי הוספת ל-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; } ויש לנו את זה! די מגניב וייחודי מבט עדכונים לצפצף הדף.
די טובה בהדרכה תמיד רציתי לעדכן את הדף Twitter שלי אבל מעולם לא הגיע הזמן ללמוד את זה דרך, זה בהחלט יעזור לי לעשות את זה עכשיו.
נחמד מאוד, כריס. לא משהו שאני כל כך מעוניין לעשות (אני משתמש לצפצף מדי פעם), אבל זה היה נהדר לראות את תהליך הדרכה.
This is awesome! עם זאת, מה צריכה להיות מידות של המסמך המקורי photoshop?
ניסיתי אבל זה לא עובד.
אני לא יודע איפה לשים את הקוד כי משלוחים CSS.
אני יכול לציין פרט יותר בבקשה.
תודה.
תודה על מדריך זה!
זה נחמד!