Κατασκευή ιστοσελίδων

Κατασκευή ιστοσελίδων(αγγλικά:Web development) είναι η διαδικασία δημιουργίας παρουσιάσεων περιεχομένου (συνήθωςυπερκειμένου, ήπολυμέσων), οι οποίες προβάλλονται στον τελικό χρήστη τουΔιαδικτύου, μέσω ενόςπρογράμματος περιήγησης(browser) ή άλλων υπηρεσιών όπως διαδικτυακή τηλεόραση, ιστολόγια (blogs) και RSS Feeds.

Περιεχόμενο

Μπορούν να χρησιμοποιηθούν διάφορες τεχνικές προβολής του περιεχομένου μιας σελίδας, μεταξύ αυτών: κινούμενα σχέδια, γραφιστική, αλληλεπίδραση ανθρώπου-υπολογιστή, μάρκετινγκ, φωτογραφία, βελτιστοποίηση μηχανών αναζήτησης και τυπογραφία.

Τεχνολογίες

Τεχνολογίες που χρησιμοποιούνται στην ανάπτυξη ιστοσελίδων:

• γλώσσες σελίδας:HTMLκαιXHTML
• φύλλα στυλCSS
• γλώσσες περιγραφής δεδομένων:XML,JSON
• γλώσσες προγραμματισμού σεναρίων:Perl,PHP,Python,Ruby
• πλατφόρμες:ASPκαιASP.NETτηςMicrosoft,Java EnterpriseτηςSun,agileframeworks όπως τοDjangoκαι τοRuby on Rails
• συγγραφή κώδικα στην πλευρά του πελάτη:Javascript

Σχεδιασμός Σελίδων Ιστού (Web Design)

Ο σχεδιασμός στο Διαδίκτυο αφορά την ικανότητα δημιουργίας παρουσιάσεων περιεχομένου (συνήθως κειμένου ή πολυμέσων) οι οποίες φτάνουν στον τελικό-χρήστη μέσω του Παγκόσμιου Ιστού, με τη χρήση λογισμικού όπως ένας φυλλομετρητής (web browser) ή άλλου λογισμικού σχεδιασμένου για το διαδίκτυο όπως η τηλεόραση μέσω διαδικτύου, κινητών τηλεφώνων κλπ.

Η ιστοσελίδα είναι ένα ηλεκτρονικό αρχείο ή ένα σύνολο από ηλεκτρονικά αρχεία που υπάρχουν σε έναν ή και περισσότερους εξυπηρετητές (server/servers) και παρουσιάζει κείμενα και εφαρμογές πολυμέσων στον τελικό-χρήστη. Τέτοια στοιχεία όπως κείμενο, εικόνες (σύμφωνα με τα πρότυπαSVG,BMP,GIF,JPEGήPNG) και φόρμες μπορούν να τοποθετηθούν στη σελίδα με τη χρήση χρήση γλωσσών σήμανσης υπερκειμένου όπωςHTML/XHTML/XML. Η αναπαραγωγή πιο σύνθετων πολυμέσων (ανυσματικών γραφικών, βίντεο, ήχων, γραφικών με ενσωματωμένο ήχο και εικόνα) μπορεί να γίνει με πρόσθετα (plug-ins) όπως το Flash, το QuickTime, το περιβάλλον χρόνου εκτέλεσης Java, κ.α ή με τεχνολογίες όπως οι γλώσσες σήμανσης (X)HTML5,XMLκαιMathML, και το πρότυπο φύλλων στυλCSS 3.

Οι καινούριες εκδόσεις των προγραμμάτων περιήγησης (Internet Explorer 7, 8, Firefox 3.6, safari, chromium κλπ) που ακολουθούν τα W3C πρότυπα οδήγησαν σε μια ευρεία αποδοχή και χρήση τωνXHTML/XMLσε συνδυασμό με τα CSS (Cascading Style Sheets) για την τοποθέτηση και διαχείριση των στοιχείων και αντικειμένων της ιστοσελίδας. Τα τελευταία πρότυπα στοχεύουν στο να αποκτήσουν τα προγράμματα περιήγησης την δυνατότητα να προσφέρουν μια ευρεία γκάμα επιλογής πολυμέσων και πρόσβασης στους πελάτες χωρίς τη χρήση των πρoσθέτων (plug-ins).

Γενικότερα οι ιστοσελίδες διαχωρίζονται σε στατικές και δυναμικές:

• Οι στατικές δεν αλλάζουν περιεχόμενο και διάταξη (layout) με οποιοδήποτε αίτημα εκτός και αν ο προγραμματιστής αναβαθμίσει (update) τη σελίδα. Μια απλήHTMLσελίδα είναι παράδειγμα στατικού περιεχομένου.
• Οι δυναμικές προσαρμόζουν το περιεχόμενο και/ή την εμφάνισή τους σύμφωνα με την καταχώρηση/αλληλεπίδραση ή τις αλλαγές του τελικού χρήστη στο περιβάλλον προγραμματισμού (χρήστης, ώρα, τροποποιήσεις στη βάση δεδομένων, κτλ) Το περιεχόμενο μπορεί να αλλάζει στον υπολογιστή του τελικού-χρήστη με τη χρήση των γλωσσών προγραμματισμού που εκτελούνται στον υπολογιστή του χρήστη (JavaScript,VBScript,Actionscript, etc.). Το περιεχόμενο στις δυναμικές σελίδες συχνά μεταφράζεται στον εξυπηρετητή (server) μέσω γλωσσών προγραμματισμού που εκτελούνται στονεξυπηρετητή(Perl,PHP,ASP,JSP,ColdFusion,.NETκτλ).

Με την συνεχόμενη ειδίκευση στην τεχνολογίας της Πληροφορικής δημιουργείται η ανάγκη διαχωρισμού της Σχεδιασμού Ιστοσελίδων από την Προγραμματιστή Ιστοσελίδων.

Για τη διαδικασία σχεδιασμού μιας ιστοσελίδας, μιας εφαρμογής ή ενός πολυμέσου για το διαδίκτυο μπορεί να συνδυάζονται πολλοί κλάδοι όπως animation, συγγραφή, επικοινωνιακός σχεδιασμός, εταιρική ταυτότητα, σχεδιασμός γραφικών, αλληλεπίδραση ανθρώπου-υπολογιστή, αρχιτεκτονική υπολογιστών, σχεδιασμός αλληλεπίδρασης, marketing, φωτογραφία, βελτιστοποίηση μηχανών αναζήτησης και τυπογραφία.

Τα εργαλεία και οι τεχνολογίες που χρησιμοποιούνται περιλαμβάνουν μεταξύ άλλων:

• Γλώσσες σήμανσης:HTML,XHTML,XML
• Γλώσσες φύλλων στυλ:CSS,XML
• Σενάρια στον πελάτη (Client-side scripting):JavaScript
• Σενάρια στον εξυπηρετητή (Server-side scripting):PHP,ASP,Perl,Ruby/Ruby on Rails
• Τεχνολογίες βάσεων δεδομένων:MySQL,PostgreSQL,Microsoft SQL Server
• Τεχνολογίες πολυμέσων:Flash,Silverlight

Οι ιστοσελίδες μπορούν να είναι στατικές ή δυναμικές. που αναπροσαρμόζουν αυτόματα το περιεχόμενό τους ή την εμφάνισή τους βασιζόμενες σε μια ποικιλία παραγόντων, όπως μια καταχώρηση από τον τελικό-χρήστη, μια καταχώρηση ή αλλαγή στο περιβάλλον προγραμματισμού από τον χειριστή της ιστοσελίδας ( όπως εν παραδείγματι μια μορφοποίηση της βάσης δεδομένων).

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

Προσβασιμότητα Ιστοσελίδων

Για να είναι προσβάσιμη μια ιστοσελίδα θα πρέπει να ακολουθεί κάποιες αρχές προσβασιμότητας. Αυτές οι αρχές είναι γνωστές ωςWCAGόταν μιλάμε για το περιεχόμενο και μπορούν να ομαδοποιηθούν στις ακόλουθες κατηγορίες.

• Χρήσησημασιολογικής σήμανσης(semantic markup), η οποία προσφέρει μια ενιαία δομή στο αρχείο.
• Τοsemantic markupεπίσης αναφέρεται στην οργάνωση της δομής της ιστοσελίδας αλλά και στην ανακοίνωση/έκδοση/δημιουργία ορισμών των διαδικτυακών υπηρεσιών με τρόπο ώστε να είναι αναγνωρίσιμες από άλλες διαδικτυακές υπηρεσίες σε διαφορετικές ιστοσελίδες. Τα πρότυπα για το semantic web θέτονται βάσειIEEE.
• Χρήση έγκυρωνγλωσσών σήμανσηςπου να ανταποκρίνονται σε ένα δημοσιευμένοDTDήSchema.
• Να παρέχει το ισοδύναμο της πληροφορίας σε κείμενο για κάθε πληροφορία που παρέχεται με γραφικά ή πολυμέσα.
• Να χρησιμοποιεί συνδέσμους ενσωματωμένους στο κείμενο.
• Να μην χρησιμοποιεί πλαίσια.
• ΧρήσηCSSαντί γιαHTMLγια την κατασκευή πινάκων.
• Συγγραφή της σελίδας με τρόπο τέτοιο ώστε όταν ο κώδικας διαβαστεί γραμμή προς γραμμή από user agents (όπως είναι τα screen readers) να παραμένει ευανάγνωστος.

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

Η προσβασιμότητα των ιστοσελίδων αλλάζει επίσης εξαιτίας τωνΣυστημάτων Διαχείρισης Περιεχομένου(Content Management Systems), τα οποία επιτρέπουν να γίνονται αλλαγές στις ιστοσελίδες χωρίς να απαιτείται ιδιαίτερη γνώση από προγραμματισμό.

Η Ανάπτυξή ιστοσελίδων απαιτεί τη συνεργασία πολλών διαφορετικών στοιχείων ώστε το διαδίκτυο να είναι προσβάσιμο σε ανθρώπους με αναπηρίες. Αυτά τα στοιχεία περιλαμβάνουν:

• Περιεχόμενο – η πληροφορία που υπάρχει σε μια ιστοσελίδα ή σε κάποια εφαρμογή του διαδικτύου περιλαμβάνει:
  • Τη φυσική πληροφορία όπως κείμενο, εικόνες και ήχους
  • Κώδικα ή επισήμανση που διευκρινίζει τη δομή, παρουσίαση κλπ.
• Προγράμματα πλοήγησης, προγράμματα αναπαραγωγής πολυμέσων κλπ.
• Υποβοηθητική τεχνολογία, για ορισμένες περιπτώσεις – screen readers, εναλλακτικό πληκτρολόγιο, διακόπτες, προγράμματα σάρωσης κλπ.
• Γνώση του επιπέδου των χρηστών, των εμπειριών τους και σε ορισμένες περιπτώσεις προσαρμοσμένες στρατηγικές με χρήση του διαδικτύου
• Προγραμματιστές-Σχεδιαστές, συγγραφείς κτλ, συμπεριλαμβανομένου Προγραμματιστών με αναπηρίες και χρηστών που συνεισφέρουν στη διαμόρφωση του περιεχομένου
• Συντακτικών εργαλείων – προγραμμάτων που κατασκευάζουν ιστοσελίδες
• Εργαλεία Αξιολόγησης – Εργαλείων αξιολόγησης της Διαδικτυακή Προσβασιμότητας,HTMLεγγυητών (HTMLvalidators),CSSεγγυητών (CSSvalidators), κλπ.

Ιστορικά Στοιχεία

ΟΤιμ Μπέρνερς-Λιδημοσίευσε αυτό που σήμερα θεωρούμε ότι ήταν η πρώτη ιστοσελίδα των Αύγουστο του 1991. Ο Τιμ Μπέρνερς-Λι ήταν ο πρώτος που συνδύασε τη Διαδικτυακή επικοινωνία (μέσω της οποίας μετέφερε την ηλεκτρονική αλληλογραφία και τοUsenetεπί δεκαετίες) με υπερκείμενο (Hypertext) (το οποίο επίσης υπήρχε για δεκαετίες με περιορισμένες δυνατότητες στην αναζήτηση πληροφοριών οι οποίες ήταν αποθηκευμένες σε έναν μόνο υπολογιστή). Οι ιστοσελίδες γράφονται σε γλώσσες σήμανσης κειμένου (markup languages) που ονομάζονταιHTML. Οι προγενέστερες εκδόσεις τηςHTMLήταν περιορισμένων δυνατοτήτων, μόνο για να δίνουν στην ιστοσελίδα τη βασική της δομή (Επικεφαλίδες και παραγράφους), και τη δυνατότητα να χρησιμοποιούν υπερκείμενο. Αυτή ήταν μια νέα μορφή επικοινωνίας διαφορετική από τις ήδη υπάρχουσες-οι χρήστες μπορούν να οδηγηθούν σε άλλες σελίδες με συνεχόμενα συνδέσμων (hyperlinks).

Σχεδιασμός Ιστοσελίδων

Ο σκοπός του σχεδιασμού στο Διαδίκτυο είναι πολυσύνθετος αλλά βασικός κατά την εφαρμογή του. Πριν τη δημιουργία και το «ανέβασμα» μιας ιστοσελίδας είναι σημαντικό να σχεδιαστεί ακριβώς ότι είναι αναγκαίο για την ιστοσελίδα. Είναι πολύ σημαντικό να αποφασιστούν, το κοινό στο οποίο θα απευθύνεται, ο σκοπός της δημιουργίας της και το περιεχόμενο της.

Περιεχόμενο

Ο σχεδιασμός που αφορά το διαδίκτυο είναι κατά μία έννοια παρόμοιος με την κλασσική τυπογραφία. Κάθε ιστοσελίδα είναι ένα σύνολο αναπαραγόμενων πληροφοριών, όπως ένα βιβλίο και κάθε σελίδα της ιστοσελίδας είναι το αντίστοιχο της σελίδας ενός βιβλίου. Ωστόσο στοweb designχρησιμοποιείται ένα πλαίσιο εργασίας (framework) βασισμένο σε ένα ψηφιακό κώδικα και σε μια τεχνολογία απεικονίσεων για να δημιουργήσει και να διατηρήσει ένα περιβάλλον που θα διανέμει την πληροφορία σε πολλαπλές μορφές αρχείων (formats) όπως pdf, html, doc, κλπ. Οι δυνατότητες τουweb designτο καθιστούν αδιαμφισβήτητα ως τον πλέον κομψό και σύνθετα αναπτυσσόμενο τρόπο επικοινωνίας στο σημερινό κόσμο.

Εξωτερικοί σύνδεσμοι

• Web Design and Applications, W3C.(αγγλικά)
• w3schools.com, εκπαιδευτικό υλικό πάνω στις τεχνολογίες ανάπτυξης ιστοσελίδων.(αγγλικά)