26Ιαν

Απλοί βασικοί κανόνες για να έχετε σωστό, καθαρό κώδικα.

, 26 Ιανουαρίου 2009 | HOT POSTS | 4 Σχόλια

greyΕίναι βασικό στην σχεδίαση και στην ομαλή λειτουργία μιας ιστοσελίδας ο κώδικας κατασκευής/ προγραμματισμού να είναι σωστός ή αλλιώς πιο διαδεδομένα γνωστός ως «καθαρός». Γνωρίζοντας πως στο σημερινό διαδίκτυο ένα website μπορεί να προσπελαστεί από οποιοδήποτε είδος ηλεκτρονικού υπολογιστή που φέρει διαφορετικό λογισμικό και μπορεί να προβληθεί σε έναν από τους πολυάριθμους browsers, θα πρέπει εσείς να προσέξετε ώστε να εξασφαλίσετε μέγιστη συμβατότητα και ορθή οπτική προβολή σε όλα αυτά τα επίπεδα.

Με το χαρακτηρισμό «καθαρός» νοείται ο κώδικας οποίος έχει συγγραφεί με αυτόν τον τρόπο για την επίτευξη μέγιστης συμβατότητας, σωστής λειτουργίας και της καλύτερης αναγνωσιμότητας μιας web εφαρμογής.

basic_rules
Προτείνεται λοιπόν στους σωστούς επαγγελματίες να ακολουθήσουν μερικούς απλούς βασικούς κανόνες ώστε να πετύχουν το θετικό αποτέλεσμα που επιθυμούν, αναλυτικότερα:

rule1
Η χρήση του DOCTYPE θεωρείται πλέον αυτονόητη και η σωστή επιλογή του για κάθε περίπτωση. Τα πλεονεκτήματα της χρήσης DOCTYPE έχουν παρουσιαστεί στο παρελθόν και έχει τονιστεί η σημασία τους, για την καλή και ομαλή λειτουργία οποιοδήποτε διαδικτυακού τόπου και γενικότερα μίας web εφαρμογής.

Παράδειγμα:

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>

Για περισσότερες πληροφορίες δείτε τους εξής συνδέσμους:
Τι είναι το DOCTYPE και γιατί το χρησιμοποιούμε.
Ποιοί είναι οι διάφοροι τύποι DOCTYPES και ποιά είναι η σωστή χρήση τους.

rule2
Μην επιβαρύνετε το κώδικα σας με CSS και Javascript μέσα στο HTML αρχείο σας. Χρησιμοποιήστε εξωτερικά αρχεία ώστε να τα έχετε όλα όμορφα και ταξινομημένα. Αυτό σας δίνει σημαντικά πλεονεκτήματα όπως:

  • Μικρότερο βάρος/ μέγεθος του HTML αρχείου σας
  • Καλύτερη ανάγνωση από τις μηχανές αναζήτησης και αποτελέσματα onsite SEO
  • Άνετη και οργανωμένη μελλοντική ανανέωση του αρχείου για αλλαγές/ προσθήκες / διορθώσεις.

Παράδειγμα:

<link href=»css/sycada_style.css» rel=»stylesheet» type=»text/css» />
<script type=»text/javascript» src=»thickbox/thickbox.js»></script>

rule3
Μην χρησιμοποιείτε «καρφωτά» στοιχεία προσπαθήστε η εικαστική εμφάνιση του διαδικτυακού τόπου να ορίζεται από το CSS αρχείο. Με αυτό επιτυγχάνετε λιγότερο βάρος/ όγκος κώδικα και εύκολη / μαζική διαχείριση αλλαγής των στοιχείων μιας ιστοσελίδας . Προσπαθήστε στην συγγραφή HTML να μην το παρακάνετε με την χρήση των divs και το <span> tags, δοκιμάστε και άλλα στοιχεία όπως h1, h2, p, ul, li κτλ για να διαμορφώσετε την ιστοσελίδα σας. Τουλάχιστον μέχρι να δημοσιευτεί επίσημα η HTML 5 όπου θα μπορείτε να αντικαταστήσετε τα divs με νέα στοιχεία. Σβήστε λοιπόν τα περιττά divs και βελτιστοποιήστε το κώδικα σας για καλύτερη αναγνωσιμότητα και από σας και από τις μηχανές αναζήτησης.

Πληροφορίες για HTML 5:
http://www.alistapart.com/articles/previewofhtml5

rule4
Προσπαθήστε στην συγγραφή του κώδικα HTML να έχετε σωστή ευθυγράμμιση. Αυτό αρχικά διευκολύνει εσάς στην ανάγνωση και σε μελλοντικές αλλαγές / προσθήκες του αρχείου και δεύτερον βοηθάει τους developers να κάνουν πιο γρήγορα και σωστά την δουλεία τους. Αφού έτσι καταλαβαίνουν τι και που κλείνει το καθετί, όταν θα έρθει η φάση της παραγωγής που θα γίνει το development και θα προσθέσουν τα δυναμικά στοιχεία. Εντέλει δίνει μια σωστή και ξεκάθαρη εικόνα των στοιχείων που δημιουργούν την ιστοσελίδα σας.

Παράδειγμα:

Λάθος:
li_wrong

Σωστό:
li_right

rule5
Ένα λάθος το οποίο έχει παρατηρηθεί γενικά είναι η λανθασμένη χρήση των χαρακτήρων & συμβόλων, με αποτέλεσμα να μην προβάλλετε σωστά σε διάφορους browsers και να μην είναι valid. Θα πρέπει να προσεχθεί η προβολή τέτοιων στοιχείων με ασφάλεια ώστε να πετυχαίνετε το καλύτερο αποτέλεσμα.

Παράδειγμα:

Λάθος:

<h1> ΟΝΟΜΑ & ΕΠΙΘΕΤΟ </h1>

Σωστό:

<h1> ΟΝΟΜΑ &amp; ΕΠΙΘΕΤΟ </h1>

Πλήρης πίνακας χαρακτηριστικών & συμβόλων:
http://www.w3schools.com/tags/ref_entities.asp

rule6
Όταν «κόβετε» (authoring) μία ιστοσελίδα να έχετε στο νου σας, πως κάποια στιγμή θα χρειαστεί να κάνετε μελλοντικές αλλαγές, οι εσείς ή κάποιος μεταγενέστερος web designer/ developer. Για αυτό προσπαθήστε να χρησιμοποιείτε μια λογική ονοματολογία στα divs σας και γενικότερα στο CSS, ώστε αργότερα να μην χρονοτριβείτε σε αλλαγές και προσθήκες στον κώδικα σας. Βασικά το προτιμότερο είναι να ακολουθείτε ένα δικό σας framework ώστε να είναι όλα πάντα νοητά και αναγνώσιμα.

Παράδειγμα:

<div id=»header»></header>
<div id=»navigation»></navigation>
<div id=»content»></content>
<div id=»footer»></footer>

rule7
Τελευταίο και καλύτερο, προσπαθήστε να τηρείτε όσο δυνατόν τα παγκόσμια πρότυπα W3C για να πετυχαίνετε μέγιστη συμβατότητα με τα προγράμματα πλοήγησης του διαδικτύου. Έχει επισημανθεί από την παγκόσμια διαδικτυακή κοινότητα η σημασία των Web Standards και το σημαντικό ρόλο που παίζουν. Όμως υπάρχουν πολλές περιπτώσεις μεγάλων και διαδεδομένων websites που δεν παίρνουν το validation αλλά δουλεύουν μια χαρά. Είναι στην κρίση σας σε ποιο βαθμό validation επιθυμείτε να φτάσετε, σύμφωνα με τις ώρες που έχετε να διαθέσετε σε κάθε project.

Εργαλείa Validation:
http://validator.w3.org/
Tidy για FireFox

conclusion1
Διαβάζοντας και μελετώντας ξένα blogs/ websites θα βρείτε και άλλα σημεία τα οποία θα πρέπει να προσέξετε για να έχετε ακόμα καλύτερο, κρυστάλλινο αποτέλεσμα. Σίγουρα αν κάθε επαγγελματίας είχε την άνεση να αφιερώσει άπειρο χρόνο σε κάθε project θα το έκανε τέλειο, αλλά δυστυχώς η αγορά είναι απαιτητική και τα projects τρέχουν. Αυτό που έχει σημασία εντέλει είναι η ταχύτητα προσβασιμότητας , η οπτική ομοιογένεια και λειτουργία στους browsers, η γρήγορη ανανέωση και η οργανωμένη διαχείριση client / back end. Προσπαθήστε λοιπόν να βρείτε την χρυσή τομή και κάντε ότι καλύτερο και ότι προλαβαίνετε.

ΧΡΗΣΙΜΗ ΠΛΗΡΟΦΟΡΙΑ: Το άρθρο Απλοί βασικοί κανόνες για να έχετε σωστό, καθαρό κώδικα. γράφτηκε από το WebDesignBlog. Η ομάδα μας σας υπενθυμίζει πως αν θέλετε να ενημερώνεστε για τα νέα του διαδικτύου και για επιλεγμένα άρθρα μας, μπορείτε να γραφτείτε εύκολα στο Newsletter μας ή στο RSS Feed μας.

4 comments so far

  • xalki Says: Ιανουάριος 27, 2009 at 6:49 μμ

    Ωραία εισαγωγή και ωραίο blog.

    Απάντηση
  • Elizabeth Says: Φεβρουάριος 15, 2009 at 7:49 μμ

    Πολύ καλό και ενδιαφέρον.

    Απάντηση
  • Manthos Says: Φεβρουάριος 28, 2009 at 1:47 πμ

    Πολύ χρήσιμα και κατατοπιστικά όλα

    Απάντηση
  • Web Resources.eu Says: Μάρτιος 20, 2010 at 10:02 πμ

    Ένα πολύ καλό άρθρο για αρχάριους και μη !

    Είναι αλήθεια πως όταν υπάρχει τάξη στον κώδικα μας τότε είναι ποιο εύκολο το debuging (όπου χρειάζεται), η συντήρηση και η διαδικασία ανάγνωσης του κώδικα από τρίτους

    Απάντηση

Σχολιάστε

Back to top

Recent comments

  • Ευχαριστούμε για το σχόλιο Ευγενία. Δυστυχώς δεν γνωρίζουμε αν υπάρχει παρόμοια γραμματοσειρά με την ENGLAND HAND στα Ελληνικά.

    10 δωρεάν καλλιγραφικές γραμματοσειρές
  • Πολύ χρήσιμο άρθρο. Ο αλγόριθμος της Google εξελίσσεται και μαζί του και η τέχνη του seo. Θα έλεγα ότι ωθεί τους seo experts σε μια πιο ολιστική προσέγγιση της online παρουσίας των πελατών τους. Αυτο σημαίνει ότι θα πρέπει να εμπλακούν σε θέματα content strategy, branding και social media γιατί η Google συνυπολογίζει όλα αυτά όταν αποφασίζει για το ranking μιας ιστοσελίδας. Ειδικά το content είναι το κλειδί στην νέα εποχή του search engine optimization. Θα πρέπει να δημιουργείται έχοντας στο μυαλό μας κυρίως τον επισκέπτη της ιστοσελίδας μας και λιγότερο τις μηχανές αναζήτησης. Θα πρέπει να προσθέτει πραγματικό value στους αναγνώστες του και ιδεατά να έχει χαρακτηριστικά που να συμβάλλουν στη δημιουργία buzz στα social media. Με τον τρόπο αυτό θα δημιουργηθούν με φυσικό τρόπο

    Google Panda 3.3, Google Venice και 38 επιπλέον αλλαγές στον αλγόριθμο της Google

Latest From Twitter