Σήμερα το μεγαλύτερο ποσοστό των ιστοσελίδων είναι γραμμένο σύμφωνα με το πρότυπο XHTML. Είναι πολλοί web designers όμως, ανάμεσα τους και εγώ, που ξεκίνησαν να δημιουργούν τις ιστοσελίδες τους χωρίς να ακολουθούν τους κανόνες της XHTML με αποτέλεσμα, όταν κατανοούν τα θετικά της XHTML, να πρέπει να τις εναρμονίσουν σύμφωνα με το πρότυπο της. Όταν μιλάμε για λίγες σελίδες, τότε το εγχείρημα είναι εύκολο. Αν όμως μιλάμε για εκατοντάδες σελίδες, όπως ήταν αυτές του wlearn.gr, η μετατροπή τους σε XHTML γίνεται μια αρκετά χρονοβόρα διαδικασία. Σε κάθε περίπτωση όμως, αξίζει να γίνει η μετάβαση στο πρότυπο της XHTML 1.0
Χρειάζεται μεθοδική μετάβαση
Η μετάβαση απαιτεί την εφαρμογή των κανόνων XHTML. Σε καμία περίπτωση δεν θα χρειαστεί να γράψουμε από την αρχή τον κώδικα μιας σελίδας. Η εφαρμογή των κανόνων του προτύπου γίνεται διορθώνοντας τον κώδικα των σελίδων που απαρτίζουν το site μας. Όλες οι αλλαγές πρέπει να γίνουν προσεκτικά και μεθοδικά ώστε να μην υπάρχουν αλλοιώσεις ή προβλήματα στην εμφάνιση του site. Αν το εγχείρημα της μετάβασης γίνει μεθοδικά, τότε δεν θα υπάρχει κανένα πρόβλημα και στο τέλος θα έχουν μετατραπεί σωστά όλες οι σελίδες του site σύμφωνα με το πρότυπο της XHTML. Παρακάτω προτείνω την σειρά των βημάτων που πρέπει να ακολουθήσει κάποιος για μια πετυχημένη μετάβαση.
1. Προσθήκη της ετικέτας <!DOCTYPE>
Το πρώτο και εύκολο βήμα, είναι να προσθέσουμε την ετικέτα <!DOCTYPE> στην πρώτη γραμμή κάθε σελίδας, επιλέγοντας το σωστό DTD όπως περιγράψαμε αναλυτικά στην προηγούμενη ενότητα.
2. Όλα με πεζούς χαρακτήρες
Έπειτα ότι είναι γραμμένο με κεφαλαίους χαρακτήρες, είτε είναι ετικέτες είτε ιδιότητες είτε τιμές, πρέπει να τα μετατρέψουμε σε πεζούς χαρακτήρες. Στο βήμα αυτό πρέπει να προσέχουμε να μην παραλείψουμε κάποιον χαρακτήρα, καθώς ο κώδικας συνήθως είναι μεγάλος και η προσοχή που καταβάλουμε δεν μπορεί να παραμείνει στο μέγιστο βαθμό όσο περνάει η ώρα. Προτιμότερο είναι να αφιερώσετε μια ή και δύο μέρες παραπάνω, παρά να τελειώσετε την μετάβαση γρήγορα αλλά με πολλά λάθη, για τα οποία θα καταναλώσετε ακόμη περισσότερο χρόνο για να τα εντοπίζετε.
3. Οι τιμές των ιδιοτήτων σε εισαγωγικά
Το επόμενο βήμα είναι να βάλουμε σε εισαγωγικά όλες τις τιμές των ιδιοτήτων.
4. Ετικέτες τέλους και σωστό φώλιασμα
Τελευταίο βήμα είναι να προσθέσουμε ετικέτες τέλους όπου δεν υπάρχουν και να ελέγξουμε αν είναι σωστά φωλιασμένες. Προσοχή στις ετικέτες που δεν παίρνουν ετικέτες τέλους όπως <br />, <hr />, <input> κτλ. η οποίες πρέπει να βάζουμε πλάγια κάθετο πριν την δεξια αγκύλη, δηλαδή: <br />, <hr /> κτλ.
1. Προσθήκη της ετικέτας <!DOCTYPE>
Το πρώτο και εύκολο βήμα, είναι να προσθέσουμε την ετικέτα <!DOCTYPE> στην πρώτη γραμμή κάθε σελίδας, επιλέγοντας το σωστό DTD όπως περιγράψαμε αναλυτικά στην προηγούμενη ενότητα.
2. Όλα με πεζούς χαρακτήρες
Έπειτα ότι είναι γραμμένο με κεφαλαίους χαρακτήρες, είτε είναι ετικέτες είτε ιδιότητες είτε τιμές, πρέπει να τα μετατρέψουμε σε πεζούς χαρακτήρες. Στο βήμα αυτό πρέπει να προσέχουμε να μην παραλείψουμε κάποιον χαρακτήρα, καθώς ο κώδικας συνήθως είναι μεγάλος και η προσοχή που καταβάλουμε δεν μπορεί να παραμείνει στο μέγιστο βαθμό όσο περνάει η ώρα. Προτιμότερο είναι να αφιερώσετε μια ή και δύο μέρες παραπάνω, παρά να τελειώσετε την μετάβαση γρήγορα αλλά με πολλά λάθη, για τα οποία θα καταναλώσετε ακόμη περισσότερο χρόνο για να τα εντοπίζετε.
3. Οι τιμές των ιδιοτήτων σε εισαγωγικά
Το επόμενο βήμα είναι να βάλουμε σε εισαγωγικά όλες τις τιμές των ιδιοτήτων.
4. Ετικέτες τέλους και σωστό φώλιασμα
Τελευταίο βήμα είναι να προσθέσουμε ετικέτες τέλους όπου δεν υπάρχουν και να ελέγξουμε αν είναι σωστά φωλιασμένες. Προσοχή στις ετικέτες που δεν παίρνουν ετικέτες τέλους όπως <br />, <hr />, <input> κτλ. η οποίες πρέπει να βάζουμε πλάγια κάθετο πριν την δεξια αγκύλη, δηλαδή: <br />, <hr /> κτλ.
Find and Replace
Στα πλαίσια της μετάβασης του wlearn.gr στο πρότυπο της XHTML 1.0, για να αποφύγω την σάρωση με το μάτι όλων των γραμμών του κώδικα κάθε σελίδας, χρησιμοποίησα το εργαλείο Find and Replace του Dreamweaver 2008, η χρήση του οποίου μείωσε αρκετά τον συνολικό χρόνο που χρειάστηκα για να ολοκληρώσω την μετάβαση.
Με το εργαλείο αυτό μπορούμε να αντικαταστήσουμε μια λέξη ή μια πρόταση με μια άλλη και να εφαρμόσουμε αυτήν την αντικατάσταση στο σύνολο των αρχείων ενός φακέλου. Με αυτόν τον τρόπο πέτυχα την αλλαγή πολλών γραμμών κώδικα μόνο με το πάτημα ενός κουμπιού.
Για παράδειγμα, η προσθήκη της ετικέτας <!DOCTYPE> στην πρώτη γραμμή του κώδικα κάθε σελίδας, έγινε με τον εξής τρόπο:
Αν έχετε κάποιο τέτοιο εργαλείο που γνωρίζετε καλά τον χειρισμό του, χρησιμοποιήστε το για να γλιτώσετε χρόνο και κόπο. Αλλά θέλει πολύ προσοχή στην εφαρμογή των αντικαταστάσεων, γιατί οι αλλαγές που γίνονται δεν επιδέχονται αναίρεση (undo). Οπότε καλό είναι πριν από οποιαδήποτε εφαρμογή αντικατάστασης να αντιγράφεται όλο τον φάκελο με τα αρχεία του site κάπου αλλού, ώστε να έχετε την δυνατότητα αποκατάστασης αρχείων σε περίπτωση που κάτι δεν πάει καλά.
Με το εργαλείο αυτό μπορούμε να αντικαταστήσουμε μια λέξη ή μια πρόταση με μια άλλη και να εφαρμόσουμε αυτήν την αντικατάσταση στο σύνολο των αρχείων ενός φακέλου. Με αυτόν τον τρόπο πέτυχα την αλλαγή πολλών γραμμών κώδικα μόνο με το πάτημα ενός κουμπιού.
Για παράδειγμα, η προσθήκη της ετικέτας <!DOCTYPE> στην πρώτη γραμμή του κώδικα κάθε σελίδας, έγινε με τον εξής τρόπο:
Αν έχετε κάποιο τέτοιο εργαλείο που γνωρίζετε καλά τον χειρισμό του, χρησιμοποιήστε το για να γλιτώσετε χρόνο και κόπο. Αλλά θέλει πολύ προσοχή στην εφαρμογή των αντικαταστάσεων, γιατί οι αλλαγές που γίνονται δεν επιδέχονται αναίρεση (undo). Οπότε καλό είναι πριν από οποιαδήποτε εφαρμογή αντικατάστασης να αντιγράφεται όλο τον φάκελο με τα αρχεία του site κάπου αλλού, ώστε να έχετε την δυνατότητα αποκατάστασης αρχείων σε περίπτωση που κάτι δεν πάει καλά.
