Τα pinned sites του IE9 ή πώς θα κάνετε το website σας να μοιάζει με εφαρμογή των Windows

Μία από τις πιο ενδιαφέρουσες νέες λειτουργίες του Internet Explorer 9 είναι τα “pinned sites”, το «καρφίτσωμα», δηλαδή, μιας ιστοσελίδας στη γραμμή εργασιών των Windows 7. Κι ενώ οι επιλογές που θα εμφάνιζε ένα συμβατικό bookmark που μεταφέρθηκε εκεί είναι συγκεκριμένες, στην περίπτωση του Internet Explorer, και λόγω της ιδιαίτερης σχέσης του browser με το λειτουργικό, οι webmasters έχουν τη δυνατότητα να τα παραμετροποιήσουν με πολλούς διαφορετικούς τρόπους.

Τί είναι τα pinned sites

Ας τα πάρουμε όμως από την αρχή: από την πλευρά του τελικού χρήστη, το καρφίτσωμα γίνεται με απλή μεταφορά (drag and drop) του tab της σελίδας από τον Internet Explorer 9, πάνω στην γραμμή εργασιών (βλ. βίντεο).

Η διαφορά σε σχέση με την μεταφορά μιας οποιασδήποτε άλλης εφαρμογής ή συντόμευσης, είναι ότι ότι στην περίπτωση των “pinned sites” ο διαχειριστής του ιστοχώρου μπορεί να ορίσει τις επιλογές που θα εμφανίζονται όταν ο χρήστης κάνει δεξί κλικ στο εικονίδιο. Δείτε, για παράδειγμα, τις διαφορετικές επιλογές που εμφανίζονται σε Freeweird και insomnia.gr αντίστοιχα, ώστε να ανταποκρίνονται στο συγκεκριμένο περιεχόμενο του εκάστοτε ιστοχώρου:

Πώς θα τα αποκτήσετε

Για να προσθέσετε βασική υποστήριξη για τα pinned tabs στον ιστοχώρο ή το blog σας, μοναδική προϋπόθεση είναι να έχετε πρόσβαση στην html, καθώς και να δημιουργήσετε και να ανεβάσετε στον server σας τα εικονίδια που θα χρειαστούν.

Το βασικό εικονίδιο που θα χρειαστεί οπωσδήποτε είναι το favicon, το οποίο θα εμφανίζεται στην γραμμή εργασιών. Σύμφωνα με τις επίσημες οδηγίες της Microsoft, η προτεινόμενη διάσταση του εικονιδίου θα πρέπει να είναι 48×48 pixels, ενώ ως βέλτιστη δίνει το 64×64 px. Το εικονίδιο θα πρέπει να αποθηκευτεί με τη μορφή .ICO στο root του ιστοχώρου σας και μπορείτε να το δημιουργήσετε με κάποιο πρόγραμμα επεξεργασίας εικόνας όπως είναι το Gimp! ή να μετατρέψετε κάποια έτοιμη εικόνα, μέσω online εφαρμογών όπως το iconverticons.com.

Από εκεί και πέρα, για να δημιουργήσετε το μενού σας, χρειάζεται να προσθέσετε μερικές συγκεκριμένες γραμμές κώδικα στο head του ιστοχώρου σας (στο WordPress βρίσκεται συνήθως στο header.php, ενώ σε άλλες πλατφόρμες μπορεί να είναι το index ή κάτι αντίστοιχο). Οι βασικές γραμμές, που μπορούν να προστεθούν εύκολα χωρίς να χρειάζονται ιδιαίτερες γνώσεις από την πλευρά του χρήστη, περιλαμβάνουν τα εξής:

• Το “application-name”, που ορίζει το όνομα που θα έχει η καρφιτσωμένη σελίδα σας (το ορίζετε στο πεδίο “content”):

• Το “msapplication-starturl”, που ορίζει τη διεύθυνση στην οποία θα οδηγεί η σελίδα όταν επιλεγεί (συνήθως βάζετε την αρχική σελίδα του ιστοχώρου σας):

• Το “msapplication-tooltip”, ορίζει το κείμενο που θα εμφανίζεται όταν ο κέρσορας περνάει πάνω από το εικονίδιο της σελίδας σας:

• Το “msapplication-task” δημιουργεί μια επιλογή κάτω από το “tasks” (εργασίες) του μενού. Εδώ χρειάζεται να ορίσετε το όνομα που θέλετε να εμφανίζεται, τη διεύθυνση URL στην οποία θέλετε να οδηγεί, καθώς και τη διαδρομή του εικονιδίου που αντιστοιχεί στη συγκεκριμένη επιλογή. Έχετε υπόψη ότι μπορείτε να προσθέσετε έως και 5 tasks.

• Το “msapplication-window”, που είναι προαιρετικό και ορίζει το μέγεθος στο οποίο θα ανοίξει η σελίδα όταν ο χρήστης κάνει κλικ στο εικονίδιο που έχει μεταφέρει στη γραμμή εργασιών .

• Το “msapplication-navbutton-color”, που είναι επίσης προαιρετικό και ορίζει το χρώμα που θα έχουν τα κουμπιά “εμπρός / πίσω” του Internet Explorer.

Σε περίπτωση που τα 5 tasks δεν είναι αρκετά, μπορείτε να προσθέσετε επιπλέον λίστες χρησιμοποιώντας Javascript και βάζοντας τον εξής κώδικα (αντικαθιστώντας το «γρήγορη πρόσβαση» με τον τίτλο της λίστας σας και τις επιλογές που εμφανίζονται στο window.external.msSiteModeAddJumpListItem με τον τίτλο, τη διεύθυνση URL και το εικονίδιο της κάθε καταχώρησής σας):

Εδώ μπορείτε να προσθέσετε όσες σειρές θέλετε, έχοντας όμως πάντα υπόψη πως μπορείτε να έχετε μόνο μία τέτοια λίστα. Για να έχετε μια πιο σφαιρική εικόνα όσων προαναφέρθηκαν, δείτε όλο τον σχετικό κώδικα που περιλαμβάνεται στο Freeweird:

Ανάλογα με το είδος του ιστοχώρου σας, οι επιλογές και οι λειτουργίες που μπορείτε να προσθέσετε σε ένα pinned site είναι πολλές: Θα μπορούσατε για παράδειγμα να εμφανίζετε στο εικονίδιο της γραμμής εργασιών τον αριθμό των νέων άρθρων, να προσθέσετε κουμπιά αναπαραγωγής πολυμέσων (α λα media player) κ.α.

Όλα αυτά βέβαια προϋποθέτουν επιπλέον γνώσεις και αρκετό διάβασμα, και ξεπερνούν το σκοπό αυτού του άρθρου. Σε περίπτωση πάντως που θέλετε να το ψάξετε περισσότερο, μια καλή αρχή είναι η σχετική βιβλιοθήκη της ίδιας της Microsoft.

Εάν πάλι χρησιμοποιείτε Chrome αλλά θα θέλατε να αξιοποιείτε τη λειτουργία των pinned sites, όπου αυτά υποστηρίζονται, μπορείτε να εγκαταστήσετε το IE9 Jump List Tasks.

Το παραπάνω άρθρο είναι αρκετά παλιό, αφού δημοσιεύτηκε στις 22 Φεβρουαρίου 2011. Εάν κάποια από τις πληροφορίες που αναφέρονται σε αυτό δεν ισχύει πια, ενημερώστε με μέσω της φόρμας επικοινωνίας για να το τροποποιήσω.

Συντάκτης άρθρου: Γιώργος Σαρηγιαννίδης

Ο Γιώργος Σαρηγιαννίδης είναι απόφοιτος του τμήματος Επικοινωνίας, Μέσων και Πολιτισμού του Παντείου και κάτοχος μεταπτυχιακού διπλώματος από το ίδιο τμήμα. Αυτή τη στιγμή εργάζεται ως freelancer σύμβουλος σε έργα διαδικτύου και intranets, με κύρια αντικείμενα την Αρχιτεκτονική της Πληροφορίας, την κατασκευή ιστοσελίδων και την διαχείριση περιεχομένου. Έχει ειδικευτεί στη μελέτη και τον αρχιτεκτονικό σχεδιασμό portals, intranets και δικτυακών εφαρμογών, ενώ στο παρελθόν έχει ασχοληθεί και με τη δημοσιογραφία.