Πώς να κάνω μια μοναδική ιστοσελίδα για πειραχτήρι αναπροσαρμογές σας
16 Μαΐου, 2008 από chriscoyier · 6 Σχόλια 
Πειραχτήρι προσφέρει ένα API που μπορείτε να χρησιμοποιήσετε για να τραβήξετε πληροφορίες από πειραχτήρι για δικές του χρήσεις σας. Ακόμη πιο εύκολο, προσφέρουν μια μικρή widget javascript που χρησιμοποιεί αυτόματα το API και επιστρέφει απλή HTML των πρόσφατων tweets σας.
Ας σχεδιάσουμε ένα μοναδικό δικτυακό τόπο για ενημερώσεις πειραχτήρι μας χρησιμοποιώντας αυτό το μαραφέτι.
1. Σχεδιασμός στο Photoshop
Δημιουργήστε ένα νέο έγγραφο και γεμίστε το φόντο με ένα σκούρο γκρι χρώμα. Χρησιμοποίησα # 222222 εδώ.
Επιλέξτε έναν αναπτήρα γκρι χρώμα προσκηνίου (# 545454). Δημιουργήστε ένα νέο στρώμα πάνω από στρώμα φόντο σας. Επιλέξτε το εργαλείο κλίσης (υπο-εργαλείο του εργαλείου κουβά μπογιά). Στην επάνω γραμμή θα υπάρξουν κάποιες ρυθμίσεις ειδικά για την κλίση εργαλείο. Βεβαιωθείτε ότι έχουν οριστεί σε "νέα στοιχεία για διαφανής" και "Radial".
Με νέο στρώμα σας, σύρετε μια κλίση. Με αυτόν τον τρόπο σε ένα νέο στρώμα είναι καλύτερο, διότι τότε μπορείτε να το μεταφέρετε και να πάρει γύρω από το πόσο σας αρέσει.
Τώρα το Google κοντά και να προσπαθήσουμε να βρούμε ένα ωραίο πειραχτήρι-όπως Blue Bird. Παρακάτω είναι ένας αγόρασα από iStockPhoto. Μπορείτε να το αγοράσετε ή να περιηγηθείτε περίπου για κάτι που ταιριάζει με την προσωπικότητα του δικτυακού σας τόπου.
Τώρα προσθέστε το πουλί, κάποιο κείμενο, και ένα πλαίσιο για τη διεξαγωγή tweets σας. Η γραμματοσειρά που χρησιμοποίησα ήταν εκεί Ατζέντα Μαύρο. Το κουτί είναι απλά μια συμπληρώστε του μπλε (# 0081e2) στο 18% της αδιαφάνειας και ένα λευκό 2px εγκεφαλικό επεισόδιο που με την "Επικάλυψη" mode μείγμα.
Τώρα εξαγωγών το όλο θέμα (Αρχείο> Αποθήκευση για το 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. Πηγαίνετε να πάρετε τον κώδικα από την έξαψη σελίδα σας
Πρώτη πηγαίνετε συνδεθείτε με το Twitter και πηγαίνετε στην αρχική σελίδα σας. Κάντε κλικ στο κουμπί "Λήψη ενημερώσεων για κουμπί ιστοσελίδα σας".
Επιλέξτε "Λοιπά".
Θέλουμε 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; } Και εκεί την έχουμε! Ένα αρκετά δροσερό και μοναδικό αναζητούν σελίδα κελάδημα ενημερώσεις.
Αρκετά καλό φροντιστήριο ήθελα πάντα να ενημερώσετε τη σελίδα κελάδημα μου, αλλά ποτέ δεν πήρε το χρόνο να το μάθουν μέσα, αυτό σίγουρα θα με βοηθήσει να το κάνουμε τώρα.
Πολύ ωραία, Chris. Κάτι που δεν είμαι το μόνο που ενδιαφέρονται να κάνουν (χρησιμοποιώ πειραχτήρι περιστασιακά), αλλά ήταν μεγάλη για να δείτε το φροντιστήριο διαδικασία.
Αυτό είναι φοβερό! Ωστόσο, αυτό που θα πρέπει να είναι οι διαστάσεις του πρωτότυπου εγγράφου photoshop;
Προσπάθησα, αλλά δεν λειτουργεί.
Δεν ξέρω πού να θέσει τον κωδικό που Css παραδόσεις.
Θα ήθελα να αναφέρει περισσότερες λεπτομέρειες παρακαλώ.
Σε ευχαριστώ.
Ευχαριστώ για αυτό το σεμινάριο!
Αυτό είναι ωραίο!