DHTML: Δυναμική κωδικοποίηση στο Web
DHTML αντιπροσωπεύει ρεynamic HyperΤext Μarkup μεγάλοanguage και μπορεί να οριστεί ως η τέχνη της δημιουργίας δυναμικών ιστοσελίδων HTML συνδυάζοντας HTML με Javascript και Cascading Style Sheets (CSS). Σε αντίθεση με τις άλλες τέσσερις παραλλαγές HTML που μελετήθηκαν στα προηγούμενα τέσσερα άρθρα αυτής της σειράς, το DHTML δεν είναι ένα πρότυπο που καθορίζεται από την Κοινοπραξία W3. Αντίθετα, είναι ένας όρος που χρησιμοποιήθηκε από το Netscape και τη Microsoft για να περιγράψει τις νέες τεχνολογίες που θα υποστήριζαν οι φυλλομετρητές γενιάς 4.x "(W3 Consortium). Το HTML 4.0 παρουσίασε για πρώτη φορά δύο σημαντικά στοιχεία που είναι εγγενή στη δομή του DHTML:
  • Διακοσμητικά φύλλα στυλ (CSS)
  • Μοντέλα αντικειμένου εγγράφου (DOM)

Δημιουργία δυναμικού κώδικα

Το CSS παρέχει μοντέλα στυλ και διάταξης, ενώ το DOM παρέχει μοντέλα περιεχομένου εγγράφων για έγγραφα HTML. Το JavaScript και το VBScript προσθέτουν τη δυνατότητα να γράφουν κώδικα δέσμης ενεργειών για τον έλεγχο στοιχείων HTML. Συνδυασμένα, αυτά τα τρία στοιχεία προσθέτουν σε δυναμικές σελίδες HTML. Ένα σημαντικό αποτρεπτικό στοιχείο είναι η ασυμβατότητα του προγράμματος περιήγησης - το Netscape και η Microsoft εξακολουθούν να μην έχουν συμφωνήσει σε ό, τι πρέπει να εφαρμόσουν στα προγράμματα περιήγησής τους: συνεπώς, η σύνταξη σελίδων DHTML που λειτουργούν καλά και στα δύο προγράμματα περιήγησης μπορεί να είναι πολύ δύσκολη. Για να δείτε μόνοι σας, μπορείτε να αποκτήσετε πρόσβαση στα πρότυπα Microsoft και Netscape online:
  • Βιβλιοθήκη MSDN στη Microsoft
  • Δυναμική HTML στο Netscape Communicator
"Το DHTML υπερέχει στη δημιουργία εφέ χαμηλού εύρους ζώνης που βελτιώνουν τη λειτουργικότητα μιας ιστοσελίδας. Μπορεί να χρησιμοποιηθεί για τη δημιουργία κινούμενων εικόνων, παιχνιδιών, εφαρμογών, να προσφέρει νέους τρόπους πλοήγησης σε ιστότοπους και να δημιουργήσει εκτός αυτής τις διατάξεις παγκόσμιας σελίδας που απλά δεν είναι δεν είναι δυνατή μόνο με HTML Αν και πολλά από τα χαρακτηριστικά του DHTML μπορούν να αναπαραχθούν είτε με Flash είτε με Java, το DHTML παρέχει μια εναλλακτική λύση που δεν απαιτεί plugins και ενσωματώνει άψογα σε μια ιστοσελίδα. "(Dan Steinman, 1998).

Προκειμένου να γίνει κατανοητή η πολυπλοκότητα της DHTML, είναι χρήσιμο να εξετάσουμε λεπτομερέστερα τα συστατικά της.

Διακοσμητικά φύλλα στυλ

Τα CSS είναι εξελιγμένοι κώδικες που χωρίζουν το περιεχόμενο ιστού από το web desplay - το στυλ, τη θέση, τα χρώματα, τις γραμματοσειρές κ.ο.κ. Η τοποθέτηση CSSP ή CSS επιτρέπει τον έλεγχο των επιπέδων pixel πάνω από την τοποθέτηση στοιχείων HTML. Ο διαχωρισμός του στυλ παρουσίασης των εγγράφων ιστού από το περιεχόμενο με το CSS2 (επίπεδο CSS 2) απλοποιεί τη δημιουργία και την συντήρηση ιστοσελίδων. "Το CSS2 υποστηρίζει φύλλα στυλ για συγκεκριμένα μέσα ενημέρωσης, έτσι ώστε οι συντάκτες να προσαρμόζουν την παρουσίαση των εγγράφων τους σε οπτικά προγράμματα περιήγησης, ακουστικές συσκευές, εκτυπωτές, συσκευές braille, φορητές συσκευές κλπ. Αυτή η προδιαγραφή υποστηρίζει επίσης την τοποθέτηση περιεχομένου, τις γραμματοσειρές που μπορούν να φορτωθούν, διεθνοποίηση, αυτόματους μετρητές και αρίθμηση και ορισμένες ιδιότητες που σχετίζονται με το περιβάλλον χρήστη "(W3 Consortium). Το W3C προσφέρει ένα εξαιρετικό φροντιστήριο για να μάθει CSS2 που ονομάζεται, Προδιαγραφή CSS2.

JavaScript

Το JavaScript είναι μια ειδική γλώσσα με βάση το πρόγραμμα περιήγησης που χρησιμοποιείται για τον έλεγχο των στοιχείων HTML και την προσθήκη λειτουργιών σε φόρμες, πλαίσια, παράθυρα, μετακίνηση εικόνων, έλεγχοι ήχου και βίντεο και χειρισμό DHTML. Το Netscape ονομάστηκε για πρώτη φορά αυτό το scripting JavaScript, οπότε η Microsoft ήρθε με τον όρο JScript για την ιδιαίτερη μάρκα scripting. Το αποτέλεσμα? Δύο εκδόσεις της JavaScript που μπορεί να είναι ενοχλητικά ασύμβατες. Για να εξερευνήσετε αυτό το ζήτημα περισσότερο, επισκεφθείτε το Netscape's Κεντρική JavaScript και της Microsoft JScript σελίδα πόρων. Το μυστικό των δυναμικών αποτελεσμάτων του περιεχομένου JavaScripted είναι η χρήση αντικειμένων επιπέδου. Τα αντικείμενα επιπέδου μεταβάλλουν το κείμενο όταν το ποντίκι κυλά πάνω του. κάνει εικόνες ή κείμενο να μετακινούνται γύρω από την ιστοσελίδα. Επίσης, τα αναπτυσσόμενα μενού μειώνονται. Τα αντικείμενα στρώματος είναι διατεταγμένα σε ετικέτες div, με καθοριστικά χαρακτηριστικά όπως χρώμα, θέση και ορατότητα.

Βάζοντας τους μαζί

Το DHTML εφαρμόζεται συνήθως για την επίτευξη τριών στόχων:
  • Θέση ή τοποθετώντας μπλοκ περιεχομένου στη σελίδα και μετακινώντας τα γύρω
  • Τροποποιήσεις στυλ που αλλάζουν την εμφάνιση και την αίσθηση της σελίδας
  • Διαχείριση συμβάντων ή τη συσχέτιση των συμβάντων των χρηστών με αλλαγές στη θέση ή άλλες τροποποιήσεις στυλ
Στις νεότερες εκδόσεις του Internet Explorer και του Netscape (εκδόσεις 5, 6 και άνω), το DOM γίνεται ο κώδικας επιλογής για τις περισσότερες κωδικοποιήσεις DHTML. Μόλις κατακτηθεί, το DOM μπορεί να βοηθήσει τους σχεδιαστές ιστοσελίδων να χειριστούν, να προσθέσουν, να διαγράψουν και να επεξεργαστούν την κωδικοποίηση εγγράφων που σχετίζονται με όλα τα στυλ, τα χαρακτηριστικά (όπως ένα href) και στοιχεία (όπως ετικέτες html) στη σελίδα. Αυτό σημαίνει ότι κάθε ετικέτα και χαρακτηριστικό κοινό σε ένα έγγραφο html είναι προσβάσιμο μέσω του DOM. Προς το παρόν, τα επίπεδα μοντέλου αντικειμένων εγγράφου 0 & 1 συνιστώνται από το W3C. Το επίπεδο 2 είναι επίσης στα έργα, αλλά δεν έχει ακόμη προωθηθεί ως πρότυπο για την κωδικοποίηση DHTML.

Μια χρήσιμη ομάδα μαθημάτων διατίθεται μέσω HTML Goodies, που ονομάζεται DHTML και Tutorial για το Layer.

Οι σύνδεσμοι που περιλαμβάνονται σε αυτό το άρθρο προσφέρουν εισαγωγές και οδηγίες για να ξεκινήσετε το ταξίδι σας στην αντιμετώπιση αυτής της νέας εξέλιξης στην κωδικοποίηση html.Κάθε γρήγορη αναζήτηση στο Google θα φέρει πολλούς περισσότερους πόρους στην προσοχή σας, άμεσα διαθέσιμος στα χέρια σας. Καθώς οι κατασκευαστές των προγραμμάτων περιήγησης εργάζονται για την ασυμβατότητά τους και η χρήση υψηλότερων περιηγητών έκδοσης γίνεται πιο συνηθισμένη, το DHTML θα καταστεί υποχρεωτικό μέρος της διαδρομής οποιουδήποτε επαγγελματικού σχεδιαστή.

HTML Highlight Series Series

ΜΕΡΟΣ 1: Πρέπει ένας αξιόπιστος σχεδιαστής να γνωρίζει HTML;
ΜΕΡΟΣ 2Ο: HTML 3.2 - Η γέννηση του Wilbur
ΜΕΡΟΣ 3: HTML 4.0 ΚΑΙ 4.01 - Περισσότερα από ένα καλό πράγμα!
ΜΕΡΟΣ 4: XHTML: Κωδικοποίηση ιστού για εκλεπτυσμένο σχεδιασμό
ΜΕΡΟΣ 5: DHTML: Δυναμική κωδικοποίηση στο Web




Οδηγίες Βίντεο: Dynamic web sites - Δυναμικές ιστοσελίδες (Ενδέχεται 2024).