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

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

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

Περιεχόμενο

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

Τεχνολογίες

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

• Γλώσσες σελίδας: HTML, HTML5, XML, SGML και XHTML
• Αλληλουχία φύλλων ύφους: CSS
• Γλώσσες περιγραφής δεδομένων: JSON
• Γλώσσες προγραμματισμού σεναρίων: Perl, PHP, Python, Ruby
• Πλατφόρμες: ASP και ASP.NET της Microsoft, Java Enterprise της Sun, agile frameworks όπως το 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, συγγραφή, επικοινωνιακός σχεδιασμός, εταιρική ταυτότητα, σχεδιασμός γραφικών, αλληλεπίδραση ανθρώπου-υπολογιστή, αρχιτεκτονική υπολογιστών, σχεδιασμός αλληλεπίδρασης, αγοραλογία, φωτογραφία, βελτιστοποίηση μηχανών αναζήτησης και τυπογραφία.

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

• Γλώσσες σήμανσης: 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 εγγυητών (HTML validators), CSS εγγυητών (CSS validators), κλπ.

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

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

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

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

Περιεχόμενο

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

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

• Web Design and Applications, τα πρότυπα του W3C για το σχεδιασμό ιστοσελίδων. (Αγγλικά)