ΠΩΣ ΝΑ ΦΤΙΑΞΕΤΕ FAVICONS

Σήμερα θα δούμε πως μπορούμε να δημιουργήσουμε favicons. Τι είναι τα favicons; Είναι τα εικονίδια που εμφανίζονται δίπλα στη μπάρα διευθύνσεων. Επίσης όταν σ' ένα φυλλομετρητή (browser) έχουμε δύο και παραπάνω καρτέλες ανοιγμένες τα favicons εμφανίζονται και εκεί Δείτε τις εικόνες ακριβώς από κάτω (κλικ για να τις μεγενθύνετε):


Ένα site στο internet όπου μπορούμε να κατεβάσουμε έτοιμα favicons στατικά και animated είναι το ICONJ. Αλλά κακά τα ψέματα όλοι θέλουμε να έχουμε κάτι μοναδικό που δε χρησιμοποιείται από άλλον. Για να επιτευχθεί αυτό πρέπει να το δημιουργήσουμε οι ίδιοι. Το site που προανέφερα μας δίνει και αυτή τη δυνατότητα όπως και hosting (φιλοξενία) για τα εικονίδια μας.
Για να δημιουργήσουμε ένα favicon πρέπει να έχουμε κάποιο πρόγραμμα επεξεργασίας φωτογραφίας. Όσοι έχουν το Photoshop, το PhotoImpact ή οποιοδήποτε άλλο πρόγραμμα μπορούνε να ξεκινήσουν αμέσως. Όσοι δεν έχουν και δε θέλουν να πληρώσουν για να αγοράσουν κάποιο, υπάρχει και το Picasa της Google το οποίο είναι δωρεάν μπορείτε να το κατεβάσετε από εδώ. Υπάρχουν πολλές δωρεάν εφαρμογές που μπορείτε να βρείτε μέσω της μπάρας αναζήτησης της Google ή αν αγοράζετε περιοδικά για computers θα βρείτε άφθονα στα DVDs που δίνουν.
Για να δημιουργήσουμε το favicon πρέπει να δημιουργήσουμε λογαριασμό στο ICONJ. Μετά πρέπει να δημιουργήσουμε ένα εικονίδιο διαστάσεων 16x16px (pixels) με το πρόγραμμα επεξεργασίας εικόνας που έχουμε στον υπολογιστή μας. Μετά τη δημιουργία του το σώζουμε (save) κάπου που είναι εύκολο να το βρούμε. Εφόσον είμαστε στο ICONJ και έχουμε κάνει login κάνουμε upload το εικονίδιο που δημιουργήσαμε προηγουμένως. Μετά από μερικά δευτερόλεπτα αναμονής το εικονίδιο μας έχει σηκωθεί στο site. Στα δεξιά πατάμε το κουμπί Get Code και εκεί βλέπουμε τον κώδικα που πρέπει να κάνουμε αντιγραφή - επικόληση (copy-paste) στον κώδικα του template μας.
Μπαίνουμε μέσα στο λογαριασμό του blogspot και από τον πανόπτη πάμε διάταξη και επεξεργασία HTML. Πρώτα παίρνουμε ένα αντίγραφο ασφαλείας του κώδικα μας (Back Up). Βρίσκουμε (CTRL+F) το </head> και ακριβώς πριν απ' αυτό κάνουμε επικόλληση των κώδικα που πήραμε από το ICONJ. Πατάμε προεπισκόπηση και βλέπουμε τ' αποτελέσματα. Αν μας ικανοποιούν πατάμε αποθήκευση (save) και τέλος.
Άλλο ένα site για favicons είναι το myfavatar το οποίο δουλεύει με παρόμοιο τρόπο.

ANIMATED LOGOS ΚΑΙ ΑΛΛΑ

Όλοι όσοι έχουμε blogs θέλουμε κάτι διαφορετικό για να ξεχωρίζει το ιστολόγιο μας. Θέλουμε παραπάνω στήλες, banners, logos, κουμπιά, clip arts. Όλα αυτά είναι εύκολα για αυτούς που ξέρουν να σχεδιάζουν τέτοια πράγματα. Εμείς που δεν ξέρουμε; Υπάρχει λύση (στο internet φυσικά) και είναι δωρεάν.
Απλά πρέπει να επισκεφτείτε το FlamingText . Εκεί πέρα θα βρείτε τα πάντα και σας δίνεται η δυνατότητα να σχεδιάσετε τα πάντα με εύκολο τρόπο έτσι ώστε οι δημιουργίες σας να είναι μοναδικές. Ναι, υπάρχουν και animated logos. Έχει πλούσια γκάμα και μπορείτε να διαλέγετε με τις ώρες. Ακόμα και γραμματοσειρές μπορείτε να βρείτε.
Να επικεντρωθούμε όμως στο πως κάνουμε ένα animated logo, μια και όταν μπαίνει κάποιος στη σελίδα μας το πρώτο πράγμα που βλέπει είναι το logo. Από το site που προανέφερα για να κάνετε logo πρέπει να πάτε στο headings. Κάνοντας κλικ στο link που σας παρέθεσα μεταφέρεστε σ' έναν οδηγό πέντε βημάτων (δυστυχώς το site δεν προσφέρεται στην ελληνική γλώσσα). Στα δεξιά θα δείτε τις επιλογές που έχετε. Διαλέξτε ότι σας αρέσει και μετά γράψτε το κείμενο, διαλέξτε το στυλ, το χρώμα, το μέγεθος του logo και τη γραμματοσειρά που θέλετε να έχει το logo σας. Αν θέλετε animated κάντε κλικ στο animated. Μετά πατήστε το create logo. Παίρνει περίπου δεκαπέντε δευτερόλεπτα για να δημιουργηθεί το logo σας. Μόλις δημιουργηθεί κάνετε δεξί κλικ και αποθήκευση ως (save as).
Τώρα θα χρειαστεί να πειράξουμε λίγο τον κώδικα γιατί αν βάλουμε με τη γνωστή διαδικασία το logo στο blog η εικόνα δε θα είναι animated αλλά στατική. Πρέπει να σηκώσουμε στο internet το logo που δημιουργήσαμε. Το ImageShack και το PhotoBucket παρέχoυν τέτοιου είδους δυνατότητα (δωρεάν φυσικά). Το μόνο που χρειάζεται είναι να κάνετε εγγραφή (registration). Μόλις σηκώσετε το logo σας βεβαιωθείτε για τη διεύθυνση που βρίσκεται.
Τώρα πρέπει να πάμε: Πανόπτης, διάταξη και επεξεργασία HTML. Πρώτα κάνουμε ένα back up τον κώδικα μας για να είμαστε ασφαλείς. Μετά κάνουμε κλικ στο κουτάκι που υπάρχει δίπλα στην επέκταση προτύπων γραφικών στοιχείων (expand widget templates) έτσι ώστε να εμφανιστεί ένα tick. Ψάχνουμε το κομμάτι του κώδικα που φαίνεται στο παρακάτω screenshot:
Ακριβώς από κάτω του βλέπουμε το κομμάτι του κώδικα που απεικονίζεται στο παρακάτω screenshot:
Στο κομμάτι του παραπάνω κώδικα εκεί που λέει maxwidgets='1' αλλάξτε την τιμή (1) σε οποιοδήποτε μεγαλύτερο αριθμό (από το 1) και εκεί που λέει showaddelement='no' αντικαταστείστε το no με το yes. Μόλις κάνετε τις παραπάνω διεργασίες πατήστε αποθήκευση (save).
Αν πάτε τώρα Πανόπτης, διάταξη και στοιχεία σελίδας θα δείτε ότι πάνω από την κεφαλίδα προστέθηκε στοιχείο σελίδας (προσθήκη gadget). Πηγαίνουμε στο site όπου ανεβάσαμε το logo μας και βλέπουμε ότι η σελίδα μας δίνει διάφορες επιλογές: IM, Forum, Alt Forum και HTML στο ImageShack και Share URL, Direct Link, HTML Code και IMG Code στο PhotoBucket. Σε όποιο site και αν ανεβάσαμε το logo μας εμείς επιλέγουμε τον κώδικα δηλαδή το HTML τον οποίο τον κάνουμε αντιγραφή - επικόλληση (copy - paste) στο gadget που δημιουργήσαμε προηγουμένως πάνω από την κεφαλίδα. Δηλαδή πάμε πανόπτης, διάταξη, και προσθήκη gadget. Ανοίγει ένα παράθυρο και επιλέγουμε προσθήκη HTML/JavaScript, κάνουμε επικόλληση των κώδικα και αποθήκευση. Πατάμε προεπισκόπηση και αν μας αρέσει το αποτέλεσμα το κρατάμε. Αν η κεφαλίδα έχει κείμενο η φωτογραφία και θέλουμε να τα εξαφανίσουμε τότε πάμε στην κεφαλίδα (header) πατάμε επεξεργασία (edit) και σβήνουμε ότι θέλουμε. Στο τέλος πατάμε αποθήκευση (save) και τέλος. Καλή διασκέδαση.

Με το πείραγμα του κώδικα του template δημιουργήσαμε στοιχεία σελίδας (προσθήκη gadgets) πάνω από την κεφαλίδα (header). Εννοείται ότι μπορείτε να προσθέσετε ότι είδος widget θέλετε.

ΠΩΣ ΕΜΦΑΝΙΖΟΥΜΕ ΚΩΔΙΚΑ ΣΤΙΣ ΑΝΑΡΤΗΣΕΙΣ

Πολλές φορές θέλουμε να κάνουμε μια ανάρτηση η οποία θα περιέχει κάποιον κώδικα και θέλουμε να είναι ορατός στους αναγνώστες. Βάζοντας τον κώδικα ως έχει θα παρατηρήσουμε ότι με τη δημοσίευση του post μας ο κώδικας δεν υπάρχει και εμφανίζεται το προϊόν του κώδικα (αν μπορούμε να το πούμε έτσι για να γίνει κατανοητό), είτε αυτό είναι φωτογραφία, είτε banner είτε link.
Η αλήθεια είναι ότι όλη τη ζημιά την κάνουν τα σύμβολα < και >. Για να εμφανιστεί ο κώδικας έτσι ώστε οι αναγνώστες να μπορούνε να τον κάνουνε αντιγραφή - επικόληση (copy - paste) πρέπει να αντικαταστήσουμε τα παραπάνω σύμβολα. Πως θα γίνει αυτό και με τι θα αντικατασταθούνε; Η διαδικασία είναι πολύ απλή και ο χρόνος που χρειάζεται είναι δυο λεπτά το πολύ.
Πάμε στην επιφάνεια εργασίας, κάνουμε δεξί κλικ, πάμε στη δημιουργία και από εκεί έγγραφο κειμένου (notepad). Κάνουμε αντιγραφή - επικόληση (copy - paste) τον κώδικα που θέλουμε να δημοσιεύσουμε και μετά πάμε πάνω στη μπάρα στην επεξεργασία και επιλέγουμε αντικατάσταση. Θα ανοίξει ένα παράθυρο που θα ονομάζεται Αντικατάσταση και θα έχει δύο πεδία. το πρώτο λέει Εύρεση του και το δεύτερο Αντικατάσταση με. Στο πρώτο πεδίο βάζουμε το σύμβολο < και στο δεύτερο
(με αυτό αντικαθιστάται). Πατάμε αντικατάσταση όλων και βλέπουμε ότι στον κώδικα όπου είχε το σύμβολο < υπάρχει ο συνδυασμός
Δεν τελειώσαμε ακόμα. Κάνουμε την ίδια εργασία και για το σύμβολο > μόνο που το αντικαθιστούμε με
Πατάμε αντικατάσταση όλων και βλέπουμε ότι στον κώδικα όπου υπήρχε το σύμβολο > αντικαταστάθηκε από
Το κάνουμε αποθήκευση (save) και τελειώσαμε. Τώρα έτσι όπως μετατρέψαμε τον κώδικα αν τον αναρτήσουμε με αντιγραφή - επικόληση (copy - paste) θα εμφανιστεί κανονικά στο blog. Μια ματιά στην προεπισκόπηση θα σας πείσει. Καλή επιτυχία και προσέξτε τι αντικαθιστάτε με τι. Τα δύο screenshots παρακάτω θα σας βοηθήσουν να θυμάστε: