ΤΕΧΝΟΛΟΓΙΚΟ ΕΚΠΑΙΔΕΥΤΙΚΟ ΙΔΡΥΜΑ ΠΑΤΡΑΣ. Μελέτη και συγκριτική αξιολόγηση των πιο σημαντικών πλατφόρμων ανάπτυξης Web εφαρμογών

Transcript

1 ΤΕΧΝΟΛΟΓΙΚΟ ΕΚΠΑΙΔΕΥΤΙΚΟ ΙΔΡΥΜΑ ΠΑΤΡΑΣ ΠΑΡΑΡΤΗΜΑ ΠΥΡΓΟΥ ΤΜΗΜΑ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΜΜΕ ΠΤΥΧΙΑΚΗ ΕΡΓΑΣΙΑ: Μελέτη και συγκριτική αξιολόγηση των πιο σημαντικών πλατφόρμων ανάπτυξης Web εφαρμογών ΕΠΙΜΕΛΕΙΑ: Ξένος Απόστολος Γαρουφαλίδης Χρήστος Εποπτεύων Καθηγητές: Σκλάβος Νίκος, Χριστοδούλου Σωτήρης ΠΥΡΓΟΣ - ΙΟΥΝΙΟΣ 2010

2 ΠΕΡΙΕΧΟΜΕΝΑ ΠΕΡΙΛΗΨΗ (Ελληνικά)... 3 ΠΕΡΙΛΗΨΗ (Αγγλικά)... 4 ΚΕΦΑΛΑΙΟ 1 Διαδίκτυο και Web εφαρμογές 1.1 Η ιστορία του Διαδικτύου Διαδίκτυο Το Διαδίκτυο στον 21 ο αιώνα Πλαίσιο Web εφαρμογής Ιστορία Web εφαρμογών Αρχιτεκτονικές Χαρακτηριστικά Λίστα πλαισίων Web εφαμοργών Aνάπτυξη ιστοσελίδων Τεχνικές για εύχρηστες web εφαρμογές ΚΕΦΑΛΑΙΟ 2 Συστήµατα Διαχείρισης Περιεχοµένου (CMS) 2.1 Εισαγωγή στα CMS Web CMS Πως γινόταν την δεκαετία του Πως γίνεται σήμερα Πως γίνεται με ένα Web CMS Πλεονεκτήματα χρήσης ενός Web CMS.. 26 ΚΕΦΑΛΑΙΟ 3 Είδη Web CMS 3.1 Κλειστού κώδικα (closed source) Ανοιχτού κώδικα (open source) Μειονεκτήματα των Commercial Closed Source Web CMS έναντι των Open Source Web CMS Πλεονεκτήματα των Commercial Closed Source Web CMS έναντι των Open Source Web CMS 30 ΚΕΦΑΛΑΙΟ 4 Drupal 4.1 Τι είναι Απο που προήλθε Σχεδίαση Μονάδες Κριτική Διανομές Χαρακτηριστικά ΚΕΦΑΛΑΙΟ 5 Ruby on Rails 5.1 Τι είναι Ιστορία Τεχνική επισκόπηση

3 5.4 Δομή πλαισίου Φιλοσοφία και σχεδίαση Πρόσφατε εξελίξεις Trademarks Κριτική Χαρακτηριστικά ΚΕΦΑΛΑΙΟ 6 Joomla 6.1 Τι είναι Ιστορία Ανάπτυξη Κοινότητα Χαρακτηριστικά ΚΕΦΑΛΑΙΟ 7 Υλοποίηση 7.1 Υλοποίηση Joomla Υλοποίηση Drupal Υλοποίηδη WaterCMS (Ruby) Πίνακες κριτηρίων και Συμπεράσματα.. 93 ΒΙΒΛΙΟΓΡΑΦΙΑ 2

4 ΠΕΡΙΛΗΨΗ Σκοπός της παρούσας πτυχιακής εργασίας είναι η μελέτη καθώς και η συγκριτική αξιολόγηση των πιο σημαντικών πλατφόρμων ανάπτυξης web εφαρμογών. Για την υλοποίηση της εργασίας, επιλέχθηκαν τρεις από τις σημαντικότερες πλατφόρμες συστήματος διαχείρησης περιεχομένου (CMS). 1. Joomla 2. Drupal 3. Ruby on Rails Ο αναγνώστης μαθαίνει για το διαδίκτυο, την ιστορία του και πως εξελίχθηκε αυτό από την αρχή της δημιουργίας του μέχρι και σήμερα. Ενημερώνεται για τις web εφαρμογές και τις ιστοσελίδες, τον τρόπο σχεδίασης τους και πως ωφελούν τον χρήστη. Οι CMS πλατφόρμες χρησιμοποιούνται για την δημιουργία ιστοσελίδων στο διαδίκτυο. Με τη χρήση πληροφορίων από το διαδίκτυο κάνουμε μια εκτενή αναφορά για τις πλατφόρμες συστήματος διαχείρισης περιεχομένου ανοιχτού και κλειστού κώδικα και ιδιαίτερα για τις τρεις που έχουμε ασχοληθεί. Με απλά διαγράμματα δείχνουμε πως κατασκευάζονταν οι ιστοσελίδες παλαιότερα και πως τώρα, καθώς και τα πλεονεκτήματα χρήσης αυτών των πλατφόρμων. Τέλος δημιουργήσαμε 3 ιστοσελίδες, καθεμία με μία από τις CMS πλατφόρμες που ασχοληθήκαμε και συγκρίναμε τις δυνατότητες τους παραθέτοντας πίνακες σύγκρισης καθώς και περιγραφή των σημαντικότερων πλεονεκτημάτων και μειονεκτημάτων τους. 3

5 SUMMARY The purpose of this thesis is to study and benchmarking of the most significant web application development platforms. We chose 3 of the most significant content management system platforms (CMS), in order to implement our study. These 3 platforms are the following: 1. Joomla 2. Drupal 3. Ruby on Rails The reader learns about Internet, it s history and how it has been developed since it s creation. He is being informed about web applications and their benefits as well as websites and the way of their creation. CMS platforms are being used for website development. Using information from web, we made an extensive report for many CMS platforms and especially the 3 we study for. Using simple diagrams we show the way of constructing websites along with their advantages. At last we created 3 websites using 3 different cms and we compared their features,quoting comparison tables and also we desciribed their most important advantages and disadvantages. 4

6 1 Διαδίκτυο και Web εφαρμογές 1.1 Η Iστορία του Διαδικτύου Η αρχή έγινε από τον Paul Baran, ερευνητή της εταιρίας Rand, ο οποίος σχεδίασε ένα δίκτυο επικοινωνίας υπολογιστών χωρίς κεντρικό άξονα, κεντρικούς διακόπτες, ούτε καν κεντρική διεύθυνση. Το δίκτυο στηριζόταν στην υπόθεση ότι οι συνδέσεις του δικτύου μεταξύ των πόλεων είναι πλέον αναξιόπιστες. Οι ιδέες του Baran οδήγησαν το 1969 στη δημιουργία του πειραματικού δικτύου ARPAnet, από τα αρχικά της υπηρεσίας ARPA, Advanced Research Projects Agency (που αργότερα ονομάσθηκε DARPA, Defence Advanced Projects Agency), του αμερικανικού Πενταγώνου. Μετά την έναρξη λειτουργίας του δικτύου, και άλλα πειραματικά δίκτυα συνδέθηκαν με το ARPAnet χρησιμοποιώντας την τεχνολογία των δικτυώσεων της DARPA. Τα περισσότερα από αυτά είχαν σχέση με στρατιωτική έρευνα, ενώ συχνά συνδέονταν και πανεπιστήμια. Οι ερευνητές αυτοί, ενώ βρίσκονταν σε απομακρυσμένα κέντρα υπολογιστών, μπορούσαν μέσα από το δίκτυο να μοιράζονται μεταξύ τους προγράμματα, βάσεις δεδομένων αλλά και σκληρούς δίσκους υπολογιστών. Το 1971 είχαν ήδη συνδεθεί 23 κόμβοι (hosts), ενώ το 1980 έγιναν 200, με παράλληλη δημιουργία των πρώτων διεθνών συνδέσεων. Στις αρχές του 1980 το ARPAnet χωρίστηκε σε δύο τμήματα, τα οποία ωστόσο επικοινωνούσαν μεταξύ τους. Το πρώτο ήταν αποκλειστικά αφιερωμένο σε στρατιωτικές εφαρμογές και ονομαζόταν MILNET. Το άλλο τμήμα, που περιλάμβανε όλες τις υπόλοιπες χρήσεις, αρχικά ονομάστηκε DARPA Internet, για να επικρατήσει με την πάροδο του χρόνου η σύντομη ονομασία "δίκτυο του Internet". Η διασύνδεση των υπολογιστών άρχισε να γίνεται ιδιαίτερα δημοφιλής στα τέλη της δεκαετίας του '70 και στις αρχές της δεκαετίας του '80, 5

7 οπότε και δημιουργήθηκαν τρία μεγάλα δίκτυα: το ΒΙΤΝΕΤ (Because It's Time Network), το CSNET(Computer Science Network) και το NSFnet (National Science Foundation Network). Το τελευταίο, εγκαθιστώντας μία γραμμή των 56 Kbps, έγινε ο βασικότερος κορμός (backbone) του Διαδικτύου. Από το 1983 άρχισε να χρησιμοποιείται το πρωτόκολλο TCP/IP (Transmission Control Protocol/Internet Protocol), που αναπτύχθηκε στη δεκαετία του '70 από την DARPA. Από τις αρχές όμως της δεκαετίας του '80, ο Διεθνής Οργανισμός Προτύπων ISO 70 (International Standards Organization) ανέπτυξε περιορισμένης χρήσης πρωτόκολλα Ανοιχτής Διασύνδεσης Συστημάτων OSI (Open Systems Interconnection). Παράλληλα, η ανάπτυξη του λειτουργικού συστήματος UNIX διευκόλυνε την επέκταση των διασυνδέσεων μέσω του UUCP (UNIX-to- UNIX Copy Program.) 1.2 Διαδίκτυο Το Διαδίκτυο είναι οπτικοποιηµένη αναπαράσταση διαφόρων διαδροµών (routes) διαµέσου ενός τµήµατος του Ίντερνετ. Στην γενική του έννοια, διαδίκτυο (ίντερνετ) είναι ένα δίκτυο ηλεκτρονικών υπολογιστών που (δια)συνδέει άλλα δίκτυα. Ο αντίστοιχος αγγλικός όρος internet προκύπτει από τη σύνθεση λέξεων inter-network. Στην πιο εξειδικευµένη και περισσότερο χρησιµοποιούµενη του µορφή, µε τους όρους Διαδίκτυο, Ιντερνέτ ή Ίντερνετ (µε κεφαλαίο το αρχικό γράµµα) περιγράφεται το παγκόσµιο πλέγµα διασυνδεδεµένων υπολογιστών και των υπηρεσιών και πληροφοριών που παρέχει στους χρήστες του. Το Διαδίκτυο χρησιµοποιεί µεταγωγή πακέτων (packet switching) και τη στοίβα πρωτοκόλλων TCP/IP. Σήµερα, ο όρος διαδίκτυο κατέληξε να αναφέρεται στο παγκόσµιο αυτό δίκτυο. Για να ξεχωρίζει, το παγκόσµιο αυτό δίκτυο γράφεται µε κεφαλαίο το αρχικό "Δ". Η τεχνική της διασύνδεσης δικτύων µέσω µεταγωγής πακέτων και της στοίβας πρωτοκόλλων TCP/IP ονοµάζεται διαδικτύωση. 6

8 1.3 Το διαδίκτυο στον 21ο αιώνα Το Διαδίκτυο δεν αποτελεί πλέον ένα μέσο επικοινωνίας και ανταλλαγής δεδομένων αποκλειστικά μεταξύ φοιτητών και ερευνητών. Έχει επεκταθεί και εισβάλει στην καθημερινότητα όλων. Ήδη μιλάμε για ηλεκτρονικό εμπόριο, τηλε-εργασία, τηλε-εκπαίδευση, τηλε-ϊατρική. Ο πλανήτης είναι, με λίγα λόγια, δικτυωμένος. Και με το πέρασμα του χρόνου θα δικτυώνεται ολοένα και περισσότερο. Το Διαδίκτυο συγκροτείται από πολύπλευρα εµπορικά συµβόλαια (π.χ. οµότιµες συµφωνίες) και από τεχνικές προδιαγραφές ή πρωτόκολλα που περιγράφουν την ανταλλαγή δεδοµένων στο δίκτυο. Τα πρωτόκολλα αυτά µορφοποιούνται µε συζητήσεις µέσα στο Internet Engineering Task Force (IETF) και τις οµάδες εργασίας του, οι οποίες είναι ανοιχτές για δηµόσια συµµετοχή και κριτική. Αυτές οι επιτροπές παράγουν κείµενα που είναι γνωστά ως Αιτήµατα για Σχολιασµό (ΑΓΣ). Ορισµένα ΑΓΣ εγείρονται από το Συµβούλιο Αρχιτεκτονικής του Διαδικτύου (IAB). 1.4 Πλαίσιο Web εφαρμογής (Web application framework) Το πλαίσιο web εφαρμογής είναι ένα πλαίσιο λογισμικού, το οποίο είναι σχεδιασμένο να υποστηρίζει την ανάπτυξη των δυναμικών ιστοσελίδων, των Web εφαρμογών και των υπηρεσιών web. To πλαίσιο στοχεύει να αμβλύνει την διαδικασία που σχετίζεται με τις κοινές δραστηριότητες που εκτελούνται στην ανάπτυξη του Web. Για παράδειγμα, πολλά πλαίσια προμηθεύουν πληροφορίες για πρόσβαση σε βάση δεδομένων, για πρότυπα πλαίσια, για διαχείριση τομέα και συχνά παροτρύνουν την χρήση ήδη χρησιμοποιημένου λογισμικού ή κώδικα. 1.5 Ιστορία Web εφαρμογών H σχεδίαση του παγκόσμιου ιστού δεν ήταν αισθητά δυναμική, καθώς το αρχικό υπερκείμενο απαρτιζόταν απο χειρόγραφο κώδικα HTML, που είχε εκδοθεί στους Web servers. Όλες οι μετατροπές στις ιστοσελίδες, έπρεπε να εκτελεστούν από τον δημιουργό τους. Το Common Gateway Interface (CGI) δημιουργήθηκε για να διασυνδέει τις εξωτερικές 7

9 εφαρμογές με τους Web servers, καθώς και να προσδώσει μια δυναμική στην ιστοσελιδά που θα αντικατοπτρίζει τις εισροές του χρήστη. Το CGI όμως μπορούσε να επηρεάσει δυσμενώς την φόρτωση του server μολονότι κάθε αίτημα έπρεπε να ξεκινήσει μια ξεχωριστή διαδικασία. Οι προγραμματιστές για να παρέχουν υψηλής διακίνησης Web εφαρμογές, ζητούσαν την ενοποίηση τους με τους Web servers. O Αpache HTTP server, για παράδειγμα, υποστηρίζει μονάδες που μπορούν να επεκτείνουν έναν Web server με αυθαίρετες εκτελέσεις κώδικα (όπως το mod perl) ή να πρωωθήσει συγκεκριμένες αιτήσεις σε server που μπορεί να χειριστεί δυναμικό περιεχόμενο (όπως το mod jk). Μερικοί Web servers (όπως ο Apache Tomcat) ήταν ειδικά σχεδιασμένοι για να χειρίζονται δυναμικό κείμενο εκτελώντας κώδικα γραμμένo σε γλώσσες όπως η Java. Σχεδόν την ίδια χρονική περίοδο, νέες γλώσσες αναπτύσσονταν ειδικά για χρήση στο διαδίκτυο, όπως οι ColdFusion, php και Active server pages. Παράλληλα ενώ η πλειοψηφεία των διαθέσιμων γλωσσών που χρησιμοποιήθηκαν για τη δημιουργία δυναμικών ιστοσελίδων, έχουν βιβλιοθήκες που βοηθούν με συχνές εργασίες, οι Web εφαρμογές συχνά απαιτούν συγκεκριμένες βιβλιοθήκες που είναι χρήσιμες στις εφαρμογές, όπως η δημιουργία HTML κώδικα (για παράδειγμα, JavaServer Faces). Τελικά εμφανίστηκαν «full stack» frameworks, που συχνά συγκέντρωναν πολλαπλές βιβλιοθήκες χρήσιμες για επέκταση του Web σε ένα ενιαίο λειτουργικό έτοιμο για χρήση. Παραδείγματα είναι τα JavaEE (Servlets), WebObjects, OpenACS και το Ruby on Rails. 1.6 Αρχιτεκτονικές Model view controller (MVC) Πολλά πλαίσια ακολουθούν το πρότυπο αρχιτεκτονικής του Model View Controller (MVC) για να διαχωρίσουν το υπόδειγμα στοιχείων με επιχειρηματικούς κανόνες από την διεπαφή με τον χρήστη. Γενικά αυτό 8

10 θεωρείται ως μια καλή εξάσκηση καθώς καταμετρεί τον κώδικα, προωθεί την επανάχρηση του και επιτρέπει να εφαρμοστούν πολλαπλές διεπαφές. Push-based vs Pull-based Τα περισσότερα MVC πλαίσια ακολουθούν μια push-based αρχιτεκτονική. Αυτά τα πλαίσια χρησιμοποιούν πράξεις που κάνουν την απαιτούμενη επεξεργασία και μετά ωθούν την πληροφορία στο οπτικό επίπεδο ώστε να φανούν τα αποτελέσματα. Struts, Django, Ruby on Rails και Spring MVC είναι καλά παραδείγματα αυτής της αρχιτεκτονικής. Μια εναλλακτική σε αυτό είναι η pull-based αρχιτεκτονική, η οποία επίσης ονομάζεται component-based. Αυτά τα πλαίσια ξεκινάνε με το οπτικό επίπεδο, το οποίο μπορεί να «τραβήξει» αποτελέσματα από πολλαπλούς ελεκτές όπως χρειαστεί. Σε αυτήν την αρχιτεκτονική, οι πολλαπλοί ελεκτές έχουν την δυνατότητα να συνδέονται με μια ενιαία όψη. Struts2, Tapestry, JBoss Seam, Wicket και Stripes είναι παραδείγματα της pull-based αρχιτεκτονικής. Content Management Systems Μερικά συστήματα διαχείρισης περιεχομένου έχουν ξεκινήσει να εξαπλώνονται σε μεγαλύτερου επιπέδου πλαίσια Web εφαρμογών. Για παράδειγμα, η κατασκευή του Drupal μας δίνει έναν μικρό πυρήνα, ο οποίος λειτουργεί μέσω των modules που προμηθεύουν λειτουργίες συσχετισμένες με τα πλαίσια Web εφαμοργών. Ιστορικά αυτά τα projects έχουν οροθετηθεί ως συστήματα διαχείρισης περιεχομένου. Οπότε, είναι αμφισβητούμενο αν ή «διαχείριση του περιεχομένου» είναι ο πρωταρχικός σκοπός αυτών των συστημάτων, ειδικά όταν κάποια από αυτά, όπως το SilverStripe, δίνουν ένα πλαίσιο MVC που είναι προσανατολισμένο στην διαχείριση ενός αντικειμένου. Τα πρόσθετα modules ενεργοποιούν αυτά τα συστήματα ώστε να λειτουργούν σαν ολοκληρωμένες εφαρμογές πέρα από τον σκοπό της διαχείρισης περιεχομένου. Τα πρόσθετα modules μπορούν να προμηθεύσουν λειτουργικά APIs, λειτουργικά πλαίσια, πρότυπα κωδικοποίησης και 9

11 πολλές από τις λειτουργίες παραδοσιακά σχετίζονται με τα πλαίσια Web εφαρμογών. 1.7 Χαρακτηριστικά Ασφάλεια Μερικά πλαίσια Web εφαρμογών έχουν πλαίσια πιστοποίησης και εξουσιοδότησης, που καθιστούν ικανό τον Web server να αναγνωρίσει τους χρήστες της εφαρμογής και να περιορίσει την πρόσβαση τους σε κάποιες λειτουργίες βασισμένος σε κάποια συγκεκριμένα κριτήρια. Το Django είναι ένα παράδειγμα που δίνει πρόσβαση σε κάθε σελίδα ανάλογα με τον ρόλο του χρήστη και επίσης προμηθεύει μια διεπαφή Web με τους χρήστες και τους αναθέτει τους ρόλους τους. Πρόσβαση στη βάση δεδομένων και χαρτογράφηση Πολλά πλαίσια Web εφαρμογών δημιουργούν ένα ενοποιημένο API στο σύστημα υποστήριξης της βάσης δεδομένων, που ενεργοποιεί τις Web εφαρμογές να δουλέψουν με μια ποικιλία από βάσεις δεδομένων χωρίς αλλαγές κώδικα και επιτρέποντας τους προγραμματιστές να δουλέψουν με υψηλότερου επιπέδου σχέδια. Για μεγαλύτερη απόδοση, οι συνδέσεις στις βάσεις δεδομένων πρέπει να λειτουργήσουν όπως κάνει για παράδειγμα ο AOLserver. Επιπρόσθετα, κάποια πλαίσια συσχετισμένα με το αντικείμενο, περιέχουν εργαλεία χαρτογράφησης που προμηθεύουν μια προγραμματιστική τεχνική που ονομάζεται Object-Relational Mapping, η οποία θα χωρίσει τα αντικείμενα σε πλειάδες. Άλλα χαρακτηριστικά τα οποία μπορούμε να πάρουμε από τα πλαίσια Web εφαρμογών είναι συναλλαγματική υποστήριξη και μετεγκατάσταση της βάσης δεδομένων. Χαρτογράφηση του URL Οι εγκαταστάσεις χαρτογράφησης URL ενός πλαισίου είναι ο μηχανισμός με τον οποίο τα πλαίσια ερμηνεύουν τα URLs. Μερικά 10

12 πλαίσια, όπως το Django, αντιπαραβάλουν τo προμηθευόμενo URL με πρότυπα που χρησιμοποιούν κανονικές εκφράσεις, τη στιγμή που κάποια άλλα χρησιμοποιούν την επανεγγραφή του URL για να μεταφράσουν το προμηθευόμενο URL, σε μορφή που θα είναι αναγνωρίσιμη από την μηχανή επεξεργασίας. Μια άλλη τεχνική είναι η διασταύρωση γραφήματος που χρησιμοποιεί το Zope, όπου το URL αναλύεται σε βήματα και διασταυρώνεται με το γράφημα του αντικειμένου. Ένα σύστημα χαρτογράφησης που χρησιμοποιεί αντιπαραβολή προτύπων ή επανεγγραφή URL, επιτρέπει να χρησιμοποιηθούν πιο «φιλικά» URLs, αυξάνοντας έτσι την απλότητα της ιστοσελίδας και επιτρέποντας να δώσει καλύτερες ενδείξεις στις μηχανές αναζήτησης. Για παράδειγμα, όταν ένα URL τελειώνει με /page.cgi?cat=science&topic=physics μπορεί απλά να μετατραπεί σε /page/science/physics. Αυτό καθιστά την ανάγνωση του URL πιο εύκολη και προμηθεύει τις μηχανές αναζήτησης με καλύτερες πληροφορίες σχετικά με την κατασκευαστική δομή της ιστοσελίδας. Η προσέγγιση της διασταύρωσης του γραφήματος έχει ως αποτέλεσμα να δημιουργήσει «φιλικά» URLs. Ένα σύντομο URL όπως το /page/science μπορεί να υπάρχει ως προεπιλογή καθώς είναι μια συντομότερη μορφή του /page/science/physics. Πρότυπο συστήματος Web Οι δυναμικές ιστοσελίδες συνήθως αποτελούνται από ένα στατικό μέρος (HTML) και ένα δυναμικό μέρος, το οποίο είναι ο κώδικας που παράγει την HTML. Ο κώδικας αυτός μπορεί να κάνει αυτή την εργασία, βασιζόμενος στις μεταβλητές ενός προτύπου. Το κείμενο που παράγεται μπορεί να εισέλθει από μια βάση δεδομένων, εκ τούτου κάνοντας πιθανή την μείωση του αριθμού των σελίδων σε μια ιστοσελίδα. Ας σκεφτούμε το παράδειγμα ενός αντιπροσώπου ακινήτων που έχει 500 σπίτια για πώληση. Σε μία στατική ιστοσελίδα, ο αντιπρόσωπος θα έπρεπε να δημιουργήσει 500 σελίδες για να μπορέσει να δώσει πληροφορίες για το κάθε σπίτι. Σε μία δυναμική ιστοσελίδα όμως, ο αντιπρόσωπος μπορεί απλά να συνδέσει την σελίδα με μια βάση δεδομένων που έχει 500 καταχωρήσεις. 11

13 Σε ένα πλαίσιο, οι μεταβλητές από την προγραμματιστική γλώσσα μπορούν να εισέλθουν χωρίς την χρήση κώδικα και ως εκ τούτου δεν χρειάζεται η γνώση προγραμματισμού για να μπορέσει κάποιος να ανανεώσει την ιστοσελίδα. Η σύνταξη γίνεται διαθέσιμη για να γίνει διαχωρισμός μεταξύ της HTML και των μεταβλητών. Για παράδειγμα, στο JSP η καρτέλα <c:out> χρησιμοποιείται για να εξάγει μεταβλητές ενώ το Smarty χρησιμοποιεί την {$variable}. Πολλές μηχανές πλαισίων υποστηρίζουν περιορισμένες λογικές καρτέλες, όπως οι IF και FOREACH. Αυτές υπάρχουν για να χρησιμοποιηθούν σε περιπτώσεις που πρέπει να παρθούν αποφάσεις για το επίπεδο παρουσίασης, για να κρατήσουν μια διαχωριστική γραμμή από το λογικό επίπεδο, ή το μοντέλο στο πρότυπο MVC. Caching To Web caching είναι το «κρύψιμο» των Web εγγράφων ώστε να μειωθεί η χρήση του εύρους ζώνης, η φόρτωση του server, και το lag. Η Web cache αποθηκεύει αντίγραφα των εγγράφων που περνάνε μέσα από αυτό. Μεταγενέστερες αιτήσεις μπορούν να βρουν ανταπόκριση από την cache αν πληρούν κάποιες προϋποθέσεις. Μερικά πλαίσια εφαρμογών προμηθεύουν μηχανισμούς για «απόκρυψη» εγγράφων και διαπερνούν διάφορα στάδια της προετοιμασίας της σελίδας, όπως είναι η πρόσβαση στη βάση δεδομένων και η ερμηνεία του πλαισίου. Ajax Ajax, η συντομογραφία δηλαδή του Asynchronous Javascript and XML, είναι μια τεχνική ανάπτυξης Web για την δημιουργία αλληλεπιδραστικών εφαρμογών Web. Ο σκοπός είναι να φτιάξει ιστοσελίδες που θα ανταποκρίνονται καλύτερα ανταλλάσσοντας μικρά ποσά πληροφοριών με τον server, έτσι ώστε η ιστοσελίδα να μην χρείαζεται να ανανεωθεί ολόκληρη κάθε φορά που ο χρήστης κάνει αίτηση για μία αλλαγή. Χρησιμοποιήθηκε για να γίνουν οι ιστοσελίδες πιο αλληλεπιδραστικές, γρήγορες και εύχρηστες. 12

14 Λόγω της περισύνθετης δομής της προγραμματιστικής γλώσσας Ajax στην Javascript, υπάρχουν πολλά πλαίσια Ajax, τα οποία ασχολούνται αποκλειστικά με την υποστήριξη της Ajax. Μερικά από αυτά τα πλαίσια είναι ενσωματωμένα σε μεγαλύτερα πλαίσια. Για παράδειγμα, το πλαίσιο Prototype Javascript περιέχεται μέσα στο Ruby on Rails. Με το αυξανόμενο ενδιαφέρον για ανάπτυξη εφαρμογών Rich Media Web 2.0, η πολυπλοκότητα του προγραμματισμού στην Ajax και την Javascript έγινε τόσο εμφανής, που η τεχνολογία μεταγλώτισης εισχώρησε για να επιτρέψει τους developers να γράψουν υψηλού επιπέδου κώδικα σε γλώσσες όπως η Java, Python και Ruby. Οι πρώτοι από τους 3 μεταγλωτιστές ήταν Morfik ενώ ακολούθησε το Google Web Toolkit και η Python και Ruby υπό την μορφή των Pyjamas και RubyJS. Αυτοί οι μεταγλωτιστές έκαναν την ανάπτυξη των εφαρμογών Rich Media Ajax παρόμοια με την ανάπτυξη των εφαρμογών Desktop. Αυτόματη Διαμόρφωση Μερικά πλαίσια ελαχιστοποιούν την διαμόρφωση των Web εφαρμογών μέσω της χρήσης της ενδοσκόπησης γνωστών συμβάσεων. Για παράδειγμα, πολλά πλαίσια Java χρησιμοποιούν το Hibernate σαν ένα σταθερό επίπεδο, το οποίο μπορεί να παράγει ένα σχήμα βάσης δεδομένων εκείνη την στιγμή, ικανό να ακολουθήσει τις απαραίτητες πληροφορίες. Αυτό επιτρέπει τον σχεδιαστή της εφαρμογής να σχεδιάσει επαγγελματικά αντικείμενα χωρίς να χρειάζεται να καθορίσει ακριβώς το σχήμα της βάσης δεδομένων. Πλαίσια όπως το Ruby on Rails μπορούν επίσης να δουλέψουν αντίστροφα, το οποίο σημαίνει ότι καθορίζουν τις ιδιότητες του αντικειμένου του μοντέλου στο σχήμα μιας βάσης δεδομένων. Υπηρεσίες Web Μερικά πλαίσια προμηθεύουν εργαλεία για την δημιουργία υπηρεσιών Web. Αυτά τα εργαλεία μπορούν να χρησιμοποιηθούν και με άλλο τρόπο ώστε να βοηθήσουν στην ολοκλήρωση της web εφαρμογής. 13

15 1.8 Λίστα πλαισίων Web εφαρμογών 1. Πλαίσια PHP Zend Framework CakePHP Symphony CodeIgniter Seagull Prado Solar ez Components Kohana Jelix Flow3 MODx Sapphire PHP for Applications Yii Limonade Tekuna DooPHP Fat-Free Akelos 14

16 PHP on TRAX ATK 2. Πλαίσια Ruby Ruby on Rails Merb Ramaze Halcyon Sinatra Webby Sass 3. Πλαίσια Perl Catalyst Interchange Mason CGI:Application Jifty Gantry Dancer Mojolicious 4. Πλαίσια Java Struts 15

17 Hibernate Javaserver Faces Spring Apache Wicket Play Google Web Toolkit Stripes 5. Πλαίσια Javascript jquery MooTools Prototype Script.aculo.us Dojo Yahoo! UI Librady Ext Qooxdoo $fx() Scripty2 AJS Archetype RightJS Glow 16

18 My Library DHTMLX Echo midori 6. Πλαίσια CSS YAML YUI Grids CSS Blueprint GridEasy Malo Emastic 960 Grid System Elements WYMstyle Boilerplate Tripoli Sparkl Typogridphy The Golden Grid The 1kb CSS Grid SenCSs Taffy 17

19 Logic CSS Hartija BlueTrip Compass Elastic Winston Baseline Floatz Formee 7. Πλαίσια Python Django Pylons Grok TurboGears Web2spy CherryPy 8. Πλαίσια ColdFusion ColdFusion on Wheels ColdSpring ontap Model-Glue 18

20 9. Πλαίσια ASP.Net ASP.NET MVC Framework DotNetNuke MonoRail Vici MVC 1.9 Aνάπτυξη ιστοσελίδων Η ανάπτυξη ιστοσελίδων γίνεται με την γλώσσα HTML, η οποία χρησιμοποιεί ένα είδος ετικετών <tags> για τη διαμόρφωση του τρόπου παρουσίασης του κειμένου και των πολυμεσικών στοιχείων. Όταν ένας φυλλομετρητής ανακαλεί μια ιστοσελίδα, τότε στην ουσία διαβάζει τον κώδικα της ιστοσελίδας ως ένα αρχείο κειμένου και ψάχνει να βρει μέσα σε αυτό ετικέτες, οι οποίες δηλώνουν πως θα παρουσιαστεί το κείμενο και τα πολυμεσικά στοιχεία, ώστε να δημιουργηθεί το τελικό οπτικό αποτέλεσμα της ιστοσελίδας. Στη συνέχεια, ο φυλλομετρητής αναλαμβάνει να δημιουργήσει αυτό το τελικό αποτέλεσμα Tεχνικές για εύχρηστες Web εφαρμογές Ένα από τα μεγαλύτερα στοιχήματα για έναν Web designer είναι ο σχεδιασμός του περιβάλλοντος χρήσης μιας online εφαρμογής. Ακόμα περισσότερο αν η εφαρμογή πρόκειται να χρησιμοποιείται καθημερινά από ανθρώπους με διαφορετικές ανάγκες, λίγη υπομονή και άφθονη όρεξη για γκρίνια! Δεν πρέπει όμως να είμαστε αυστηροί με τους χρήστες, καθώς οι ίδιοι είμαστε οι αυστηρότεροι κριτές για τη δουλειά των άλλων στον ίδιο τομέα. Ο σχεδιασμός μιας Web εφαρμογής είναι ένας γρίφος που αρχικά φαίνεται βουνό - και ίσως να είναι. Αυτό που χρειάζεται τελικά είναι μεθοδικότητα, πολλές (μα πολλές) επαναλήψεις και σκέψη στο design και δυο μυστικά συστατικά: ομοιογένεια και απλότητα. 19

21 Ευτυχώς όμως, δεν είναι ανάγκη να «ξανα-ανακαλύψουμε τον τροχό». Μπορούμε να στηριχτούμε στην εμπειρία των μεγαλύτερων design agencies για να δούμε ποια είναι τα κύρια σχεδιαστικά χαρακτηριστικά των πιο επιτυχημένων Web εφαρμογών: Όμορφα & λειτουργικά tables Δεν υπάρχουν πολλά HTML tags πιο παραξηγημένα στο Web design από το <table>. Και όμως, αν φροντίσει κάποιος να χρησιμοποιήσει tables γι αυτό που προορίζονταν αρχικά, την παρουσίαση δεδομένων, θα δει ότι σε παρόμοιες περιπτώσεις είναι μονόδρομος. Λειτουργική χρήση εικονιδίων Όταν τα εικονίδια χρησιμοποιούνται με φειδωλό τρόπο, μπορούν να βοηθήσουν αρκετά στη μείωση του χρόνου απόκρισης του χρήστη, καθώς οπτικοποιούν πολύ αποτελεσματικά την πληροφορία. Δοκιμάστε να αναζητήσετε ένα αρχείο στο filesystem σας μέσα σε ένα φάκελο γεμάτο αρχεία ίδιου τύπου - εφόσον όλα τα εικονίδια είναι ίδια και οι τίτλοι εκτενείς, θα δυσκολευτείτε αρκετά. Πολλές Web εφαρμογές χρησιμοποιούν εικονίδια μεγάλου μεγέθους στo dashboard τους και άλλα μικρότερα ως φόντο σε πεδία, σε κουμπιά και στα μενού πλοήγησης. Διακριτικό περιβάλλον χρήσης Είτε αφορά την παλέτα χρωμάτων είτε το πλήθος των γραμματοσειρών που χρησιμοποιούνται, τα περισσότερα Web apps είναι αρκετά λακωνικά και στα δύο. Η γραμματοσειρά Lucida Grande φαίνεται να κυριαρχεί στις αγγλόφωνες εφαρμογές (στα ελληνικά δυστυχώς δεν είναι και η πιο καθαρή γραμματοσειρά), ενώ οι τόνοι του γκρι και τα απλά χρώματα χρησιμοποιούνται κατά κόρον. 20

22 Για να μειώσει τη φθορά και την κούραση από την επαναλαμβανόμενη χρήση, το backround διατηρεί γκρι φόντο σε όλες τις σελίδες και δίνει στο χρήστη τη δυνατότητα να αλλάξει τα χρώματα του header. Φόρμες Σχεδιασμένες με κομψό τρόπο και απαραιτήτως ισομετρικές, χρησιμοποιούνται για να αντλήσουν τις απαραίτητες πληροφορίες του ατόμου που τις συμπληρώνει χωρίς να του προκαλούν ανία. Tabs Τα tab modules είναι ένας πρώτης τάξεως τρόπος να κρύψετε πληροφορία που δεν είναι ανάγκη να είναι εμφανής ανά πάσα στιγμή, παρά μόνο εφόσον το επιλέξει ο χρήστης. Όπως είναι λογικό, ο αριθμός των διαφορετικών ενεργειών που μπορούν να γίνουν μέσω μιας εφαρμογής σχεδόν επιβάλλει τη χρήση tabs σε ορισμένες περιπτώσεις. 21

23 2 Συστήματα Διαχείρησης Περιεχομένου (CMS) 2.1 Εισαγωγή στα CMS Μέχρι πριν από λίγα χρόνια, ο μόνος τρόπος για να διατηρήσει μια εταιρία το site της ενημερωμένο ήταν να συνάψει συμβόλαιο με μια εταιρία παροχής υπηρεσιών συντήρησης. Τα τελευταία χρόνια, όμως, οι ίδιες οι εταιρίες παροχής τέτοιων υπηρεσιών προσφέρουν μια πολλά υποσχόμενη εναλλακτική λύση. Πολλές από αυτές έχουν αναπτύξει ειδικά συστήματα, τα οποία μειώνουν το χρόνο και το κόστος λειτουργίας ενός δικτυακού τόπου. Ο όρος Content Management Systems (CMS, Συστήματα Διαχείρισης Περιεχομένου) αναφέρεται στις εφαρμογές που επιτρέπουν στον πελάτη να διαχειρίζεται το δικτυακό του περιεχόμενο, όπως κείμενα, εικόνες, πίνακες κ.λπ., με εύκολο τρόπο, συνήθως παρόμοιο με αυτόν της χρήσης ενός κειμενογράφου. Οι εφαρμογές διαχείρισης περιεχομένου επιτρέπουν την αλλαγή του περιεχόμενου χωρίς να είναι απαραίτητα ειδικές γνώσεις σχετικές με τη δημιουργία ιστοσελίδων ή γραφικών, καθώς συνήθως τα κείμενα γράφονται μέσω κάποιων online WYSIWYG ("What You See Is What You Get") html editors, ειδικών δηλαδή κειμενογράφων, παρόμοιων με το MS Word, που επιτρέπουν τη μορφοποίηση των κειμένων όποτε υπάρχει ανάγκη. Οι αλλαγές του site μπορούν να γίνουν από οποιονδήποτε υπολογιστή που είναι συνδεμένος στο Διαδίκτυο, χωρίς να χρειάζεται να έχει εγκατεστημένα ειδικά προγράμματα επεξεργασίας ιστοσελίδων, γραφικών κτλπ. Μέσω ενός απλού φυλλομετρητή ιστοσελίδων (browser), ο χρήστης μπορεί να συντάξει ένα κείμενο και να ενημερώσει άμεσα το δικτυακό του τόπο. Αυτό που αποκαλούμε πολλές φορές "δυναμικό περιεχόμενο" σε ένα website δεν είναι άλλο παρά οι πληροφορίες που παρουσιάζονται στο site και μπορούν να αλλάξουν από τους ίδιους τους διαχειριστές του μέσω κάποιας εφαρμογής, η οποία ουσιαστικά μπορεί να εισάγει (προσθέτει), διορθώνει και να διαγράφει εγγραφές σε πίνακες βάσεων δεδομένων, όπου τις περισσότερες φορές καταχωρούνται όλες αυτές οι πληροφορίες. 22

24 Αυτό σημαίνει ότι δεν χρειάζεται να δημιουργηθούν πολλές ξεχωριστές ιστοσελίδες για την παρουσίαση των πληροφοριών στο site, αλλά αρκεί ένας ενιαίος σχεδιασμός στα σημεία όπου θέλουμε να εμφανίζεται το περιεχόμενό μας, καθώς και να υπάρχει ο ειδικός σε κάποια συγκεκριμένη γλώσσα προγραμματισμού (ASP, PHP, Coldfusion, Perl, CGI κ.λπ.), ο οποίος αναλαμβάνει να εμφανίσει τις σωστές πληροφορίες στις σωστές θέσεις. Έτσι, για το δικτυακό τόπο μιας εφημερίδας π.χ., που απαιτεί εύλογα καθημερινή ενημέρωση αλλά δεν χρησιμοποιεί κάποιο σύστημα Content Management, θα πρέπει ο υπεύθυνος για το σχεδιασμό του (designer) να δημιουργήσει μια σελίδα με τα γραφικά, την πλοήγηση και το περιβάλλον διεπαφής (interface) του website, ο υπεύθυνος ύλης να τοποθετήσει το περιεχόμενο στα σημεία της ιστοσελίδας που θέλει, και να ενημερωθούν οι σύνδεσμοι των υπόλοιπων σελίδων ώστε να συνδέονται με την καινούργια. Αφού την αποθηκεύσει, πρέπει να την ανεβάσει στο website μαζί με τις υπόλοιπες ιστοσελίδες που άλλαξαν. Αντιθέτως, αν ο δικτυακός τόπος λειτουργεί με χρήση κάποιου συστήματος CM, το μόνο που έχει να κάνει ο διαχειριστής του είναι να ανοίξει τη σχετική φόρμα εισαγωγής νέου άρθρου στη διαχειριστική εφαρμογή του website και να γράψει ή να επικολλήσει (copy-paste) τα στοιχεία που επιθυμεί. Αυτόματα, μετά την καταχώριση γίνονται από το ίδιο το σύστημα διαχείρισης περιεχομένου όλες οι απαραίτητες ενέργειες, ώστε το άρθρο να είναι άμεσα διαθέσιμο στους επισκέπτες και όλοι οι σύνδεσμοι προς αυτό ενημερωμένοι. Με την αυξανόμενη τάση χρήσης των CMS στην Ελλάδα και το εξωτερικό, γίνεται εμφανές ότι το μέλλον του Διαδικτύου σε ό,τι αφορά περιεχόμενο και πληροφορίες που πρέπει να ανανεώνονται τακτικά, ανήκει στα προγράμματα διαχείρισης περιεχομένου, αφού προσφέρουν πολλά πλεονεκτήματα, ταχύτητα και ευκολίες στη χρήση τους. Τα Συστήματα Διαχείρισης Περιεχομένου μπορούν να χρησιμοποιηθούν και να αντικαταστήσουν ένα συμβόλαιο συντήρησης επάξια. Τα CMS μπορούν να χρησιμοποιηθούν για: 23

25 Ειδήσεις (εφημερίδες, περιοδικά, πρακτορεία ειδήσεων κ.λπ.) Παρουσιάσεις εταιριών και προσωπικού Καταλόγους προϊόντων Παρουσιάσεις προϊόντων Online υποστήριξη Αγγελίες και ανακοινώσεις Παρουσιάσεις και προβολή γεωγραφικών περιοχών Διαφημίσεις Δελτία Τύπου Όρους και συμβόλαια Χάρτες, κατευθύνσεις, οδηγίες Ένα ολοκληρωμένο CMS πρέπει να διαχειρίζεται όλες τις δυναμικές πληροφορίες του site και να προσφέρει υπηρεσίες που εξυπηρετούν πλήρως τις ανάγκες των διαχειριστών του. 2.2 Web CMS Η διαχείριση περιεχομένου ιστού περιλαμβάνει τις λειτουργίες εκείνες οι οποίες εμπλέκονται στη δημιουργία και διάθεση ψηφιακού περιεχομένου σε πρόσωπα όπως πελάτες, προμηθευτές, συνεργάτες και προσωπικό τα οποία προσπελαύνουν περιεχόμενα του Ιστού μέσω extranet, Internet ή intranet. Ένα σύστημα διαχείρισης περιεχομένου ιστού αποτελείται από τα εργαλεία λογισμικού τα οποία χρησιμοποιούνται για να παρέχουν αυτοματοποιημένη υποστήριξη σε δραστηριότητες WCM. 24

26 2.3 Πως γινόταν μια ιστοσελίδα τη δεκαετία του 90 Για να δηµιουργήσουµε τη σελίδα στα δεξιά, έπρεπε να ξέρουµε πως να γραψουµε τον κώδικα στα αριστερά. 2.4 Πως γίνεται σήµερα Η µορφοποίηση διαχειρίζεται από την HTML σε ένα CSS αρχείο, αλλά ακόµη απαιτείται η γνώση γραφής του κώδικα στα αριστερά για να δηµιουργηθεί η σελίδα στα δεξιά. 25

27 2.5 Πως γίνεται µε ένα CMS Με ένα CMS αυτό που χρειάζεται να ξέρει κάποιος σήµερα είναι πως να γράψει το κόκκινο κείµενο στα αριστερά για να δηµιουργήσει τη σελίδα στα δεξιά. 2.6 Πλεονεκτήματα χρήσης CMS Γρήγορη ενημέρωση, διαχείριση και αρχειοθέτηση του περιεχομένου του δικτυακού τόπου Ενημέρωση του περιεχομένου από οπουδήποτε Ταυτόχρονη ενημέρωση από πολλούς χρήστες και διαφορετικούς υπολογιστές Να μην απαιτούνται ειδικές τεχνικές γνώσεις από τους διαχειριστές του Εύκολη χρήση και άμεση γνώση του τελικού αποτελέσματος, όπως γίνεται με τους γνωστούς κειμενογράφους Δυνατότητα αναζήτησης του περιεχομένου που καταχωρείται και αυτόματη δημιουργία αρχείου Ασφάλεια και προστασία του σχεδιασμού του site από λανθασμένες ενέργειες, που θα μπορούσαν να δημιουργήσουν προβλήματα στην εμφάνισή του Διαχωρισμός του περιεχομένου από το σχεδιασμό και την πλοήγηση (navigation) του δικτυακού τόπου 26