Με το χαρακτηρισμό «καθαρός» νοείται ο κώδικας οποίος έχει συγγραφεί με αυτόν τον τρόπο για την επίτευξη μέγιστης συμβατότητας, σωστής λειτουργίας και της καλύτερης αναγνωσιμότητας μιας web εφαρμογής.
Προτείνεται λοιπόν στους σωστούς επαγγελματίες να ακολουθήσουν μερικούς απλούς βασικούς κανόνες ώστε να πετύχουν το θετικό αποτέλεσμα που επιθυμούν, αναλυτικότερα:
1. ΧΡΗΣΗ ΚΑΙ ΣΩΣΤΗ ΕΠΙΛΟΓΗ DOCTYPE
Η χρήση του DOCTYPE θεωρείται πλέον αυτονόητη και η σωστή επιλογή του για κάθε περίπτωση. Τα πλεονεκτήματα της χρήσης DOCTYPE έχουν παρουσιαστεί στο παρελθόν και έχει τονιστεί η σημασία τους, για την καλή και ομαλή λειτουργία οποιοδήποτε διαδικτυακού τόπου και γενικότερα μίας web εφαρμογής.
Παράδειγμα:
Για περισσότερες πληροφορίες δείτε τους εξής συνδέσμους:Τι είναι το DOCTYPE και γιατί το χρησιμοποιούμε.Ποιοί είναι οι διάφοροι τύποι DOCTYPES και ποιά είναι η σωστή χρήση τους.
2. ΧΡΗΣΗ CSS/JS ΜΕ ΕΞΩΤΕΡΙΚΑ ΑΡΧΕΙΑ
Μην επιβαρύνετε το κώδικα σας με CSS και Javascript μέσα στο HTML αρχείο σας. Χρησιμοποιήστε εξωτερικά αρχεία ώστε να τα έχετε όλα όμορφα και ταξινομημένα. Αυτό σας δίνει σημαντικά πλεονεκτήματα όπως:
- Μικρότερο βάρος/ μέγεθος του HTML αρχείου σας
- Καλύτερη ανάγνωση από τις μηχανές αναζήτησης και αποτελέσματα onsite SEO
- Άνετη και οργανωμένη μελλοντική ανανέωση του αρχείου για αλλαγές/ προσθήκες / διορθώσεις.
3. ΛΙΤΗ ΣΥΓΓΡΑΦΗ XTML / CSS
Μην χρησιμοποιείτε «καρφωτά» στοιχεία προσπαθήστε η εικαστική εμφάνιση του διαδικτυακού τόπου να ορίζεται από το CSS αρχείο. Με αυτό επιτυγχάνετε λιγότερο βάρος/ όγκος κώδικα και εύκολη / μαζική διαχείριση αλλαγής των στοιχείων μιας ιστοσελίδας . Προσπαθήστε στην συγγραφή HTML να μην το παρακάνετε με την χρήση των divs και το tags, δοκιμάστε και άλλα στοιχεία όπως h1, h2, p, ul, li κτλ για να διαμορφώσετε την ιστοσελίδα σας. Τουλάχιστον μέχρι να δημοσιευτεί επίσημα η HTML 5 όπου θα μπορείτε να αντικαταστήσετε τα divs με νέα στοιχεία. Σβήστε λοιπόν τα περιττά divs και βελτιστοποιήστε το κώδικα σας για καλύτερη αναγνωσιμότητα και από σας και από τις μηχανές αναζήτησης.
Πληροφορίες για HTML 5:
4. ΣΩΣΤΗ ΕΥΘΥΓΡΑΜΙΣΗ ΤΟΥ ΚΩΔΙΚΑ
Προσπαθήστε στην συγγραφή του κώδικα HTML να έχετε σωστή ευθυγράμμιση. Αυτό αρχικά διευκολύνει εσάς στην ανάγνωση και σε μελλοντικές αλλαγές / προσθήκες του αρχείου και δεύτερον βοηθάει τους developers να κάνουν πιο γρήγορα και σωστά την δουλεία τους. Αφού έτσι καταλαβαίνουν τι και που κλείνει το καθετί, όταν θα έρθει η φάση της παραγωγής που θα γίνει το development και θα προσθέσουν τα δυναμικά στοιχεία. Εντέλει δίνει μια σωστή και ξεκάθαρη εικόνα των στοιχείων που δημιουργούν την ιστοσελίδα σας.
5. ΠΡΟΣΟΧΗ ΣΤΟΥΣ ΧΑΡΑΚΤΗΡΕΣ & ΣΥΜΒΟΛΑ
Ένα λάθος το οποίο έχει παρατηρηθεί γενικά είναι η λανθασμένη χρήση των χαρακτήρων & συμβόλων, με αποτέλεσμα να μην προβάλλετε σωστά σε διάφορους browsers και να μην είναι valid. Θα πρέπει να προσεχθεί η προβολή τέτοιων στοιχείων με ασφάλεια ώστε να πετυχαίνετε το καλύτερο αποτέλεσμα.
Παράδειγμα:
Λάθος:
ΟΝΟΜΑ & ΕΠΙΘΕΤΟ
Σωστό:
ΟΝΟΜΑ & ΕΠΙΘΕΤΟ
Πλήρης πίνακας χαρακτηριστικών & συμβόλων:
6.ΛΟΓΙΚΗ ΟΝΟΜΑΤΟΛΟΓΙΑ ΤΩΝ DIVS
Όταν «κόβετε» (authoring) μία ιστοσελίδα να έχετε στο νου σας, πως κάποια στιγμή θα χρειαστεί να κάνετε μελλοντικές αλλαγές, οι εσείς ή κάποιος μεταγενέστερος web designer/ developer. Για αυτό προσπαθήστε να χρησιμοποιείτε μια λογική ονοματολογία στα divs σας και γενικότερα στο CSS, ώστε αργότερα να μην χρονοτριβείτε σε αλλαγές και προσθήκες στον κώδικα σας. Βασικά το προτιμότερο είναι να ακολουθείτε ένα δικό σας framework ώστε να είναι όλα πάντα νοητά και αναγνώσιμα.
Παράδειγμα:
7.VALIDATION
Τελευταίο και καλύτερο, προσπαθήστε να τηρείτε όσο δυνατόν τα παγκόσμια πρότυπα W3C για να πετυχαίνετε μέγιστη συμβατότητα με τα προγράμματα πλοήγησης του διαδικτύου. Έχει επισημανθεί από την παγκόσμια διαδικτυακή κοινότητα η σημασία των Web Standards και το σημαντικό ρόλο που παίζουν. Όμως υπάρχουν πολλές περιπτώσεις μεγάλων και διαδεδομένων websites που δεν παίρνουν το validation αλλά δουλεύουν μια χαρά. Είναι στην κρίση σας σε ποιο βαθμό validation επιθυμείτε να φτάσετε, σύμφωνα με τις ώρες που έχετε να διαθέσετε σε κάθε project.
Εργαλείa Validation:
http://validator.w3.org/
Tidy για FireFox
ΣΥΜΠΕΡΑΣΜΑ
Διαβάζοντας και μελετώντας ξένα blogs/ websites θα βρείτε και άλλα σημεία τα οποία θα πρέπει να προσέξετε για να έχετε ακόμα καλύτερο, κρυστάλλινο αποτέλεσμα. Σίγουρα αν κάθε επαγγελματίας είχε την άνεση να αφιερώσει άπειρο χρόνο σε κάθε project θα το έκανε τέλειο, αλλά δυστυχώς η αγορά είναι απαιτητική και τα projects τρέχουν. Αυτό που έχει σημασία εντέλει είναι η ταχύτητα προσβασιμότητας , η οπτική ομοιογένεια και λειτουργία στους browsers, η γρήγορη ανανέωση και η οργανωμένη διαχείριση client / back end. Προσπαθήστε λοιπόν να βρείτε την χρυσή τομή και κάντε ότι καλύτερο και ότι προλαβαίνετε.
ΠΗΓΗ : http://www.webdesignblog.gr/simple-basic-rules-for-clean-website-code/
0 σχόλια:
Δημοσίευση σχολίου