Τεσνολογικό Δκπαιδεςηικό Ίδπςμα Κπήηηρ Πηςσιακή επγαζία Κοςκοςνάβαρ Κυνζηανηίνορ(AM: 2488)
by user
Comments
Transcript
Τεσνολογικό Δκπαιδεςηικό Ίδπςμα Κπήηηρ Πηςσιακή επγαζία Κοςκοςνάβαρ Κυνζηανηίνορ(AM: 2488)
Τεσνολογικό Δκπαιδεςηικό Ίδπςμα Κπήηηρ Σσολή Τεσνολογικών Δθαπμογών Τμήμα Μησανικών Πληποθοπικήρ Πηςσιακή επγαζία Μελέηη, ζσεδίαζη και ςλοποίηζη διεπαθών σπήζηη για ηη βέληιζηη παποςζίαζη διαδικηςακών εθαπμογών Κοςκοςνάβαρ Κυνζηανηίνορ(AM: 2488) E-mail: [email protected] Πιπεπάκηρ Δλεςθέπιορ(ΑΜ: 2649) E-mail: [email protected] Ηπάκλειο – Νοέμβπιορ 2015 Δπόπηηρ Καθηγηηήρ: Παπαδάκηρ Νικόλαορ Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ ii Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο Υπεύθυνη Δήλωση: Βεβαιώνω όηι είμαι ζςγγπαθέαρ αςηήρ ηηρ πηςσιακήρ επγαζίαρ και όηι κάθε βοήθεια ηην οποία είσα για ηην πποεηοιμαζία ηηρ, είναι πλήπωρ αναγνωπιζμένη και αναθέπεηαι ζηην πηςσιακή επγαζία. Δπίζηρ έσω αναθέπει ηιρ όποιερ πηγέρ από ηιρ οποίερ έκανα σπήζη δεδομένων, ιδεών ή λέξεων, είηε αςηέρ αναθέπονηαι ακπιβώρ είηε παπαθπαζμένερ. Δπίζηρ βεβαιώνω όηι αςηή η πηςσιακή επγαζία πποεηοιμάζηηκε από εμένα πποζωπικά ειδικά για ηιρ απαιηήζειρ ηος ππογπάμμαηορ ζποςδών ηος Τμήμαηορ Μησανικών Πληποθοπικήρ ηος Τ.Δ.Ι. Κπήηηρ. iii Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ Πεπίλητη Η παξνύζα πηπρηαθή εξγαζία έρεη σο ζέκα ηελ εύξεπλα θαη ηελ κειέηε ησλ ζύρξνλσλ ηερλνινγηώλ πνπ είλαη ππεύζελεο γηα ηελ δεκηνπξγία δηαδξαζηηθώλ θαη πηό εύρξεζησλ δηαδηθηπαθώλ εθαξκνγώλ πνπ αξρήδνπλ λα κνλνπνινύλ ην κεγαιύηεξν θνκκάηη ηνπ δηαδηθηύνπ ζήκεξα. Η ξαγδαία εμάπισζε ηνπ δηαδηθηύνπ έρεη νδεγήζεη ζε κία αλάινγε αύμεζε ησλ ηζηνζειίδσλ, όπνπ πέξα από ηα ηππηθά website παξέρεηαη θαη έλαο κεγάινο αξηζκόο πξσηόηππσλ εθαξκνγώλ θαη δηεπαθώλ ρξήζηε γηα ηελ δεκηνπξγία ηνπο. Απηή ε εξγαζία αζρνιείηαη κε ηελ κειέηε ησλ αληνίζηηρσλ ηερλνινγηώλ θαη ηελ δεκηνπξγία ελόο παξαδείγκαηνο κίαο δηαδξαζηηθήο ηζηνζειίδαο, θαιύπηνληαο όια ηα βήκαηα από ηελ επηινγή ησλ θαηάιιεισλ ηερλνινγηώλ θαη εξγαιείσλ κέρξη θαη ηελ ζπγγξαθή ηνπ θώδηθα, κε αλαιπηηθή παξνπζίαζε ηεο δηαδηθαζίαο αλάπηπμεο θαη ησλ απνθάζεσλ πνπ ρξεηάζηεθε λα ιεθζνύλ ζε θάζε βήκα. Παξνπζηάδνληαη νη επηθξαηέζηεξεο ηερλνινγίεο, γιώζζεο πξνγξακκαηηζκνύ, πιαηθόξκεο ζρεδίαζεο θαη πιαίζηα εξγαιεία πνπ ρξεζηκνπνηνύληαη από ηνπ πξαγξακκαηηζηέο δηαδηθηπαθώλ εθαξκνγώλ θαζώο θαη ην απνηέιαζκα ηεο δεκηνπξγίαο ελόο παξαδείγκαηνο ηεο βέιηηζηεο ρξήζεο δηεπαθώλ ρξήζηε κίαο δηαδηθηπαθήο εθαξκνγήο κέζσ ησλ εκπεηξηώλ πνπ απνθηήζεθαλ από ηελ έξεπλα θαη ηελ κειέηε. iv Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο Abstract This dissertation is about the research and study of contemporary technologies which inspire the creation of interactive and more user-friendly web applications which tend to monopolize the largest piece of the web today. The rapid spread of the Internet has led to a corresponding increase in websites, where beyond the typical website is provided as a large number of novel applications and user interfaces to create them. This work deals with the study of such technologies and the creation of an example of an interactive website, covering all steps from selecting the appropriate technologies and tools to the writing of the programming code, with the detailed presentation of the development process and the decisions that had to be taken at every step. It presents the prevalent technologies, programming languages, platforms and framework designing tools used by the programmers of web applications and the results of the creation of an example of the optimal use of user interface on a web application through the experiences gained from research and study. v Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ Πίνακαρ πεπιεσομένυν Πεπίλητη ..................................................................................................................... iv Abstract ......................................................................................................................... v Πίνακαρ πεπιεσομένυν ................................................................................................ vi Πίνακαρ εικόνυν ...................................................................................................... viii Κεθάλαιο 1 Διζαγυγή ................................................................................................. 1 1.1 Γενικά......................................................................................................................... 1 1.2 Σκοπόσ Πτυχιακήσ Εργαςίασ...................................................................................... 2 1.3 Συνοπτική Περιγραφή Αναφοράσ ............................................................................. 3 Κεθάλαιο 2 Ανάπηςξη διαδικηςακών εθαπμογών .................................................... 4 2.1 Διαδικτυακζσ Εφαρμογζσ ................................................................................................ 4 2.1.1 Ιςτορία και οριςμόσ των διαδικτυακών εγαρμογών ............................................... 4 2.1.2 Η γενική δομή των διαδικτυακών εφαρμογών ........................................................ 6 2.2 Διεπαφή Χρήςτη.............................................................................................................. 8 2.2.1 Οριςμόσ και λειτουργία των διεπαφών χρήςτη ...................................................... 8 2.2.2 Ιςτορία των γραφικών διεπαφών χρήςτη .............................................................. 11 2.3 Σχεδιαςμόσ διαδικτφου ................................................................................................. 13 2.3.1 Στατικόσ ςχεδιαςμόσ διαδικτφου ........................................................................... 14 2.3.2 Διαδραςτικόσ ςχεδιαςμόσ διαδικτφου .................................................................. 15 Κεθάλαιο 3 Τεσνολογίερ και Δπγαλεία .................................................................... 17 3.1 Τεχνολογίεσ ςχεδίαςησ διαδικτυακών εφαρμογών...................................................... 17 3.1.1 JavaScript ................................................................................................................ 17 3.1.2 jQuery ..................................................................................................................... 19 3.1.3 HTML ...................................................................................................................... 20 3.1.4 CSS .......................................................................................................................... 21 3.1.5 PHP ......................................................................................................................... 23 3.1.6 MySQL..................................................................................................................... 25 3.2 Πλατφόρμεσ ςχεδίαςησ διαδικτυακών εφαρμογών ..................................................... 26 3.2.1 WordPress .............................................................................................................. 26 3.2.2 Joomla..................................................................................................................... 27 3.2.3 Drupal ..................................................................................................................... 29 3.3 Πλαίςια (Frameworks) .................................................................................................. 31 3.3.1 Οριςμόσ των Frameworks ...................................................................................... 31 3.3.2 Front-End και Back-End .......................................................................................... 31 vi Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο 3.3.3 Το framework Foundation ...................................................................................... 33 3.3.4 Το framework Bootstrap ........................................................................................ 34 3.3.5 Το framework Semantic UI ..................................................................................... 36 3.3.6 Σφγκριςη και επιλογή εργαλείου πλαιςίου............................................................ 38 Κεθάλαιο 4 Bootstrap – βαζικέρ λειηοςπγείερ και δςναηόηηηερ ........................... 41 4.1 Σφςτημα πλζγματοσ (Grid System)................................................................................ 41 4.2 Εξαρτήματα (Components) ........................................................................................... 42 4.3 JavaScript Εξαρτήματα (JS Components) ...................................................................... 47 Κεθάλαιο 5 Τπόπορ ζσεδίαζηρ και παποςζίαζη ςλοποίηζηρ ππακηικού μέποςρ 50 5.1 Προετοιμαςία υλοποίηςησ ........................................................................................... 50 5.1.1 Επιλογή Προγράμματοσ Υλοποίηςησ ..................................................................... 50 5.1.2 Εγκατάςταςη Bootstrap ......................................................................................... 50 5.1.3 Εγκατάςταςη Font-Awesome ................................................................................. 51 5.2 Σχεδίαςη ιςτοςελίδασ ................................................................................................... 52 5.2.1 Το πρώτο τμήμα τησ ιςτιοςελίδασ ......................................................................... 54 5.2.2 Το δεφτερο τμήμα τησ ιςτιοςελίδασ ...................................................................... 55 5.2.3 Το τρίτο τμήμα τησ ιςτιοςελίδασ............................................................................ 57 5.2.4 Το τζταρτο τμήμα τησ ιςτιοςελίδασ ....................................................................... 63 5.2.5 Το πζμπτο τμήμα τησ ιςτιοςελίδασ ........................................................................ 65 5.2.6 Το ζκτο τμήμα τησ ιςτιοςελίδασ............................................................................. 66 5.2.7 Ολοκλήρωςη τησ ιςτοςελίδασ ................................................................................ 66 5.3 Παρουςίαςη υλοποίηςησ .............................................................................................. 80 5.3.1 Προβολή τησ ςελίδασ ςε οθόνη ςταθεροφ υπολογιςτή ........................................ 80 5.3.2 Προβολή τησ ςελίδασ ςε οθόνεσ κινητών ςυςκευών ............................................ 82 Κεθάλαιο 6 Σςμπεπάζμαηα....................................................................................... 85 Κεθάλαιο 7 Βιβλιογπαθία ......................................................................................... 86 vii Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ Πίνακαρ εικόνυν Δηθόλα 1 Οη βαζκίδεο ηεο δνκήο κίαο δηαδηθηπαθήο εθαξκνγήο ................................... 7 Δηθόλα 2 Γηαδηθαζία ιεηηνπξγίαο κίαο δηαδηθηπαθήο εθαξκνγήο ................................. 7 Δηθόλα 3 Δπίπεδα έλνο GUI βαζηζκέλα ζε ζύζηεκα παξαζύξσλ ............................... 11 Δηθόλα 4 Γηαθνξά ζηαηηθώλ θαη δηαδξαζηηθώλ ηζηηνζειίδσλ .................................... 16 Δηθόλα 5 Γηαθνξέο Front-end θαη Back-end ............................................................... 32 Δηθόλα 6 Αλαιπηηθή παξνπζίαζε κεγεζώλ πιέγκαηνο ............................................... 41 Δηθόλα 7 Αλαιπηηθή παξνπζίαζε θιάζεσλ ................................................................. 42 Δηθόλα 8 Dropdown menu ........................................................................................... 43 Δηθόλα 9 Button Group ................................................................................................ 43 Δηθόλα 10 Button Dropdown ....................................................................................... 44 Δηθόλα 11 Navs ............................................................................................................ 44 Δηθόλα 12 Thumbnails ................................................................................................. 45 Δηθόλα 13 Progress Bar................................................................................................ 45 Δηθόλα 14 List Groups ................................................................................................. 46 Δηθόλα 15 Panel ........................................................................................................... 46 Δηθόλα 16 Modal .......................................................................................................... 47 Δηθόλα 17 Collapse ...................................................................................................... 47 Δηθόλα 18 Carousel ...................................................................................................... 48 Δηθόλα 19 Πξόγξακκα Text Editor- Sublime .............................................................. 50 Δηθόλα 20 Σν πιαίζην Bootstrap ................................................................................. 51 Δηθόλα 21 Η βηβιηνζήθε Font Awesome..................................................................... 51 Δηθόλα 22 Η πάλσ κπάξα-Navigation ......................................................................... 54 Δηθόλα 23 Σν ηκήκα ηεο επηθεθαιίδαο ........................................................................ 56 Δηθόλα 24 Σν ηκήκα ησλ ραξαθηεξηζηηθώλ-Features................................................. 57 Δηθόλα 25 CSS Modal.................................................................................................. 60 Δηθόλα 26 Σν ηκήκα ησλ γεληθώλ πιεξνθνξηώλ-About.............................................. 64 Δηθόλα 27 Σν ηκήκα ηνπ Download ............................................................................ 65 Δηθόλα 28 Η θάησ κπάξα-Footer ................................................................................. 66 Δηθόλα 29 Παξνπζίαζε πινπνίεζεο ηζηηνζειίδαο ...................................................... 81 Δηθόλα 30 Η ζειίδα ζηηο αλαιύζεηο ηνπ IPhone 6 ....................................................... 82 Δηθόλα 31 Η ζειίδα ζηηο αλαιύζεηο ηνπ IPad .............................................................. 83 Δηθόλα 32 Η ζειίδα ζηηο αλαιύζεηο ηνπ Netbook ....................................................... 84 Δηθόλα 33 Η ζειίδα ζηηο αλαιύζεηο ηνπ Laptop.......................................................... 84 viii Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο Κεθάλαιο 1 Διζαγυγή 1.1 Γενικά Σν δηαδύθηην (Internet) ζήκεξα έρεη εμειερζεί σο ελα απν ηα πην θύξηα κέζα ελεκέξσζεο θαη επηθνηλσλίαο γηα ηνπο πεξηζζόηεξνπο αλζξώπνπο παγθνζκίσο. Απν ηηο αξρέο ηνπ ηε δεθαεηία ηνπ 1970 ζηηο ΗΠΑ, σο ελα ζύζηεκα ελδνπαλεπηζηεκηαθήο ζπλελλόεζεο, έρεη θηάζεη λα είλαη ην πηό πνιύρξεζην εξγαιείν θαη αλαπόζπαζην θνκκάηη γηα όζνπο ερνπλ πξόζβαζε ζε απηό. Σν internet αζθεί ηξνκεξή επηξξνή ζηε δεκηνπξγία απόςεσλ, ζηελ απόθηεζε θαη δηαζηάπξσζε γλώζεο αθόκα θαη ζηελ αιιαγή ηνπ βηνηηθνύ θαη νηθνλνκηθνύ επηπέδνπ. Απηό νθείιεηαη θαηα θύξην ιόγν ζηελ αλάπηπμε δηαθόξσλ ηερλνινγηώλ όπσο είλαη ε δεκηνπξγία ησλ δηαθόξσλ θπιινκεηξεηώλ (browsers) όπσο ν Internet Explorer ηεο Microsoft, ν Google Chrome ηεο Google, ν αλνηθηνύ θώδηθα Firefox, ν Opera, θαη ν Safari ηεο Apple θαζώο επίζεο θαη ζηελ δεκηνπξγία θαη αλάπηπμε ηνπ παγθόζκηνπ ηζηνύ, ηνπ World Wide Web (www.). Απηέο νη ηερλνινγίεο νθείινπλ θαηα θύξην ιόγν ηελ επηλλόεζε ηνπο ζην CERN, ην επξσπαηθό θέληξν εξεπλώλ θαη αλάπηπμεο ην νπνίν πνιινί ηαπηίδνπλ κε ην internet. Οη πνηό θνηλέο κέζνδνη πξόζβαζεο ελόο ρξήζηε ζην δηαδύθηην είλαη ε επηινγηθή (dialup) θαη ε επξηδσληθή (DSL). Καη νη δύν ζπλδέζεηο ρξεζηκνπνηνύλ ηηο ζηαζεξέο ηειεθσληθέο γξακκέο θαη ηε ζπζθεπή ηνπ δξνκνινγηηή (router/modem) γηα λα ζπλδέζνπλ ηνλ ρξήζηε κε ην internet. Η dial-up ζύλδεζε ρξεζηκνπνηνύληαλ θαηα θόξσλ ζηηο αξρέο ηνπ δηαδηθηύνπ αιιά κε ηελ εμέιεμε ηεο ηερλνινγίαο έρεη παξαγθνληζηεί απν ηελ επξηδσληθή. Η δηαθνξά ηνπο είλαη νηη ε dial-up ε ύπαξμε ρξνλνρξέσζεο θαη νη πνιύ ρακειέο ηαρύηεηεο ξπζκνύ κεηάδσζεο δεδνκέλσλ ζε ζρέζε κε ηελ ηερλνινγία DSL. ηε ζεκεξηλή επνρή έλαο ρξήζηεο κπνξεί λα έρεη πξόζβαζε ζην internet θαη κε άιιεο ζπζθεπέο όπσο θηλεηά ηειέθσλα laptop θαη tablet κέζσ ηεο ρξήζεο αζπξκάησλ ειεθηξνκαγλεηηθώλ ζπρλνηήησλ πνπ δίλνπλ ηελ δπλαηόηεηα πξόζβαζεο απν νπνηνδήπνηε κέξνο ρσξίο ηνλ πεξηνξηζκώλ ησλ ηειεθνληθώλ γξακκώλ. Σα ηειαπηαία ρξόληα όκσο καδί κε ηελ εμέιημε ηεο ηερλνινγίαο θαη ηνπ δηαδηθηύνπ αλαπηύρζεθαλ θαη πνιιέο ηδηνηηθέο εηαηξίεο πνπ ζθνπό έρνπλ λα πάλε ηηο ηερλνινγίεο απηέο ηνπ internet έλα βήκα πηό πέξα. Με ηε ρξήζε δηαθόξσλ πξνγξακκαηηζηεθώλ εξγαιείσλ θαη κε ηελ απαξαίηεηε γλώζε αλαπηύρζεθαλ δηαθόξσλ κνξθώλ δηαδηθηπαθέο εθαξκνγέο (web applications) πνπ ζθνπό έρνπλ ηε όζν πην γξήγνξε θαη βέιηηζηε αλαδήηεζε θαη πξνζπέιαζε ηνπ κεγάινπ πνηθίινπ θαη παγθόζκηνπ όγθνπ πιεξνθνξηώλ γηα ηνλ εθάζηνηε ρξήζηε ηνπ δηαδηθηύνπ. Λόγσ ηεο δπλαηόηεηαο πνπ θαηέρεη ην δηαδύθηην γηα γξήγνξε θαη άκεζε ελεκέξσζε αθόκα θαη ζηηγκεαία αλακεηάδσζε ησλ γεγνλόησλ, εηδηθά ελ ζπγθξίζεη κε ηνπο παξαδνζηαθνύο έληππνπο ηξόπνπο, θξίλεηαη απαξαίηεηε ε δεκηνπξγία δηαδηθηπαθώλ εθαξκνγώλ κε όζν ην δπλαηόλ πηό εύρξεζην ηξόπν παξνπζίαζεο ησλ πιεξνθνξηώλ θαη ησλ δεδνκέλσλ. Απηή ινηπόλ ε παξνπζίαζε πξέπεη λα γίλεηαη κε ηεηνίν ηξόπν ώζηε λα είλαη εύθνιε, πξαθηηθή θαη ειθηζηηθή γηα ηνλ ρξήζηε γηα λα είλαη πην πηζαλή ε επηινγή ηεο δηαδηθηπαθήο εθαξκνγήο αλάκεζα ζηηο ακέηξεηεο πνπ ππάξρνπλ ζην δηαδύθηην. Έηζη ε ξαγδαία εμέιεμε ησλ ηερλνινγηώλ θαη ν αληαγσληζκόο ησλ 1 Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ δηαθόξσλ δεκηνπξγώλ δηαδηθηπαθώλ εθαξκνγώλ έρεη σο απνηέιεζκα ηελ θαιύηεξε πινπνίεζε ησλ δηεπαθώλ ρξήζηε (user interface) θαη ηελ ελζσκάησζε όιν θαη πεξηζζόηεξσλ ηερλνινγηώλ θαη εξγαιείσλ όπσο γηα παξάδεηγκα κεραλώλ αλαδήηεζεο, δπλαηόηεηα πξνζπέιαζεο βάζεσλ δεδνκέλσλ, θνηλνπνίεζε νπηηθναθνπζηηθνύ πιηθνύ, δπλαηόηεηα ρξήζεο ειεθηξνληθνύ ηαρεδξνκίνπ, άκεζε ζπδήηεζεο κε εηθόλα θαη ύρν, ζύλδεζε θαη παξαπνκπή κε άιιεο δηαδηθηπαθέο ζειίδεο θαη πνιιώλ άιισλ. 1.2 Σκοπόρ Πηςσιακήρ Δπγαζίαρ Η παξνύζα πηπρηαθή εξγαζία απνζθνπεί ζηελ έξεπλα, ηελ κειέηε θαη ηελ εθκάζεζε ησλ δηαθόξσλ ηερλνινγηθώλ εμειίμεσλ, θαηλνύξησλ θαη παιηώλ, πνπ ζρεηίδνληαη κε ηελ ζρεδίαζε, ηελ δεκηνπξγία θαη ηελ θαηαζθεπή ζειίδσλ ζην δηαδίθηπν θαζώο θαη ησλ αληίζηνηρσλ εθαξκνγώλ θαη δηεπαθώλ ρξήζηε πνπ πεξηέρνληαη ζε απηέο. ηόρνο δειαδή είλαη ε έξεπλα, ε εθκάζεζε θαη ε εμηθνίσζε κε ηηο ηερλνινγίεο πνπ ζρεηίδνληαη κε ηνλ ρώξν ηεο ζρεδίαζεο ηζηηνζειίδσλ απνζθνπόληαο ζηελ πινπνίεζε όζν ην δπλαηόλ πηό εύρξεζησλ θαη θηιηθώλ δηεπαθώλ πξνο ηνλ απιό επηζθέπηε θαη ρξήζηε ησλ δηαδηθηπαθώλ εθαξκνγώλ. Σν επόκελν βήκα απηήο ηεο κειέηεο θαη ηεο έξεπλαο είλαη ε ζρεδίαζε θαη ε θαηαζθεπή κίαο απιήο ηζηηνζειίδαο κε κία δηεπαθή ρξήζηε, δίλνληαο έλα παξάδεηγκα ηεο πξαθηηθήο εθαξκνγήο απηώλ ησλ ηερλνινγηώλ θαη ησλ πξνγξακκαηώλ πνπ επηιέρζεθαλ, σο κία παξνπζίαζε ηεο θαιύηεξεο ρξήζεο ησλ δηαδηθηπαθώλ εθαξκνγώλ. Πην ζπγθεθξηκέλα, ζην κεγαιύηεξν θνκκάηη απηήο ηεο εξγαζίαο παξαηήζνληαη ηα απνηειέζκαηα ηεο έξεπλαο θαη ηεο κειέηεο ησ λέσλ ηερλνινγηώλ ηνπ ρώξνπ ηεο ζρεδίαζεο θαη θαηαζθεπήο ηζηηνζειίδσλ θαη δηαδηθηπαθώλ εθαξκνγώλ πνπ απνηεινύληαη από γιώζζεο πξνγξακκαηηζκνύ, πιαηθόξκεο ζρεδίαζεο θαη πιαίζηα εξγαιεία. Σν framework Bootstrap επηιέρζεθε γηα ην θνκκάηη ηεο δεκηνπξγίαο ηεο παξνπζίαζεο ηεο πξαθηηθήο εθαξκνγήο ελόο παξαδείγκαηνο ρξήζεο κίαο δηεπαθήο γηα ηε βέιηηζηε πξνβνιή ησλ δηαδηθηπαθώλ εθαξκνγώλ. 2 Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο 1.3 Σςνοπηική Πεπιγπαθή Αναθοπάρ ην πξώην θεθάιαην απηήο ηεο πηπρηαθήο εξγαζίαο δίλεηαη κία γεληθή εηζαγσγή γηα ην δηαδίθηπν, ηηο ηζηηνζειίδεο ηνπ, ηηο εθαξκνγέο θαη ηηο δηεπαθέο ρξήζηε πνπ ζπκβάινπλ ζηελ θαιύηεξε πεξηήγεζε θαη εκπεηξία ρξήζεο ηνπ. ην δεύηεξν θεθάιαην παξαηείζεηαη κία ιεπηνκεξή αλαθνξά ζηελ αλάπηπμε ησλ δηαδηθηπαθώλ εθαξκνγώλ θαη ζηηο δηεπαθέο ρξήζηε πνπ βξίζθνληαη ζε απηέο, ζηνλ νξηζκό θαη ηηο ιεηηνπξγίεο ηνπο, όπσο επίζεηο θαη ζηνλ ζρεδηαζκό ηνπ δηαδηθηύνπ θαη ηα είδε ηνπ. ην ηξίην θεθάιαην παξνπζηάδνληαη νη ηερλνινγίεο θαη ηα εξγαιεία πνπ ζπκβάινπλ ζηελ δεκηνπξγία θαη ηελ θαηαζθεπή ησλ εθαξκνγώλ θαη ησλ δηεπαθώλ ρξήζηε κίαο ηζηηνζειίδαο ζην δηαδίθηπν. Δπίζεηο γίλεηαη ιεπηνκεξή αλαθνξά θαη παξνπζίαζε ησλ δεκνθηιέζηεξσλ frameworks, ε ζύγθξηζε ηνπο θαη ε επηινγή ελόο γηα ηελ πινπνίεζε ηνπ πξαθηηθνύ κέξνπο ηεο εξγαζίαο ην ηέηαξην θεθάιαην γίλεηαη αλαθνξά ζηηο ιεηηνπξγίεο θαη ηηο δπλαηόηεο ηνπ πιαηζίνπ Bootstrap πνπ ζα ρξεηαζηνύλ γηα ηελ ζρεδίαζε ηεο ηζηηνζειίδαο θαη ηεο πξόηππεο δηεπαθήο ρξήζηε παξέρνληαο σο απνηέιεζκα έλα παξάδεηγκα βέιηηζηεο παξνπζίαζεο κίαο δηαδηθηύαθεο εθαξκνγήο. ην πέκπην θεθάιαην γίλεηαη ν ζρεδηαζκόο θαη ε ζπγγξαθή ηνπ θώδηθα ησλ επηκέξνπο ηκεκάησλ ηεο ηζηηνζειίδαο όπσο επίζεηο θαη ε παξνπζίαζε ηνπ ηειηθνύ απνηειέζκαηνο. ην έθην θεθάιαην αλαθέξνληαη ηα ζπκπεξάζκαηα ηεο πξαγκάησζεο ηνπ πξαθηηθνύ κέξνπο ηεο εξγαζίαο όπσο θαη ηεο εθκάζεζεο ησλ ηερλνινγηώλ πνπ ρξεηάζηηθαλ γηα ηελ πινπνίεζε απηνύ. Καη ηέινο ζην έβδνκν θεθάιαην παξαηείζεηαη ε βηβιηνγξαθηθή αλαθνξά ησλ πεγώλ απν ηηο νπνίεο αληιήζεθαλ πιεξνθνξίεο πνπ βνήζεζαλ ζηελ ζπγγξαθή απηήο ηεο πηπρηαθήο εξγαζίαο. 3 Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ Κεθάλαιο 2 Ανάπηςξη διαδικηςακών εθαπμογών 2.1 Γιαδικηςακέρ Δθαπμογέρ Σελ ηειεπηαία δεθαεηία ην internet ρξεζηκνπνηείηαη θαηα θόξνλ απν εθαηνκύξηα εηαηξίεο θαη επηρεηξήζεηο αιιά θαη από απινύο ρξήζηεο σο έλα κέζσ επηθνηλσλίαο, αληαιαγήο πιεξνθνξηώλ θαη δεδνκέλσλ κε γλώκνλα ηε δηαθήκεζε, ηελ βειηίσζε ηεο δεκνηηθόηεηαο θαη ηνπ πξνθίι ηνπ εθάζηνηε ρξήζηε θαη επηρείξεζεο θαη θαη επέθηαζε ηε ρξεκαηηθή απνιαβή. Απηό απνηειεί έλα απν ηνπο πνιινύο θαη θύξηνπο ιόγνπο αλάπηπμεο ηεο ηερλνινγίαο ησλ δηαδηθηπαθώλ εθαξκνγώλ. Πηό ζπγθεθξηκέλα ην δηαδίθηπν παξέρεη έλαλ ηξόπν γηα ηνπο ρξήζηεο ηνπ λα επηθνηλσλνύλ κεηαμύ ηνπο θαη λα γλσξίδνπλ ηηο αξέζθεηεο θαη δπζαξέζθεηεο ηνλ αηόκσλ πνπ επηζθέπηνληαη ηηο ζειίδεο. Έλαο ηξόπνο γηα λα γίλεη απηό είλαη κε ηε ρξήζε δηαδηθηπαθώλ εθαξκνγώλ κε ηε κνξθή πεδίσλ ππνβνιήο ζηνηρείσλ, θόξκεο αλαδήηεζεο θαη ζύλδεζεο ησλ ρξεζηώλ, ζπζηήκαηα δηαρείξεζεο πεξηερνκέλσλ, εγγξαθέο ζε ελεκεξσηηθά δειηία, ειεθηξνληθέο αηηήζεηο πιεξνθνξηώλ ζρεηηθά γηα ηα πξντόληα πνπ παξέρνληαη θαη πνιιά άιια πνπ ζθνπό έρνπλ ηελ όζν ηνλ δπλαηώλ θαιύηεξε εκπεηξία πεξηήγεζήο ησλ επηζθεπηώλ ησλ ηζηηνζειίδσλ. ιεο απηέο νη πιεξνθνξίεο απνζεθεύνληαη θαη επεμεξγάδνληαη κέζσ ησλ δηαδηθηπαθώλ εθαξκνγώλ γηα άκεζε ή κειινληηθή ρξήζε. 2.1.1 Ιζηοπία και οπιζμόρ ηυν διαδικηςακών εγαπμογών ηα αξρηθά ππνινγηζηηθά κνληέια ηνπ δηαδηθηύνπ, ε πην θνηλή δηαρείξεζε ηνπ νγθνύ ησλ πιεξνθνξηώλ γηλόηαλ κε ην κνληέιν ρξήζηε-δηαθνκηζηή (client-server). Απηό ζήκαηλε νηη γηα ηε ρξήζε ησλ εθαξκνγώλ έλα θνκκάηη ηνπ θώδηθα ηεο εθαξκνγήο έπξεπε μερσξηζηά λα εγθαηαζηαζεί ζηελ πιεπξά ηνπ ρξήζηε ηνπηθά ζην κεράλεκα ηνπ θαη νπζηαζηηθά απνηεινύζε ηε δηεπαθή ρξήζηε θαη ην άιιν θνκκάηη ζηελ πιεπξά ηνπ δηαθνκηζηή. Σν πξόβιεκα πνπ παξνπζηάδνληαλ κε απηό ην κνληέιν είλαη νηη θάζε θνξά πνπ άιιαδε θάπνηα πιεξνθνξία από ηε κία πιεπξά (π.ρ. κηα αλαβάζκηζε ηνπ θώδηθα) έπξεπε λα αιιάμεη πνπ ζήκαηλε λα επαλαεγθαηαζηαζεί θαη απν ηελ άιιε πιεπξά κεηώλνληαο έηζη ηελ παξαγσγηθόηεηα θαη απμάλνληαο ην θόζηνο. Δπηπιένλ κε απηό ην κνληέιν θαη ηα δύν θνκκάηηα, ηνπ ρξήζηε θαη ηνπ δηαθνκηζηή, ήηαλ ζηελά ζπλδεδεκέλα όζνλ αθνξά ηε ρξήζε ηνπ ίδηνπ ιεηηνπξγηθνύ ζπζηήκαηνο θαη ηεο ίδηαο αξρηηεθηνληθήο ππνινγηζηώλ κε απνηέιεζκα ηελ δπζθνιία ζύλδεζεο κε άιινπο ρξήζηεο. Γηα λα αληηκεηνπηζηνύλ απηά ηα πξνβιήκαηα δεκηνπξγήζεθε απν ηελ Netscape1 ηα APIs2 (Application Programming Interface) ινγηζκηθά πξνγξάκκαηα πνπ ιεηηνπξγνύζαλ ζηελ πιεπξά ηνπ δηαθνκηζηή θαη παξείραλ πεξηζζόηεξεο ιεηηνπξγίεο θαη επεθηάζεηο. Παξόια απηα ε αλάπηπμε δπλακηθώλ ηζηηνζειίδσλ ζπλέρηδε λα ήηαλ ην ίδην αξγή κε πξίλ ιόγσ ηεο ρξήζεο δύζθνισλ γισζζώλ πξνγξακκαηηζκνύ όπσο ε C3 θαη ε C++4 δεκηνπξγόληαο ιάζε θαη πξνβιήκαηα κε απνηέιεζκα λα ρξεηάδεηαη λα 1 Netscape https://en.wikipedia.org/wiki/Netscape API https://en.wikipedia.org/wiki/Netscape_Server_Application_Programming_Interface 3 Γιώζζα πξνγξακκαηηζκνύ C https://en.wikipedia.org/wiki/C_%28programming_language%29 2 4 Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο ζηακαηνύλ θαη λα επαλαθηλνύλ ηνπο δηαθνκηζηέο. Σελ ιύζε ήξζε λα δώζε ε NCSA5 (National Center for Supercomputing Applications) ην 1993 θαηαζθεπάδνληαο έλα πεξηβάιινλ γηα ηνπο δηαθνκηζηέο πνπ ελγθαζεζηνύζε απιά εθηειέζεκα πξνγξάκκαηα γηα ζπγθεθξηκέλεο ρξήζεηο παξάγσληαο δπλακηθέο ηζηηνζειίδεο θάζε θνξά πνπ ν ρξήζηεο δεηνύζε πξόζβαζε εύθνια θαη γξήγνξα. Έπεηηα όηη αιιαγέο γίλνληαλ ζηε ζειίδα θαη θαη επέθηαζε ζε απηά ηα πξνγξάκκαηα απν ηελ πιεπξά ηνπ ρξήζηε ζηέιλνληαλ σο απάληεζε πίζσ ζηνλ δηαθνκηζηή. Απηά ηα πξνγξάκκαηα θαη ε ηερλνινγία νλνκάζηηθε CGI6 (Common Gateway Interface) πνπ γξάθσληαλ ζε απινύζηεξεο γιώζζεο πξνγξακκαηηζκνύ γλσζηέο σο scripting language7 θαη απνηεινύλ ηελ αξρή ησλ δηαδηθηπαθώλ εγαξκνγώλ. Έηζη κε ηελ πάξνδν ησλ ρξόλσλ απηέο νη ηερλνινγίεο θαη νη ηερληθέο εμειύρζεθαλ θαη άιιεο δεκηνπξγήζεθαλ όπσο ε γιώζζα JavaScript, ε αλαπαξαγσγή βίληεν κε ηελ ηερλνινγία Flash8, νη ηερληθέο Ajax9 θαη πνιιέο άιιεο πνπ ζηόρν έρνπλ ηελ εύθνιε θαη γξήγνξε πεξηήγεζε θαη αιιειεπίδξαζε ησλ ηζηηνζειίδσλ. Από ηερληθήο απόςεσο νη δηαδηθηπαθέο εθαξκνγέο είλαη πξνγξακκαηηδόκελα πεξηβάιινληα πνπ ιεηηνπξγνύλ ζηηο ηζηηνζειιίδεο ησλ θπιινκεηξεηώλ θαη δεκηνπξγνύληαη κε γιώζζεο πξνγξακκαηηζκνύ πνπ ππνζηηξίδνληαη απν ηνπο browsers όπσο είλαη ε JavaScript, ε HTML, ε CSS νη νπνίεο ζα αλαθεξζνύλ ζηα επόκελα θεθάιαηα αλαιπηηθόηεξα. Η ρξήζε δηαδηθηπαθώλ εθαξκνγώλ πξνζθέξεη κεγάιν εύξνο επηινγώλ πξνζαξκνγήο θαη ηξνπνπνίεζεο κέζσ ηεο άκεζεο αλάπηπμεο ελόο κεγάινπ θάζκαηνο ηερλνινγηώλ, εθαξαξκνγώλ θαη εξγαιείσλ ζε εθαηνκκύξηα ρξήζηεο παγθνζκίσο. Δπηηξέπνπλ έηζη ηελ θαιύηεξε ρξήζε ησλ browsers πνπ απνηεινύλ ινγηζκηθέο εθαξκνγέο όπνπ νη ρξήζηεο κπνξνύλ λα απνζπάζνπλ δεδνκέλα θαη λα αιιειεπηδξάζνπλ κε ην πεξηερόκελν ησλ ηζηηνζειίδσλ. Οί ζεκεξηλέο ηζηηνζειίδεο απέρνπλ πάξα πνιύ απν ηελ αξρηθή ηνπο κνξθή πνπ ήηαλ έλα ζηαηηθό θείκελν θαη κία απιή παξνπζίαζε γξαθηθώλ θαη εηθόλσλ. Οη κνληέξλεο ηζηηνζειίδεο επηηξέπνπλ ηνλ ρξήζηε λα απνζπάζεη θαη λα ρξεζηκνπνηήζεη δπλακηθά εμαηνκπθεπκέλν πεξηερόκελν αλάινγα κε ηηο πξνζσπηθέο πξνηηκήζεηο θαη ξπζκίζεηο. Δπηπξόζζεηα, νη ηζηηνζειίδεο έρνπλ ηε δπλαηόηεηα ιεηηνπξγίαο πξνγξακκάησλ απν ηε πιεπξά ηνπ ρξήζηε πνπ αιιάδνπλ ηνλ browser ζε κία δηεπαθή γηα ράξελ εθαξκνγώλ όπσο ην ειεθηξνληθό ηαρπδξνκείν θαη ην ινγηζκηθό δηαδξαζηίθσλ ραξηώλ (π.ρ., Yahoo Mail10 θαη Google Maps11). Απηά ηα πξνγξάκκαηα απν ηε πιεύξα ηνπ ρξήζηε πξνζζέηνπλ ιεηηνπξγηθόηεηα εηδηθά ζηε δεκηνπξγία κηαο δηαδξαζηηθήο εκπεηξίαο πνπ δελ ρξεηάδεηαη απαξαίηεηα ηελ αλαλέσζε ηεο ζειίδαο πξνζθέξνληαο έηζη έλα γλώξηκν γηα ηνλ θνηλό ρξήζηε πεξηβάιινλ έρνληαο ηελ εκθάληζε ελόο ιεηηνπξγηθνύ ζπζηήκαηνο. Πξνζθάησο έρνπλ δεκηνπξγεζεί ηερλνινγίεο θαη ηερληθέο πνπ ζπληνλίδνπλ απηά ηα πξνγξάκκαηα απν ηελ πιεπξά ηνπ ρξήζηε αιιά θαη απν ηελ πιεπξά ηνπ δηαθνκηζηή (web server) κε ζθνπό ηελ δεκηνπξγία κίαο αθόκα πην δηαδξαζηηθήο εκπεηξίαο. 4 Γιώζζα πξνγξακκαηηζκνύ C++ https://en.wikipedia.org/wiki/C%2B%2B NCSA https://en.wikipedia.org/wiki/National_Center_for_Supercomputing_Applications 6 CGI https://en.wikipedia.org/wiki/Common_Gateway_Interface#History 7 Scripting Language https://en.wikipedia.org/wiki/Scripting_language 8 Adobe Flash https://en.wikipedia.org/wiki/Adobe_Flash 9 Σερληθέο Ajax https://en.wikipedia.org/wiki/Ajax_%28programming%29 10 Yahoo Mail https://en.wikipedia.org/wiki/Yahoo!_Mail 11 Google Maps https://en.wikipedia.org/wiki/Google_Maps 5 5 Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ Οη δηαδηθηπαθέο εθαξκνγέο είλαη, επνκέλσο, ππνινγηζηηθά πξνγξάκκαηα πνπ επηηξέπνπλ ηνπο επηζθέπηεο ηνπ δηαδηθηύνπ λα θαηαζέζνπλ θαη λα αλαθηήζνπλ πιεξνθνξίεο θαη δεδνκέλα απν κία βάζε δεδνκέλσλ ρξεζηκνπνηώληαο ηνλ browser ηεο επηινγήο ηνπο θαη ηελ ηξνπνπνηεκέλε δηεπαθή ηεο αξεζθείαο ηνπο. Απηέο νη πιεξνθνξίεο έπεηηα εκθαλίδνληαη ζηνλ ρξήζηε όζν αιιάδνπλ δπλακηθά από ηελ δηαδηθηηαθή εθαξκνγή κέζσ ηνπ δηαθνκηζηή πνπ είλαη ππεύζπλνο γηα ηελ απνζήθεπζε απηώλ θαη γεληθόηεξα γηα ηελ ζπληήξεζε θαη νκαιή ιεηηνπξγία ηεο ζειίδαο θαη ηεο εθαξκνγήο. 2.1.2 Η γενική δομή ηυν διαδικηςακών εθαπμογών Η δνκή ησλ δηαδηθηπαθώλ εθαξκνγώλ απνηειείηαη ζπλήζσο απν επίπεδα πνπ νλνκάδνληαη βαζκίδεο (tiers) νπνπ ε θάζε βαζκίδα έρεη έλα ζπγθεθξηκέλν ξόιν. Οη εθαξκνγέο γεληθόηεξα απνηεινύληαη απν κόλν κία βαζκίδα θαη έρεη λα θάλεη κε ηελ πιεύξα ηνπ ρξήζηε ελώ νη δηαδηθηπαθέο εθαξκνγέο θαηα ην κεγαιύηεξν ηνπο πνζνζηό απαξηήδνληαη απν ηξείο βαζκίδεο. Τπαξρνύλ πνιιέο παξαιιαγέο αιιά ζηελ πηό θνηλή ηνπο κνξθή απηέο νη βαζκίδεο νλνκάδνληαη παξνπζίαζε (presentation), εθαξκνγή (application) θαη απνζήθεπζε (storage). Η πξώηε βαζκίδα ε παξνπζίαζε είλαη ζπλήζσο ν web browser, ε δεύηεξε βαζκίδα είλαη ε κεραλή πνπ ρξεζηκνπνηεί έλα δπλακηθό πεξηερόκελν κέζσ κίαο ηερλνινγίαο όπσο είλαη ε CGI, JSP12, ASP13, PHP, Python14 θαη αιιέο θαη ηέινο ε ηξίηε βαζκίδα είλαη ε βάζε δεδνκέλσλ. Ο ρξήζηεο κέζσ ηνπ browser επηιέγεη θάηη πνπ ζέιεη ζηέιλνληαο κία αίηεζε ζηνλ δηαθνκηζηή θαη απηό γίλεηαη κε ηε ρξήζε ηεο δεύηεξεο βαζκίδαο ε νπνία δίλεη πξόζβαζε ζηελ ηξίηε βαζκίδα ηε βάζε δεδνκέλσλ ζηνλ server αλαλεώλνληαο ηελ θαη αλαθηώληαο ηηο πιεξνθνξίεο πνπ δεηήζεθαλ απν ηνλ ρξήζηε. Έπεηηα ε εθαξκνγή παξνπζηάδεη απηέο ηηο πιεξνθνξίεο ζηνλ ρξήζηε κέζσ ηνπ browser. ηελ εηθόλα πνπ αθνινπζεί θαίλεηαη ε δηάηαμε θαη νη ιεπηνκέξηεο απηώλ ησλ ηξηώλ βαζκίδσλ κηαο δηαδηθηπαθήο εθαξκνγήο. 12 Java servlet (JSP) https://en.wikipedia.org/wiki/Java_servlet Active Server Pages (ASP) https://en.wikipedia.org/wiki/Active_Server_Pages 14 Η γιώζζα Python https://en.wikipedia.org/wiki/Python_%28programming_language%29 13 6 Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο Δικόνα 1 Οι βαθμίδερ ηηρ δομήρ μίαρ διαδικηςακήρ εθαπμογήρ ηελ εηθόλα πνπ αθνινπζεί θαίλεηαη έλα παξάδεηγκα ησλ ιεηηνπξγηώλ ηεο εθαξκνγήο όηαλ ζηέιλεηαη ε αίηεζε ηνπ ρξήζηε κέζσ ηνπ browser. Δικόνα 2 Γιαδικαζία λειηοςπγίαρ μίαρ διαδικηςακήρ εθαπμογήρ 7 Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ Γηα πην πνιιύπινθεο εθαξκνγέο ίζσο ρξεηάδεηαη λα ρξεζηκνπνηεζνύλ πεξηζζόηεξεο απν ηξείο βαζκίδεο κε ηε ινγηθή ε δεύηεξε βαζκίδα λα ρσξηζηεί ζε πεξηζζόηεξεο δίλνληαο έηζη ην πιενλέθηεκα ηνπ δηακνηξαζκνύ ησλ εξγαζηώλ θαη ηε κείσζε ησλ πεξηπηώζεσλ ιαζώλ. 2.2 Γιεπαθή Φπήζηη πσο πξναλαθέξζεθε ε δηεπαθή ηνπ ρξήζηε (User Interface – UI) είλαη έλα κεγάιν θαη ζεκαληηθό θνκκάηη ησλ δηαδηθηπαθώλ εθαξκνγώλ. Δίλαη ην θνκκάηη εθείλν πνπ βιέπεη, έξρεηαη ζε επαθή θαη αιιειεπηδξά έλαο θνηλόο επηζθέπηεο ησλ ηζηηνζειίδσλ ηνπ δηαδηθηύνπ ζε ζύγθξηζε κε έλα θαηαζθεπαζηή-πξνγξακκαηηζηε πνπ έρεη ηηο γλώζεηο θαη κπνξεί λα δηαρεηξηζηεί θαη λα αιιειεπηδξάζεη κε ηνλ πξνγξακκαηηζηηθό θώδηθα πνπ βξήζθεηαη πίζσ θαη ελώλεη ηηο βαζκίδεο κηαο ηέηνηαο εθαξκνγήο. Γηα απηόλ ηνλ ιόγν έλα UI πξέπεη λα είλαη όζν πην ειθπζηηθό θαη πξαθηηθό γίλεηαη γηα λα πξνζειθύεη θαη λα δηεπθνιύλεη ηνλ απιό ρξήζηε θαη ζε απηό ην θνκκάηη επηθεληξώλεηαη ε παξνύζα εξγαζία. 2.2.1 Οπιζμόρ και λειηοςπγία ηυν διεπαθών σπήζηη ε πνιινύο ηνκείο θαη εηδηθόηεξα ζηνλ ηνκέα ηεο πιεξνθνξηθήο κηα δηεπαθή ρξήζηε είλαη ηα πάληα πνπ πεξηιακβάλνληαη ζην κέζν επηθνηλσλίαο θαη αιιειεπίδξαζεο κίαο κεραλήο θαη ηνπ αλζξώπνπ. Απηά ζε γεληθέο γξακκέο πεξηιακβάλνπλ ηελ νζόλε, ην πιεθηξνιόγην, ην πνληίθη θαη όια ηα ζπλαθή πεξηθεξηαθά πνπ έρνπλ λα θάλνπλ κε κία κεραλή θαη εηδηθόηεξα κε έλα ειεθηξνληθό ππνινγηζηή. ηελ πεξίπησζε ηνπ internet θαη ησλ δηδηθηπαθώλ εθαξκνγώλ είλαη ην γξαθηθό πεξηβάιινλ θαη νη δπλαηόηεηεο πνπ πξνζθέξεη ζηνλ ρξήζηε λα επηθνηλσλίζεη κε ηελ ζειίδα θαη ην πξόγξακκα θαη ην πώο δέρνληαη θαη αληηδξνύλ ζε απηήλ ηελ επηθνηλσλία. θνπόο απηήο ηεο επηθνηλσλίαο είλαη λα επηηξαπεί απνηειεζκαηηθόο ρεηξεζκόο ηεο κεραλή απν ηελ πιεπξά ηνπ αλζξώπνπ ελώ παξάιιεια ην κεράλεκα δίλεη πιεξνθνξίεο πίζσ ζηνλ ρξήζηε γηα λα βνεζήζεη ηε δηαδηθαζία απνθάζεσλ. Μεξηθά παξαδείγκαηα απηήο ηεο γεληθήο ηδέαο ησλ UI είλαη όπσο πξναλαθέξζεθε ηα πεξηθεξηαθά ελόο ειεθηξνληθνύ ππνινγηζηή θαη ην ιεηηνπξγηθό ζύζηεκα κε ην νπνίν δνπιεύεη, ην πάλει δηαθόξσλ κεραλεκάησλ θαη γέληθα όζα εξγαιεία έρνπλ απηή ηελ δπλαηόηεηα επηθνηλσλίαο. Γεληθά ζηόρνο ηνπ ζρεδηαζκνύ ελόο user interface είλαη ε παξαγσγή ελόο πεξηβάινληνο ην νπνίν ζα είλαη εύθνιν ζηελ ρξήζε, θαηαλνεηό απν ην επξή θνηλό θαη επράξηζην νύησο ώζηε κε ηε ιηγόηεξε πξνζπάζεηα απν ηελ πιεπξά ηνπ ρξήζηε λα επηηπλράλεηαη ην επηζπκηηό απνηέιεζκα. Με ηελ αλάπηπμε θαη ηελ δηάδνζε ησλ ειεθηξνληθώλ ππνινγηζηώλ ν όξνο user interface ζπλήζσο παξαπέκπεη ζην γξαθηθό πεξηβάιινλ ησλ ππνινγηζηώλ θαη ηνπ internet πνπ νλνκάδεηαη graphical user interface (GUI) θαη όρη ηόζν ζηελ γεληθή ηνπ κνξθή ηεο δηεπαθήο ρξήζηε κεραλεκάησλ. ηελ επηζηήκε ησλ ππνινγηζηώλ, κηα γξαθηθή δηεπαθή ρξήζηε ή GUI είλαη έλαο ηύπνο interface πνπ επηηξέπεη ζηνπο ρξήζηεο λα αιιειεπηδξνύλ κε ειεθηξνληθέο ζπζθεπέο κέζσ γξαθηθώλ εηθνληδίσλ θαη νπηηθώλ ελδείμεσλ, ζε αληίζεζε κε δηαζπλδέζεηο πνπ βαζίδνληαη ζε θείκελν, δαθηπινγξαθεκέλεο εηηθέηεο εληνιέο ή πινήγεζε θεηκέλνπ. Σα GUI εηζήρζεζαλ σο αληίδξαζε ζηελ αληίιεςε απόηνκεο 8 Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο θακπύιεο εθκάζεζεο ηεο γξακκήο εληνιώλ δηεπαθώλ (δείθηεο CLI), πνπ απαηηεί ηηο εληνιέο πνπ πξέπεη λα πιεθηξνινγεζεί. Οη δξάζεηο ζε έλα γξαθηθό πεξηβάιινλ πνπ ζπλήζσο εθηεινύληαη κέζσ άκεζνπ ρεηξηζκνύ ησλ γξαθηθώλ ζηνηρείσλ. Δθηόο από ηνπο ππνινγηζηέο, GUIs κπνξεί λα βξεζνύλ ζε θνξεηέο ζπζθεπέο όπσο MP3 players, θνξεηέο ζπζθεπέο αλαπαξαγσγήο πνιπκέζσλ, ζπζθεπέο παηρληδηώλ θαη γεληθά ζηνλ εμνπιηζκό θαηνηθηώλ, γξαθείσλ θαη βηνκεραληώλ. Ο όξνο «γξαθηθό πεξηβάιινλ» δελ ηείλεη όκσο λα εθαξκνζηεί θαη ζε άιια είδε ρακειήο αλάιπζεο ησλ δηαζπλδέζεσλ κε αλαιύζεηο νζόλεο, όπσο ηα βηληενπαηρλίδηα (όπνπ ε HUD είλαη πξνηηκώκελε), ή δελ πεξηνξίδεηαη ζε επίπεδεο νζόλεο, όπσο νγθνκεηξηθή νζόλεο, δηόηη ν όξνο πεξηνξίδεηαη ζην πεδίν εθαξκνγήο ησλ δύν δηαζηάζεσλ νζόλεο θαη είλαη ζε ζέζε λα πεξηγξάςεη γεληθέο πιεξνθνξίεο, ζύκθσλα κε ηελ παξάδνζε ηεο έξεπλαο ηεο επηζηήκεο ησλ ππνινγηζηώλ ζην PARC (Palo Alto Research Center).15 ρεδηάδνληαο ηελ νπηηθή ζύλζεζε θαη ρξνληθή ζπκπεξηθνξά ελόο GUI είλαη έλα ζεκαληηθό κέξνο ηνπ πξνγξακκαηηζκνύ εθαξκνγώλ ινγηζκηθνύ ζηνλ ηνκέα ηεο αιιειεπίδξαζεο αλζξώπνπ-ππνινγηζηή. ηόρνο ηεο είλαη λα βειηηώζεη ηελ απνηειεζκαηηθόηεηα θαη ηελ επθνιία ρξήζεο γηα ηελ ππνθείκελε ινγηθή ηνπ ζρεδηαζκνύ ελόο απνζεθεπκέλνπ πξνγξάκκαηνο θαη ηελ πεηζαξρία ηνπ ζρεδηαζκνύ γλσζηή σο ρξεζηηθόηεηα. Μέζνδνη κε επίθεληξν ηνλ ρξήζηε ζρεδηάδνληαη θαη ρξεζηκνπνηνύληαη γηα λα εμαζθαιηζηεί όηη ε νπηηθή γιώζζα πνπ εηζήρζε ζην ζρέδην είλαη θαιά πξνζαξκνζκέλε ζηηο εξγαζίεο. Σππηθά, ν ρξήζηεο αιιειεπηδξά κε πιεξνθνξίεο από ηνλ νπηηθό ρεηξηζκό ησλ γξαθηθώλ ζηνηρείσλ πνπ επηηξέπνπλ ηελ αιιειεπίδξαζε θαηάιιεια γηα ην είδνο ησλ δεδνκέλσλ πνπ θαηέρνπλ. Σα widgets16 είλαη κηα θαιά ζρεδηαζκέλε δηεπαθή πνπ επηιέγνληαη γηα λα ζηεξίμνπλ ηηο ελέξγεηεο πνπ είλαη απαξαίηεηεο γηα ηελ επίηεπμε ησλ ζηόρσλ ηνπ ρξήζηε. To ζηνηρείν Μνληέιν-Θέαζε-Υεηξηζκόο (Model-ViewController)17 επηηξέπεη ηελ επέιηθηε δνκή ζηελ νπνία ην πεξηβάιινλ είλαη αλεμάξηεην από απηή θαη έκκεζα ζπλδένληαη κε ηε ιεηηνπξγία ηεο εθαξκνγήο, έηζη ώζηε ην GUI κπνξεί εύθνια λα πξνζαξκνζηεί. Απηό επηηξέπεη ζην ρξήζηε λα επηιέμεη ή λα ζρεδηάζεη κία δηαθνξεηηθή όςε θαηά βνύιεζε, θαη δηεπθνιύλεη έηζη ην έξγν ηνπ ζρεδηαζηή γηα λα αιιάμεη ην πεξηβάιινλ ζύκθσλα κε ηηο αλάγθεο ησλ ρξεζηώλ πνπ εμειίζζνληαη. Ο θαιόο ζρεδηαζκόο δηεπαθήο ρξήζηε ζρεηίδεηαη κε ην ρξήζηε, δελ είλαη ε αξρηηεθηνληθή ηνπ ζπζηήκαηνο. Μεγάια widgets, όπσο ηα παξάζπξα, ζπλήζσο παξέρνπλ έλα πιαίζην ή δνρείν γηα ην θύξην πεξηερόκελν ηεο παξνπζίαζεο, όπσο κηα ηζηνζειίδα, κήλπκα ειεθηξνληθνύ ηαρπδξνκείνπ ή ζρέδην. Μηθξόηεξα ζπλήζσο δξνπλ σο εξγαιείν ηεο εηζόδνπ ηνπ ρξήζηε. Έλα γξαθηθό πεξηβάιινλ κπνξεί λα ζρεδηαζηεί γηα ηηο αλάγθεο κηαο αγνξάο γξαθηθώλ δηεπαθώλ ρξήζηε γηα ζπγθεθξηκέλεο εθαξκνγέο. Παξαδείγκαηα θάπνηνλ ηέηνησλ GUI γηα ζπγθεθξηκέλεο εθαξκνγέο πεξηιακβάλνπλ απηόκαηα ηακεηνινγηζηηθά κεραλήκαηα (ΑΣΜ), νζόλεο αθήο ζε εζηηαηόξηα, ηακεία self-service πνπ ρξεζηκνπνηνύληαη ζε 15 Η εηαηξεία PARC https://en.wikipedia.org/wiki/PARC_%28company%29 Σα web widgets https://en.wikipedia.org/wiki/Web_widget 17 Σν ζηνηρείν M-V-C https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller 16 9 Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ θαηαζηήκαηα ιηαληθήο πώιεζεο, αεξνπνξηθά εηζεηήξηα θαη ην check-in, ελεκεξσηηθά πεξίπηεξα ζε δεκόζηνπο ρώξνπο, όπσο ζε έλα ζηδεξνδξνκηθό ζηαζκό ή ζε έλα κνπζείν, θαη νζόλεο ειέγρνπ ζε κία ελζσκαησκέλε βηνκεραληθή εθαξκνγή πνπ ρξεζηκνπνηεί έλα ιεηηνπξγηθό ζύζηεκα πξαγκαηηθνύ ρξόλνπ.Έλα γξαθηθό πεξηβάιινλ ρξεζηκνπνηεί έλα ζπλδπαζκό ηερλνινγηώλ θαη ζπζθεπώλ, γηα λα παξέρεη κηα πιαηθόξκα πνπ ν ρξήζηεο κπνξεί λα αιιειεπηδξάζεη κε θαη γηα ηηο εξγαζίεο ζπιινγήο θαη παξαγσγήο πιεξνθνξηώλ. Η ζεηξά ησλ ζηνηρείσλ πνπ απαξηήδνπλ κηα νπηηθή γιώζζα έρνπλ εμειηρζεί γηα λα αληηπξνζσπεύνπλ πιεξνθνξίεο πνπ απνζεθεύνληαη ζε ειεθηξνληθνύο ππνινγηζηέο. Απηό ην θαζηζηά επθνιόηεξν γηα ηα άηνκα κε ιίγεο δεμηόηεηεο ειεθηξνληθώλ ππνινγηζηώλ λα επεμεξγάδνληαη θαη λα ρξεζηκνπνηνύλ ην ινγηζκηθό ηνπ ππνινγηζηή. Ο πην θνηλόο ζπλδπαζκόο ησλ ζηνηρείσλ απηώλ ζε γξαθηθά πεξηβάιινληα είλαη ην WIMP18 («παξάζπξν, εηθνλίδην, κελνύ, ζπζθεπή θαηάδεημεο"), εηδηθά ζε πξνζσπηθνύο ππνινγηζηέο. Σν ζηπι WIMP ηεο αιιειεπίδξαζεο ρξεζηκνπνηεί κηα εηθνληθή ζπζθεπή εηζόδνπ γηα ηνλ έιεγρν ηεο ζέζεο ηνπ δείθηε, ηηο πεξηζζόηεξεο θνξέο έλα πνληίθη, θαη παξνπζηάδεη ηηο πιεξνθνξίεο νξγαλσκέλεο ζε παξάζπξα πνπ εθπξνζσπνύληαη κε εηθόλεο. Οη δηαζέζηκεο εληνιέο θαηαξηίδνληαη από θνηλνύ ζην κελνύ, θαη νη ελέξγεηεο πνπ εθηεινύληαη θάλνληαο ρεηξνλνκίεο κε ηε ζπζθεπή θαηάδεημεο. Έλαο δηαρεηξηζηήο παξαζύξσλ δηεπθνιύλεη ηηο αιιειεπηδξάζεηο κεηαμύ ησλ παξαζύξσλ, εθαξκνγέο, θαη ην ζύζηεκα παξαζύξσλ. Σν ζύζηεκα παξαζύξσλ ρεηξίδεηαη ζπζθεπέο πιηθνύ όπσο ζπζθεπέο θαηάδεημεο θαη γξαθηθά πιηθνύ, θαζώο θαη ηελ ηνπνζέηεζε ηνπ δείθηε. ε πξνζσπηθνύο ππνινγηζηέο, όια απηά ηα ζηνηρεία δηακνξθώλνληαη κέζα από κηα επηθάλεηα εξγαζίαο, γηα λα παξάγεη κηα πξνζνκνίσζε πνπ νλνκάδεηαη γξαθηθό πεξηβάιινλ εξγαζίαο ζην νπνίν ε νζόλε αληηπξνζσπεύεη έλαλ επηηξαπέδην ππνινγηζηή, πάλσ ζηελ νπνία κπνξνύλ λα ηνπνζεηεζνύλ ηα έγγξαθα θαη νη θάθεινη ησλ εγγξάθσλ. Γηαρεηξηζηέο παξαζύξσλ θαη άιιν ινγηζκηθό ζπλδπάδνληαη γηα λα πξνζνκνηώζνπλ ην πεξηβάιινλ επηθάλεηαο εξγαζίαο κε δηαθνξεηηθό βαζκό ξεαιηζκνύ. 18 Σν γξαθηθό πεξηβάιινλ WIMP https://en.wikipedia.org/wiki/WIMP_%28computing%29 10 Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο Δικόνα 3 Δπίπεδα ένορ GUI βαζιζμένα ζε ζύζηημα παπαθύπων 2.2.2 Ιζηοπία ηυν γπαθικών διεπαθών σπήζηη ηελ πξώηκε κνξθή ησλ ππνινγηζηώλ δελ ππήξρε πνιύ ε ηδέα ησλ user interface πέξαλ ηεο θνλζόιαο ηνπ ρεηξεζηή, κεξηθώλ θνπκπηώλ θαη ησλ θαξηώλ κε ηα δεδνκέλα θαη ηα απνηειέζκαηα ζέησληαο όκσο ηηο βάζεηο γηα ηελ αλάπηπμε γξαθηθνύ πεξηβάιινληνο. Πνιιέο εηαηξίεο έθηνηε αλέπηπμαλ ηερλνινγίεο θαη ηερληθέο πνπ βειηίσζαλ θαηα πνιύ ηνλ ηξόπν αιιειεπίδξαζεο ησλ αλζξώπσλ κε ηνπο ππνινγηζηέο απν ηελ επηλόεζε ηνπ πιεθηξνινγίνπ θαη ηνπ πνληηθηνύ, έλρξνκσλ νζνλώλ, δηαδξαζηηθώλ ιεηηνπξγηθώλ ζπζηεκάησλ κέρξη ηε επξή δηάδνζε ηνπ internet θαη ησλ πξνζνπηθώλ ππνινγηζηώλ ζε θάζε ζπίηη θηάλνληαο έηζη ζην ζήκεξα ηελ επνρή ηεο πιεξνθόξεζεο θαη ηεο ηερλνινγίαο. Έλαο πξόδξνκνο ηνπ GUI επηλνήζεθε από εξεπλεηέο ηνπ Δξεπλεηηθνύ Ιλζηηηνύηνπ ηνπ ηάλθνξλη, κε επηθεθαιήο ηνλ Douglas Engelbart. Αλέπηπμαλ ηε ρξήζε ησλ ππεξζπλδέζκσλ πνπ βαζίδνληαη ζε θείκελν ρεηξαγσγνύκελν κε ην πνληίθη γηα ην ζύζηεκα On-Line (NLS). Η έλλνηα ησλ ππεξζπλδέζκσλ βειηηώζεθε πεξαηηέξσ θαη επεθηάζεθε ζε γξαθηθά από εξεπλεηέο ηεο Xerox PARC θαη ζπγθεθξηκέλα ηνλ Alan Kay, ν νπνίνο πήγε πέξα από ππεξζπλδέζκνπο πνπ βαζίδνληαη ζε θείκελν θαη ρξεζηκνπνίεζε έλα γξαθηθό πεξηβάιινλ πνπ είλαη ε θύξηα δηεπαθή γηα ηνλ ππνινγηζηή Xerox Alto θαη θπθινθόξεζε ην 1973. Σα πεξηζζόηεξα ζύγρξνλα ζπζηήκαηα ηα γξαθηθά πεξηβάιινληα ηνπο πξνέξρνληαη από απηό ην ζύζηεκα. Ο Ivan Sutherland αλέπηπμε έλα ζύζηεκα πνπ βαζίδεηαη ζε δείθηε πνπ νλνκάδεηαη Sketchpad 11 Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ ην 1963. Υξεζηκνπνηεί έλα ειαθξύ ζηπιό γηα λα θαζνδεγήζεη ηε δεκηνπξγία θαη ην ρεηξηζκό ησλ αληηθεηκέλσλ ζε κεραλνινγηθά ζρέδηα. Η δηεπαθή ρξήζηε ηνπ PARC απνηειείηαη από γξαθηθά ζηνηρεία, όπσο ηα παξάζπξα, ηα κελνύ, ηα θνπκπηά επηινγήο θαη πιαίζηα ειέγρνπ. Η έλλνηα ησλ εηθόλσλ θαζηεξώζεθε αξγόηεξα από ηνλ David Smith, ν νπνίνο είρε γξάςεη κηα δηαηξηβή γηα ην ζέκα απηό ππό ηελ θαζνδήγεζε ηνπ Kay. Η δηεπαθή ρξήζηε ηνπ PARC ρξεζηκνπνηεί κηα ζπζθεπή θαηάδεημεο εθηόο από έλα πιεθηξνιόγην. Οη πηπρέο απηέο κπνξνύλ λα αμηνπνηεζνύλ κε ην ελαιιαθηηθό αθξσλύκην WIMP (Windows Icons Menus Pointing device) πνπ ζεκαίλεη παξάζπξα, εηθνλίδηα, κελνύ θαη ζπζθεπή θαηάδεημεο. Μεηά PARC ην πξώην θεληξηθό κνληέιν GUI ιεηηνπξγίαο ηνπ ππνινγηζηή ήηαλ ην ύζηεκα Πιεξνθνξηώλ Xerox 8010 Star ην 1981, αθνινπζνύκελν από ην Apple Lisa ην νπνίν παξνπζίαζε ηελ έλλνηα ηεο γξακκήο κελνύ, θαζώο θαη ησλ ειέγρσλ παξαζύξνπ ην 1983, ην Apple Macintosh 128K ην 1984, θαη ην Atari ST θαη Commodore Amiga ην 1985. Σν VISI On θπθινθόξεζε ην 1983 γηα ηνπο ππνινγηζηέο ζπκβαηνύο κε IBM, αιιά δελ έγηλε δεκνθηιήο ιόγσ ησλ πςειώλ απαηηήζεσλ ηνπ πιηθνύ ηεο. Παξ 'όια απηά, ήηαλ κηα θαζνξηζηηθή επίδξαζε ζηε ζύγρξνλε αλάπηπμε ησλ Microsoft Windows. Η Apple19, ε IBM20 θαη ε Microsoft21 ρξεζηκνπνίεζαλ πνιιέο από ηηο ηδέεο ηεο Xerox γηα ηελ αλάπηπμε ησλ πξντόλησλ ηνπο, θαη ηηο πξνδηαγξαθέο πξόζβαζε ηνπ θνηλνύ ρξήζεο ηεο IBM απνηειόληαο ηε βάζε ηεο δηεπαθήο ρξήζηε πνπ βξέζεθε ζηα Microsoft Windows, IBM OS/2 Presentation Manager θαη ηελ Unix Motif εξγαιεηνζήθε θαη δηαρεηξηζηή παξαζύξσλ. Απηέο νη ηδέεο εμειίρζεθαλ γηα ηε δεκηνπξγία δηαζύλδεζεο πνπ βξέζεθαλ ζε ηξέρνπζεο εθδόζεηο ησλ Microsoft Windows, θαζώο θαη ζε δηάθνξα πεξηβάιινληα επηθάλεηαο εξγαζίαο γηα ηύπνπ Unix ιεηηνπξγηθά ζπζηήκαηα, όπσο ην Mac OS X θαη Linux. Έηζη, νη πεξηζζόηεξεο ηξέρνπζεο GUI έρνπλ ζε κεγάιν βαζκό θνηλά ηδηώκαηα. Σα GUI ήηαλ έλα πνιπ ζπδεηήζηκν ζέκα ζηηο αξρέο ηνπ 1980. Σν Apple Lisa θπθινθόξεζε ην 1983 θαη ππήξραλ δηάθνξα ζπζηήκαηα παξαζύξσλ γηα ην MS-DOS. Μεκνλσκέλεο αηηήζεηο γηα δηάθνξεο πιαηθόξκεο πνπ παξνπζηάδαλ δηθέο ηνπο εθδνρέο ζρεηηθά κε ην γξαθηθό πεξηβάιινλ. Παξά ηα πιενλεθηήκαηα ησλ γξαθηθώλ πεξηβάιινλησλ, πνιινί ζρνιηαζηέο ακθηζβήηεζαλ ηελ αμία ηνπ ζπλόινπ ηεο έλλνηαο, αλαθέξνληαο πεξηνξηζκνύο ηνπ πιηθνύ, θαζώο θαη ηε δπζθνιία ζηελ εμεύξεζε ζπκβαηνύ ινγηζκηθνύ. Σν 1984, ε Microsoft μεθίλεζε κηα εθηεηακέλε εθζηξαηεία κάξθεηηλγθ γηα ηα Windows 95 πνπ ήηαλ κηα ζεκαληηθή επηηπρία ζηελ αγνξά θαηά ηελ έλαξμε θπθινθνξίαο ηνπ ινγηζκηθνύ θαη ζύληνκα έγηλε ην πην δεκνθηιέο ιεηηνπξγηθό ζύζηεκα desktop. Πνιιά ρξόληα κεηά ην 2007, κε ην iPhone θαη αξγόηεξα ην 2010 κε ηελ εηζαγσγή ηνπ iPad, ε Apple δηέδσζε ην ζηπι WIMP αιιειεπίδξαζεο γηα νζόλεο 19 Η εηαηξεία Apple https://en.wikipedia.org/wiki/Apple_Inc. Η εηαηξεία IBM https://en.wikipedia.org/wiki/IBM 21 Η εηαηξεία Microsoft https://en.wikipedia.org/wiki/Microsoft 20 12 Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο multi-touch, θαη απηέο νη ζπζθεπέο ζεσξήζεθαλ όηη είλαη νξόζεκα ζηελ αλάπηπμε ηεο θηλεηέο ζπζθεπέο. Σα γξαθηθά πεξηβάιινληα γλσζηά ζηνπο πεξηζζόηεξνπο αλζξώπνπο από ηα κέζα ηεο δεθαεηίαο ηνπ 2010 είλαη ηα Microsoft Windows, Mac OS X, θαη ηηο δηαζπλδέζεηο ζπζηήκαηνο X Window γηα επηηξαπέδηνπο θαη θνξεηνύο ππνινγηζηέο, θαζώο θαη ην iOS ηεο Apple, ην Android, Symbian, BlackBerry OS, Windows Phone, ην Palm OS / Web OS, θαη ν Firefox OS γηα θνξεηέο smartphone ζπζθεπέο. 2.3 Σσεδιαζμόρ διαδικηύος Ο ζρεδηαζκόο δηαδηθηύνπ (Web design) πεξηιακβάλεη πνιιέο δηαθνξεηηθέο δεμηόηεηεο θαη εηδηθόηεηεο ζηελ παξαγσγή θαη ηε ζπληήξεζε ησλ δηθηπαθώλ ηόπσλ. Οη δηαθνξεηηθέο πεξηνρέο ηνπ web design πεξηιακβάλνπλ ηνλ γξαθηθό ζρεδηαζκό ηνπ δηαδηθηύνπ (web graphic design), ηνλ ζρεδηαζκνύ ηεο δηεπαθή, ηελ ζπγγξαθή ζπκπεξηιακβαλνκέλνπ ηνπ ηππνπνηεκέλνπ θώδηθα θαη ην ηδηόθηεην ινγηζκηθό, ηνλ ζρεδηαζκόο ηεο εκπεηξίαο ηνπ ρξήζηε θαη ηελ βειηηζηνπνίεζε ησλ κεραλώλ αλαδήηεζεο. πρλά, πνιιά άηνκα ζα εξγαζηνύλ ζε νκάδεο πνπ θαιύπηνπλ δηάθνξεο πηπρέο ηεο δηαδηθαζίαο ζρεδηαζκνύ, αλ θαη νξηζκέλνη ζρεδηαζηέο πξνηπκνύλ λα ηα θαιύςνπλ όια. Ο όξνο web design ζπλήζσο ρξεζηκνπνηείηαη γηα λα πεξηγξάςεη ηε δηαδηθαζία ζρεδηαζκνύ πνπ αθνξά ην front-end (από ηελ πιεπξά ηνπ πειάηε) ζρεδηαζκό κηαο ηζηνζειίδαο. Σν Web design επηθαιύπηεη κεξηθώο ηνπο κεραληζκνύο ηνπ δηαδηθηύνπ ζην επξύηεξν πεδίν ηεο αλάπηπμεο ησλ ηζηνζειίδσλ. Οη ζρεδηαζηέο ηζηνζειίδσλ θαινύληαη λα έρνπλ επίγλσζε ηεο ρξεζηηθόηεηαο θαη αλ ν ξόινο ηνπο πεξηιακβάλεη ηε δεκηνπξγία πην επηθεξδνύο πξνηόληνο θαινύληαη επίζεο λα είλαη ελεκεξσκέλνη κε ηηο θαηεπζπληήξηεο γξακκέο πξνζβαζηκόηεηαο ζηνλ παγθόζκην ηζηό. Οη ζρεδηαζηέο δηαδηθηύνπ (web designers) ρξεζηκνπνηνύλ κηα πνηθηιία δηαθνξεηηθώλ εξγαιείσλ, αλάινγα κε ην πνην κέξνο ηεο δηαδηθαζίαο παξαγσγήο πνπ εκπιέθνληαη. Απηά ηα εξγαιεία ζα πξέπεη λα ελεκεξώλνληαη θαηά θαηξνύο από λεόηεξα πξόηππα θαη ινγηζκηθά, αιιά νη αξρέο πίζσ από απηά παξακέλνπλ νη ίδηεο. Οη ζρεδηαζηέο ηνπ γξαθηζηίθνπ θνκκαηηνύ ηνπ δηαδηθηύνπ (web graphic designers) ρξεζηκνπνηνύλ ζπζθεπαζίεο γξαθηθώλ γηα ηε δεκηνπξγία εηθόλσλ δηακνξθνκέλσλ εηδηθά γηα ην δηαδίθηπν ή ζρεδηάδνπλ πξσηόηππα. Σερλνινγίεο πνπ ρξεζηκνπνηνύληαη γηα λα δεκηνπξγήζνπλ ηζηνζειίδεο πεξηιακβάλνπλ ηππνπνηεκέλεο πξνζαπμήζεηο, ε νπνίεο κπνξεί λα είλαη θσδηθνπνηεκέλεο κε ην ρέξη ή δεκηνπξγνύληαη από ην ινγηζκηθό επεμεξγαζίαο. Τπάξρεη επίζεο ην ηδηόθηεην ινγηζκηθό πνπ βαζίδεηαη ζε plug-ins22 πνπ παξαθάκπηεη ζε εθδόζεηο πξνγξακκάησλ πεξηήγεζεο ηνπ πειάηε. Απηά είλαη ζπρλά ινγηζκηθά επεμεξγαζίαο, αιιά κε ηε δπλαηόηεηα λα ρξεζηκνπνηνύλ γιώζζα πξνγξακκαηηζκνύ ηνπ ινγηζκηθνύ. Δξγαιεία βειηηζηνπνίεζεο κεραλώλ αλαδήηεζεο κπνξεί λα ρξεζηκνπνηεζνύλ γηα λα ειέγμνπλ ηελ ηαμηλόκεζε κεραλώλ αλαδήηεζεο θαη λα πξνηείλνπλ βειηηώζεηο. Άιια εξγαιεία ζρεδηαζηώλ ηζηνζειίδσλ πνπ κπνξνύλ λα ρξεζηκνπνηεζνύλ πεξηιακβάλνπλ ηε ζήκαλζε επηθύξσζεο θαη άιισλ εξγαιείσλ αμηνιόγεζεο γηα ηελ επρξεζηία θαη ηελ πξνζβαζηκόηεηα κε ζθνπό λα εμαζθαιηζηεί ε δπλαηόηεηα νη 22 Σν plug-in https://en.wikipedia.org/wiki/Plug-in_%28computing%29 13 Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ ηζηνζειίδεο ηνπο λα ζπκκνξθώλνληαη κε ηηο νδεγίεο πξνζβαζηκόηεηαο ζηνλ παγθόζκην ηζηό. Σν πεξηερνκέλνπ ελόο δηθηπαθνύ ηόπνπ εμαξηάηαη ζπρλά από ηελ θαηαλόεζε ησλ ρξεζηώλ γηα ην πώο ιεηηνπξγεί ε ηζηνζειίδα. Απηό είλαη κέξνο ηνπ ζρεδηαζκνύ ηεο εκπεηξίαο ηνπ ρξήζηε. Η εκπεηξία ηνπ ρξήζηε ζπλδέεηαη κε ηε δηάηαμε ηεο ηζηηνζειίδαο, ηηο ζαθείο νδεγίεο θαη ηελ επηζήκαλζε ζε έλαλ ηζηνρώξν. Σν πόζν θαιά έλαο ρξήζηεο θαηαλνεί πσο κπνξεί λα αιιειεπηδξάζεη ζε κηα πεξηνρή κπνξεί επίζεο λα εμαξηάηαη από ην δηαδξαζηηθό ζρεδηαζκό ηνπ ρώξνπ. Δάλ έλαο ρξήζηεο αληηιακβάλεηαη ηελ ρξεζηκόηεηα ηεο ηζηνζειίδαο, είλαη πην πηζαλό λα ζπλερίζεη λα ηε ρξεζηκνπνηεί. Παξόια απηά νη ρξήζηεο πνπ είλαη εμεηδηθεπκέλνη θαη κε πνιύ έκπεηξα κε ηε ρξήζε ηνπ δηθηπαθνύ ηόπνπ κπνξεί λα βξνύλ έλα πην κνλαδηθό, αθόκε ιηγόηεξν δηαηζζεηηθό ή ιηγόηεξν θηιηθό πξνο ην ρξήζηε ην interface κίαο ηέηνηαο ηζηνζειίδαο ρξήζηκν. Ωζηόζν, νη ρξήζηεο κε ιηγόηεξε εκπεηξία είλαη ιηγόηεξν πηζαλό λα δνύλ ηα πιενλεθηήκαηα ή ηε ρξεζηκόηεηα κηαο ιηγόηεξν δηαηζζεηηθήο δηεπαθήο ηζηνζειίδαο. Απηό νδεγεί ηελ ηάζε γηα κηα πην θαζνιηθή εκπεηξία ηνπ ρξήζηε θαη ηελ επθνιία πξόζβαζεο γηα λα θηινμελήζεη όζν ην δπλαηόλ πεξηζζόηεξνπο ρξήζηεο αλεμάξηεηα από ηηο ηθαλόηεηεο ηνπ ρξήζηε. Μεγάιν κέξνο ηνπ ζρεδηαζκνύ εκπεηξίαο ηνπ ρξήζηε θαη ηνπ δηαδξαζηηθνύ ζρεδηαζκνύ πεξηιακβάλνληαη ζην ζρεδηαζκό δηεπαθήο ρξήζηε. ύλζεηεο δηαδξαζηηθέο ιεηηνπξγίεο κπνξεί λα πεξηιακβάλνπλ plug-ins, αλ όρη πξνρσξεκέλε θσδηθνπνίεζε ησλ γισζζηθώλ δεμηνηήησλ. Δπηιέγνληαο ην αλ ζα ρξεζηκνπνηεζεί ή όρη δηαδξαζηηθόηεηα πνπ απαηηεί plug-ins είλαη κηα θξίζηκε απόθαζε ζην ζρεδηαζκό ηεο εκπεηξία ηνπ ρξήζηε. Δάλ ην plug-in δελ έξρεηαη πξνεγθαηεζηεκέλν κε ηα πεξηζζόηεξα πξνγξάκκαηα πεξηήγεζεο, ππάξρεη ν θίλδπλνο όηη ν ρξήζηεο δέλ ζα έρεη νύηε ηελ ηερλνγλσζία ή ηελ ππνκνλή γηα λα εγθαηαζηήζεη έλα plug-in κόλν γηα λα έρεη πξόζβαζε ζην πεξηερόκελν. Δάλ ε ιεηηνπξγία απαηηεί πξνεγκέλε θσδηθνπνίεζε ησλ γισζζηθώλ δεμηνηήησλ, κπνξεί λα είλαη πνιύ δαπαλεξή είηε ζε ρξόλν ή ρξήκαηα γηα λα θσδηθνπνηεζεί ζε ζύγθξηζε κε ην πόζν ζα εληζρύζεη θαη ζα πξνζζέζεη ε ιεηηνπξγία ζηελ εκπεηξία ηνπ ρξήζηε. Τπάξρεη επίζεο ν θίλδπλνο κία ηέηνηα πξνρσξεκέλε δηαδξαζηηθόηεηα λα είλαη αζύκβαηε κε ηα παιαηόηεξα πξνγξάκκαηα πεξηήγεζεο ή ηηο δηακνξθώζεηο πιηθνύ. Γεκνζηεύνληαο κηα ιεηηνπξγία πνπ δελ εκπλέεη αμηόπηζηα είλαη δπλεηηθά ρεηξόηεξν γηα ηελ εκπεηξία ηνπ ρξήζηε από ην λα κελ θάλεη θακία πξνζπάζεηα βειηίσζεο. Δμαξηάηαη από ην θνηλό πνπ απεπζήλεηαη θαη αλ είλαη πηζαλόλ λα ρξεηαζηεί ή λα αμίδεη ηπρόλ θηλδύλνπο. 2.3.1 Σηαηικόρ ζσεδιαζμόρ διαδικηύος ηαηηθόο ζρεδηαζκόο δηαδηθηπαθώλ ηζηηνζειίδσλ είλαη ην κέζν ζρεδίαζεο θαη θαηαζθεύεο ηζηηνζειίδσλ πνπ πξνβάινπλ ην ίδην πεξηερόκελν κε ηηο ηδηέο δηαζηάζεηο ζε όινπο ηνπο επηζθέπηεο αθόκα θαη αλ ρξεζηκνπνηνύλ δηαθνξεηηθνύο browsers κε άιιεο ηερλνινγίεο θαη κεγέζε. Οπζηαζηηθά απν ηέηνηνπ είδνπο ζειίδεο απνηειείηαη ην δηαδίθηπν ζε κεγαιύηεξν βαζκό, απν ηηο αξρέο ηνπ κέρξη θαη ζήκεξα. ηαηηθέο ηζηνζειίδεο απνηεινύλ ηελ παξαδνζηαθή κνξθή ηνπ δηαδηθηύνπ. Γελ αιιάδνπλ είηε αλ πξνβάινληαη ζε θηλεηό, tablet ή πξνζσπηθό ππνινγηζηή. Δάλ ην παξάζπξν ηνπ πξνγξάκκαηνο πεξηήγεζεο πνπ πξνβάιεη ηελ ηζηνζειίδα είλαη πνιύ ιεπηό γηα ηνλ ρώξν πνπ έρεη ζρεδηαζηεί ζα πξέπεη λα κεηαθηλεζεί νξηδόληηα γηα λα εκθαληζηεί νιόθιεξε ε πεξηνρή. Γηα λα θαηαζηεί δπλαηή κηα θαιύηεξε εκπεηξία ζε κηα θνξεηή 14 Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο ζπζθεπή, νη ζηαηηθέο ηζηνζειίδεο παξαδνζηαθά ζα κεηαθέξαλ ηνλ ρξήζηε ζε κηα εληειώο δηαθνξεηηθή ηζηνζειίδα κε έλα ζρέδην πνπ έρεη δεκηνπξγεζεί εηδηθά γηα ηηο κηθξόηεξεο αλαιύζεηο. ηαηηθέο ηζηνζειίδεο είλαη ζπρλά HTML έγγξαθα απνζεθεπκέλα σο αξρεία ζην ζύζηεκα αξρείσλ θαη δηαηίζεληαη από ηνλ web server. Ωζηόζν, ν όξνο ζηαηηθέο πεξηιακβάλεη θαη ηζηνζειίδεο πνπ απνζεθεύνληαη ζε κηα βάζε δεδνκέλσλ θαη επίζεηο πεξηιακβάλεη αθόκα θαη ζειίδεο πνπ έρνπλ κνξθνπνηεζεί ρξεζηκνπνηώληαο έλα πξόηππν θαη εμππεξεηνύληαη κέζσ ελόο εμππεξεηεηή εθαξκνγώλ, εθ 'όζνλ ε ζειίδα πνπ πξνβάιιεηαη είλαη ακεηάβιεηε. Οη ζηαηηθέο ηζηνζειίδεο είλαη θαηάιιειεο γηα πεξηερόκελν πνπ ζπάληα ρξεηάδνληαη λα ελεκεξσζεί. Ωζηόζν, ε δηαηήξεζε κεγάινπ αξηζκνύ ζηαηηθώλ ζειίδσλ σο αξρεία κπνξεί λα είλαη αλέθηθηε ρσξίο απηνκαηνπνηεκέλα εξγαιεία. Οπνηαδήπνηε εμαηνκίθεπζε ή δηαδξαζηηθόηεηα πξέπεη λα εθηειεζηεί απν ηελ πιεπξά ηνπ ρξήζηε, ε νπνία είλαη θαη πεξηνξηζηηθή. Σα πιενλεθηήκαηα ηνπ ζηαηηθνύ ζρεδηαζκνύ ηζηηνζειίδσλ είλαη ην κηθξό θόζηνο θαηαζθεύεο, ε ηαρύηεηα θαηαζθεπήο θαη ε κηθξόηεξε απαίηεζε πξνζπάζεηαο, ζθέςεο θαη δεκηνπξγηθόηεηαο γηα ηελ θαηαζθεπή ηεο. Σα κεηνλεθηήκαηα είλαη ε θαθή εκπεηξία πνπ πξνζθέξεη ζηνλ ρξήζηε, ε απαίηεζε ζπλερνύο αλαλέσζεο θαη ζπληήξηζεο απν ηνλ θαηαζθεπαζηή θαη ε απαγόξεπζε ζσζηήο ζέαζεο απν ζπζθεπέο κε νζόλεο κηθξόηεξεο αλάιεζεο κε απνηέιεζκα λα ρξεηάδεηαη λα θαηαζθεπαζηεί κία άιιε παξόκηα ζειίδα γηα λα θαιύπηεη απηέο ηηο αλάγθεο. Γηα απηνύο ηνπο ιόγνπο έρεη αξρίζεη λα γίλεηαη όιν θαη πηό ζπάληα ε θαηαζθεπή ηέηνησλ ηζηηνζειίδσλ θαη λα απμάλεηαη ν ζρεδηαζκόο δηαδξαζηηθώλ ζειίδσλ. 2.3.2 Γιαδπαζηικόρ ζσεδιαζμόρ διαδικηύος Ο δηαδξαζηηθόο ζρεδηαζκόο ηζηνζειίδσλ (Responsive Web Design - RWD) είλαη κηα πξνζέγγηζε γηα ην ζρεδηαζκό ηζηνζειίδσλ κε ζηόρν ηε δηακόξθσζε ζέζεσλ γηα ηελ παξνρή βέιηηζηεο πξνβνιήο θαη αιιειεπίδξαζεο κίαο εκπεηξίαο, ηελ εύθνιε αλάγλσζε θαη πινήγεζε κε ειάρηζηε αιιαγή κεγέζνπο, κεηαθίλεζεο, θαη θύιηζεο, ζε έλα επξύ θάζκα ησλ ζπζθεπώλ (από ηνλ επηηξαπέδην ππνινγηζηή ζηηο νζόλεο ζηα θηλεηά ηειέθσλα). Μηα ηζηηνζειίδα πνπ ζρεδηάζηεθε κε RWD πξνζαξκόδεη ηε δηάηαμε γηα ην πεξηβάιινλ πξνβνιήο ρξεζηκνπνηώληαο ξεπζηά, εύθνια κεηαβαιιόκελα ζε ζέκα αλαινγίαο δίθηπα πιαηζίσλ ή αιιηώο πιέγκαηα, επέιηθηεο εηθόλεο, θαη πξνγξακκαηηζηηθά εξσηήκαηα πνπ βαζίδνληαη ζηελ ηερλνινγία CSS. Οη ηξόπνη πνπ γίλεηαη απηό πεξηιακβάλνπλ ηελ έλλνηα ηνπ ξεπζηνύ δηθηύνπ πιαηζίσλ δεηά ην κέγεζνο ησλ ζηνηρείσλ κηαο ζειίδα λα είλαη ζε ζρεηηθέο κνλάδεο, όπσο ηα πνζνζηά, θαη όρη απόιπηεο κνλάδεο, όπσο pixel ή ζεκεία. Δπίζεηο πεξηιιακβάλεη επέιηθηεο εηθόλεο κε κεγέζνο ζε ζρεηηθέο κνλάδεο, έηζη ώζηε λα απνηξέπεηαη ε εκθάληζε ηνπο έμσ απν ηα πεξηερόκελα ηνπ πιαηζίνπ πνπ έρεη νξηζηεί. Σέινο ε ρξήζε πξνγξακκαηηζηηθώλ εξσηεκάησλ επηηξέπνπλ ζηελ ζειίδα λα ρξεζηκνπνηεί δηαθνξεηηθά ζηπι θαλόλσλ ηερλνινγίαο CSS κε βάζε ηα ραξαθηεξηζηηθά ηεο ζπζθεπήο ζηελ πεξηνρή πνπ εκθαλίδεηαη ε ηζηηνζειίδα πνπ ζπλήζσο είλαη ην πιάηνο ηνπ πξνγξάκκαηνο πεξηήγεζεο. 15 Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ Σν Responsive web design είλαη όιν θαη πην ζεκαληηθό, θαζώο ην πνζνζηό ηεο ρξήζεο ησλ θηλεηώλ ηειεθώλσλ αληηπξνζσπεύεη ζήκεξα πεξηζζόηεξν από ην ήκηζπ ηεο ζπλνιηθήο θίλεζεο ζην δηαδίθηπν. Η ηάζε απηή είλαη ηόζν δηαδεδνκέλε πνπ ε Google έρεη αξρίζεη λα εληζρύζεη ηηο αμηνινγήζεηο ησλ sites πνπ επηζθέπησληαη πην ζπρλά απν θηλεηά κέζα, αλ ε αλαδήηεζε ηεο ζειίδαο ήηαλ από κηα θηλεηή ζπζθεπή όπσο ην θηλεηό ηειέθσλν. Απηό έρεη όκσο ζαλ απνηέιεζκα ηελ κίσζε ηεο δεκνηηθόηεηαο ησλ sites πνπ δελ είλαη θηιηθά πξνο ηα θηλεηά κέζα. Ιζηνξηθά ην πξώην site πνπ ραξαθηεξίδεηαη απν κηα ηέηνηα δηάηαμε πνπ πξνζαξκόδεηαη ζην πιάηνο ηνπ παξαζύξνπ ηνπ πξνγξάκκαηνο πεξηήγεζεο ήηαλ ην Audi.com πνπ μεθίλεζε ζηα ηέιε ηνπ 2001. Γεκηνπξγήζεθε από κηα νκάδα ηεο εηαηξίαο Razorfish23 πνπ απνηειείηαη από ηνπο Jürgen Spangl θαη Jim Kalbach εξγαδόκελνη ζηνλ ηνκέα ηεο αξρηηεθηνληθήο πιεξνθνξηώλ, ηνλ Ken Olling ζηνλ ζρεδηαζκόο θαη ηνλ Jan Hoffmann ζηελ αλάπηπμε ηεο δηεπαθήο. Πεξηνξηζκέλεο δπλαηόηεηεο ηνπ πξνγξάκκαηνο πεξηήγεζεο ζήκαηλε όηη γηα ηνλ Internet Explorer, ε δηάηαμε ζα κπνξνύζε λα πξνζαξκόδεηαη δπλακηθά ζην πξόγξακκα πεξηήγεζεο ελώ γηα ην Netscape, ε ζειίδα έπξεπε λα μαλαθνξησζεί από ηνλ server όηαλ αιιάμεη ην κέγεζόο ηνπο. Μέρξη ην 2008, κηα ζεηξά από ζρεηηθνύο όξνπο, όπσο «επέιηθηε», «ξεπζηή», θαη «ειαζηηθή» είραλ αξρίζεη λα ρξεζηκνπνηεηνύληαλ γηα λα πεξηγξάςνπλ ηηο δηαηάμεηο ησλ ηζηηνζειίδσλ θαη ησλ εθαξκνγώλ πνπ πεξηείραλ. Ο Ethan Marcotte επηλόεζε ηνλ όξν δηαδξαζηηθόο ζρεδηαζκόο ηζηνζειίδσλ (RWD) θαη νξίδεηαη λα ζεκαίλεη πεπζηά πιέγκαηα κε επέιηθηεο εηθόλεο θαη πξνγξακκαηηζηηθά εξσηήκαηα ηερλνινγίαο CSS ζε άξζξν ηνλ Μάην ηνπ 2010. Πεξηέγξαςε ηε ζεσξία θαη ηελ πξαθηηθή ηνπ Responsive web design ζε ζπληνκία ην 2011 ζην βηβιίν κε ηίηιν Responsive Web Design. Πνιιέο άιιεο πεγέο έρνπλ ζπζηήζεη ηνλ δηαδξαζηηθό ζρεδηαζκό σο κηα νηθνλνκηθά απνδνηηθή ελαιιαθηηθή ιύζε γηα ηηο θηλεηέο εθαξκνγέο. Δικόνα 4 Γιαθοπά ζηαηικών και διαδπαζηικών ιζηιοζελίδων 23 Η εηαηξεία Razorfish https://en.wikipedia.org/wiki/Razorfish_%28company%29 16 Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο Κεθάλαιο 3 Τεσνολογίερ και Δπγαλεία 3.1 Τεσνολογίερ ζσεδίαζηρ διαδικηςακών εθαπμογών 3.1.1 JavaScript Η JavaScript είλαη κηα δπλακηθή γιώζζα πξνγξακκαηηζκνύ. Πην ζπρλά ρξεζηκνπνηείηαη σο κέξνο ησλ web browsers, ησλ νπνίσλ νη πινπνηήζεηο επηηξέπνπλ scripts απν ηελ πιεπξά ηνπ ρξήζηε γηα λα αιιειεπηδξάζνπλ κε ην απηόλ, ειέγρνπλ ην πξόγξακκα πεξηήγεζεο, επηθνηλσλνύλ αζύγρξνλα, θαη αιιάδνπλ ην πεξηερόκελν ηνπ εγγξάθνπ πνπ εκθαλίδεηαη. Η JavaScript ζεσξείηαη επίζεο κηα ΄΄ζπκβνιηθή γιώζζα ηνπ web΄΄ κε ζηόρν ηελ ππνβνιή αηηήζεσλ απν ηελ πιεπξά ηνπ πειάηε ρξεζηκνπνηώληαο άιιεο γιώζζεο πξνγξακκαηηζκνύ, πνπ ππνζηεξίδνληαη από όιεο ηηο κεγάιεο κεραλέο αλαδήηεζεο, ρσξίο plug-ins. Δπίζεο ρξεζηκνπνηείηαη γηα ηνλ πξνγξακκαηηζκό ηνπ δηθηύνπ απν ηελ πιεπξά ηνπ server κε πεξηβάιινληα ρξόλνπ εθηέιεζεο, όπσο ην Node.js24, ηελ αλάπηπμε ειεθηνληθώλ παηρληδηώλ θαη ηε δεκηνπξγία ηεο επηθάλεηαο εξγαζίαο θαη ησλ θηλεηώλ εθαξκνγώλ. Σν JavaScript ηαμηλνκείηαη σο πξόηππν κε βάζε ηε γιώζζα πξνγξακκαηηζκνύ script κε δπλακηθνύο ηύπνπο ιεηηνπξγηώλ πξώηεο θαηεγνξίαο. Απηόο ν ζπλδπαζκόο ραξαθηεξηζηηθώλ ηελ θαζηζηά κηα γιώζζα πνιπ-πξόηππν, ππνζηεξίδνληαο αληηθεηκελνζηξαθή πξνζαλαηνιηζκό θαη ιεηηνπξγηθό ζηπι πξνγξακκαηηζκνύ. Παξά ηηο νκνηόηεηεο ζηελ νλνκαζία, ηελ ζύληαμε θαη ηελ πξνγξακκαηηζηηθή βηβιηνζήθε, ε JavaScript θαη ε Java25 είλαη δηαθνξεηηθέο γιώζζεο θαη έρνπλ πνιύ δηαθνξεηηθή ζεκαζηνινγία θαη ιεπηνκέξηεο. Η ζύληαμε ηεο JavaScript ζηελ πξαγκαηηθόηεηα πξνέξρεηαη από ην C, ελώ ε ζεκαζηνινγία θαη ν ζρεδηαζκόο επεξεάδεηαη από ηηο γιώζζεο πξνγξακκαηηζκνύ Self26 θαη Scheme27. Η JavaScript ρξεζηκνπνηείηαη επίζεο ζε πεξηβάιινληα πνπ δελ είλαη ζρεηηθά κε ην δηαδίθηπν, όπσο έγγξαθα PDF, browsers γηα ζπλγθεθξηκέλα sites θαη κηθξνεθαξκνγέο ηεο επηθάλεηαο εξγαζίαο. Νεόηεξεο θαη πην γξήγνξεο εηθνληθέο κεραλέο (VMs)28 θαη πιαηθόξκεο έρνπλ βαζηζηεί πάλσ ζε απηήλ, έρνληαο επίζεο απμήζεη ηελ δεκνηηθόηεηα ηεο Javascript γηα εθαξκνγέο δηαδηθηύνπ απν ηελ πιεπξά ηνπ server. Από ηελ πιεπξά ηνπ πειάηε, ε JavaScript έρεη παξαδνζηαθά εθαξκνζηεί σο κηα εξκελεπκέλε γιώζζα, αιιά πην πξόζθαηα πξνγξάκκαηα πεξηήγεζεο εθηεινύλ θαηαξηίζείο ζε πνιύ κηθξό ρξνληθό δηάζηεκα. 24 Σν πεξηβάιινλ Node.js https://en.wikipedia.org/wiki/Node.js Η γιώζζα Java https://en.wikipedia.org/wiki/Java_%28programming_language%29 26 Η γιώζζα Self https://en.wikipedia.org/wiki/Self_%28programming_language%29 27 Η γιώζζα Scheme https://en.wikipedia.org/wiki/Scheme_%28programming_language%29 28 Δηθνληθέο κεραλέο https://en.wikipedia.org/wiki/Virtual_machine 25 17 Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ Η πην θνηλή ρξήζε ηεο JavaScript είλαη λα πξνζζέηεη ζπκπεξηθνξά απν ηελ πιεπξά ηνπ ρξήζηε ζε ζειίδεο HTML, γλσζηό θαη σο Γπλακηθή HTML (DHTML). Eλζσκαηώλνληαη ή πεξηιακβάλνληαη script από ηηο ζειίδεο HTML θαη αιιειεπηδξνύλ κε ην Μνληέιν Αληηθεηκέλνπ Δγγξάθνπ (DOM)29 ηεο ζειίδαο. Μεξηθά απιά παξαδείγκαηα απηήο ηεο ρξήζεο είλαη ε ηνπνζέηεζε λένπ πεξηερνκέλνπ ηεο ζειίδαο ή ε ππνβνιή δεδνκέλσλ ζην δηαθνκηζηή κέζσ ηερλνινγίαο AJAX ρσξίο επαλαθόξησζε ηεο ζειίδαο γηα παξάδεηγκα, έλα θνηλσληθό δίθηπν κπνξεί λα επηηξέςεη ζην ρξήζηε λα δεκνζηεύζεη ελεκεξώζεηο θαηάζηαζεο ρσξίο λα θύγεη από ηε ζειίδα. Δπίζεηο ε ελζσκάησζε θεηλνπκέλσλ ζρεδίσλ ζηε ζειίδα, ην μεζώξηαζκα ηνπο κέζα θαη έμσ, ε αιιαγή κεγέζνπο ηνπο, ε κεηαθίλεζε ηνπο, θ.ιπ.. Γηαδξαζηηθό πεξηερόκελν, γηα παξάδεηγκα, ηα παηρλίδηα, θαη αλαπαξαγσγή ήρνπ θαη βίληεν. Καη ε κεηαβίβαζε πιεξνθνξηώλ ζρεηηθά κε ηηο αλαγλσζηηθέο ζπλήζεηεο ηνπ ρξήζηε θαη ησλ δξαζηεξηνηήησλ πεξηήγεζεο ζε δηάθνξεο ηζηνζειίδεο. Δπεηδή ν θώδηθαο ηεο JavaScript κπνξεί λα εθηειεζηεί ηνπηθά ζην πξόγξακκα πεξηήγεζεο ελόο ρξήζηε θαη όρη κόλν ζε έλαλ απνκαθξπζκέλν server, ην πξόγξακκα πεξηήγεζεο κπνξεί λα αληαπνθξηζεί ζηηο ελέξγεηεο ηνπ ρξήζηε γξήγνξα, θάλνληαο κηα εθαξκνγή λα αληαπνθξίλεηαη πεξηζζόηεξν. Δπηπιένλ, ν θώδηθαο ηεο JavaScript κπνξεί λα αληρλεύζεη ηηο ελέξγεηεο ηνπ ρξήζηε όηη ε HTML δελ κπνξεί κόλε ηεο, όπσο ε αηνκηθή ρξήζε ησλ θνπκπηώλ ηνπ πιεθξνινγίνπ. Δθαξκνγέο όπσο ην Gmail επσθεινύληαη από απηό δειαδή έλα κεγάιν κέξνο ηεο ινγηθήο ηεο δηεπαθήο ρξήζηε είλαη γξακκέλν ζε JavaScript, θαη ε JavaScript απνζηέιιεη αηηήζεηο παξνρήο πιεξνθνξηώλ όπσο είλαη ην πεξηερόκελν ελόο κελύκαηνο e-mail ζην δηαθνκηζηή. Η επξύηεξε ηάζε ηνπ πξνγξακκαηηζκνύ Ajax εθκεηαιιεύεηαη νκνίσο απηήλ ηελ δύλακε. Μηα κεραλή JavaScript επίζεο γλσζηή σο ηνλ JavaScript δηεξκελέα ή ε εθηέιεζε JavaScript είλαη έλαο δηεξκελέαο πνπ εξκελεύεη ηνλ JavaScript πεγαίν θώδηθα θαη εθηειεί ην ζελάξην script αλαιόγσο. Η πξώηε πξνγξακκαηηζηηθή κεραλή JavaScript δεκηνπξγήζεθε από ηνλ Brendan Eich ζηελ εηαηξία Netscape Communications Corporation30, γηα ην πξόγξακκα πεξηήγεζεο ζην Netscape Navigator. Έλαο web browser είλαη καθξάλ ην πην θνηλό πεξηβάιινλ ππνδνρήο ηεο JavaScript. Πξνγξάκκαηα πεξηήγεζεο ζην δηαδίθηπν ζπλήζσο δεκηνπξγνύλ "αληηθείκελα ππνδνρήο" λα εθπξνζσπνύλ ην Μνληέιν Αληηθεηκέλνπ Δγγξάθνπ (DOM) ζε JavaScript. Οη web server είλαη έλα άιιν θνηλό πεξηβάιινλ ππνδνρήο. Έλαο web server πνπ ρξεζεκνπνηεί JavaScript εθζέηεη ηππηθά αληηθείκελα ππνδνρήο πνπ εθπξνζσπνύλ αηηήζεηο HTTP θαη αληηθείκελα απάληεζεο, όπνπ έλα πξόγξακκα JavaScript ζα κπνξνύζε ζηε ζπλέρεηα λα ρεηξηζηεί γηα λα δεκηνπξγήζεη δπλακηθά ηζηνζειίδεο. Δπεηδή ε JavaScript είλαη ε κόλε γιώζζα πνπ νη πην δεκνθηιείο browsers ππνζηεξίδνπλ, έρεη γίλεη κηα γιώζζα ζηόρνο πνιιώλ πιαηζίσλ ζε άιιεο γιώζζεο, αθόκε θαη αλ ε JavaScript πνηέ δελ πξννξηδόηαλ λα είλαη κηα ηέηνηα γιώζζα. Παξά ηνπο θάπνηνπο πεξηνξηζκνύο ζηηο επηδόζεηο ηεο δπλακηθήο ηεο θύζεο, ε αύμεζε ηεο ηαρύηεηαο δεκηνπξγίαο ησλ κεραλώλ ηεο JavaScript ηελ έρεη θάλεη κία απν ηεο πην δεκνθηιείο γιώζζεο πξνγξακκαηηζκνύ. 29 30 Μνληέιν αληηθεηκέλνπ εγγξάθνπ https://en.wikipedia.org/wiki/Document_Object_Model Η εηαηξεία Netscape https://en.wikipedia.org/wiki/Netscape 18 Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο 3.1.2 jQuery Η jQuery είλαη κία JavaScript βηβιηνζήθε πνπ ζπλδέεη δηάθνξεο πιαηθόξκεοθαη έρεη ζρεδηαζηεί γηα λα απινπνηήζεη ηνλ script θώδηθα HTML απν ηελ πιεπξά ηνπ ρξήζηε. Η jQuery είλαη ε πην δεκνθηιέο βηβιηνζήθε JavaScript πνπ ρξεζηκνπνηήηαη ζήκεξα, κε ηελ εγθαηάζηαζε ηεο ζε 65% από ηνπο θνξπθαίνπο 10 εθαηνκκύξηα πςειήο επηζθεςεκόηεηαο ηζηόηνπνπο ζην δηαδίθηπν. Η jQuery είλαη ειεύζεξν ινγηζκηθό αλνηρηνύ θώδηθα ππό ηελ άδεηα MIT License31. Η ζύληαμε ηεο jQuery έρεη ζρεδηαζηεί γηα λα θαηαζηήζεη επθνιόηεξε ηελ πινήγεζε ελόο εγγξάθνπ, επηιέγνληαο ζηνηρεία, δεκηνπξγόληαο θηλνύκελα ζρέδηα, δηαρεηξίδνληαο ηα γεγνλόηα θαη ηελ αλάπηπμε εθαξκνγώλ ηερλνινγίαο Ajax. Η jQuery παξέρεη επίζεο δπλαηόηεηεο γηα ηνπο πξνγξακκαηηζηέο λα δεκηνπξγήζνπλ plug-ins πάλσ από ηε βηβιηνζήθε JavaScript. Απηό επηηξέπεη ζηνπο πξνγξακκαηηζηέο λα δεκηνπξγήζνπλ αθαηξέζεηο γηα αιιειεπίδξαζε ρακεινύ επηπέδνπ θαη θηλνύκελα ζρέδηα θαη πξνεγκέλα εθέ πςεινύ επηπέδνπ. Η αξζξσηή πξνζέγγηζε ζηε βηβιηνζήθε jQuery επηηξέπεη ηε δεκηνπξγία ησλ ηζρπξώλ δπλακηθώλ ηζηνζειίδσλ θαη ησλ δηαδηθηπαθώλ εθαξκνγώλ. Σα βαζηθά ραξαθηεξηζηηθά ελόο ζπλόινπ ηεο jQuery είλαη νη επηινγέο ηνπ ζηνηρείνπ, ε δηάζρηζε θαη νη πξάμεηο ρεηξαγώγεζεο κε δπλαηόηεηα επηινγήο από ηελ πξνγξακκαηηζηηθή κεραλή δεκηνπξγόληαο έλα λέν "ζηπι πξνγξακκαηηζκνύ", ζπλδπάδνληαο αιγόξηζκνπο θαη δνκέο δεδνκέλσλ. Απηό ην ζηπι επεξέαζε ηελ αξρηηεθηνληθή ησλ άιισλ πιαηζίσλ JavaScript, όπσο YUI v332 θαη Dojo33 θαη αξγόηεξα ηελ ηόλσζε ηεο δεκηνπξγίαο ηνπ πξνηύπνπ Selectors API. Η Microsoft θαη ε Nokia34 ρξεζεκνπνηνύλ ηελ jQuery δέζκε ζηηο πιαηθόξκεο ηνπο. Η Microsoft ηελ πεξηιακβάλεη κε ην Visual Studio γηα ρξήζε ζην πιαίζην ASP.NET AJAX ηεο Microsoft θαη ζην πιαίζην ASP.NET MVC ελώ ε Nokia ηελ έρεη ελζσκαηώζεη ζηνλ δηαδηθηπαθό ρξόλν εθηέιεζεο ηεο πιαηθόξκαο αλάπηπμεο κηθξνεθαξκνγώλ. Η jQuery, ζηνλ ππξήλα ηεο, είλαη κία βηβιηνζήθε ρεηξαγώγεζεο κνληέινπ αληηθεηκέλσλ εγγξάθσλ DOM (Document Object Model). Σν DOM είλαη κία δνκή δέληξν εθπξνζώπεζεο όισλ ησλ ζηνηρείσλ κηαο ηζηνζειίδαο θαη ε jQuery απινπνηεί ηε ζύληαμε γηα ηελ εύξεζε, ηελ επηινγή θαη ην ρεηξηζκό απηώλ ησλ ζηνηρείσλ DOM. Γηα παξάδεηγκα, ε jQuery κπνξεί λα ρξεζηκνπνηεζεί γηα ηελ εύξεζε ελόο ζηνηρείνπ ζην έγγξαθν κε κηα νξηζκέλε ηδηόηεηα (π.ρ. όια ηα ζηνηρεία κε ηελ εηηθέηα h1), αιιάδνληαο έλα ή πεξηζζόηεξα από ηα ραξαθηεξηζηηθά ηνπ (π.ρ. ρξώκα, νξαηόηεηα), ή γηα λα απαληήζεη ζε κηα εθδήισζε ( π.ρ. έλα θιηθ ηνπ πνληηθηνύ). 31 Η άδεηα MIT License https://en.wikipedia.org/wiki/MIT_License Η βηβιηνζήθε YUI https://en.wikipedia.org/wiki/YUI_Library 33 Η βηβιηνζήθε Dojo https://en.wikipedia.org/wiki/Dojo_Toolkit 34 Η εηαηξεία Nokia https://en.wikipedia.org/wiki/Nokia 32 19 Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ Η jQuery παξέρεη επίζεο έλα παξάδεηγκα γηα ην ρεηξηζκό κίαο εθδήισζεο πνπ πεγαίλεη πέξα από ηε βαζηθή επηινγή ζηνηρείσλ DOM θαη ηηο ρεηξαγώγεζεο. Η εθρώξεζε εθδήισζεο θαη ν νξηζκόο ηεο ιεηηνπξγίαο επαλάθιεζεο ηεο εθδήισζεο γίλνληαη ζε έλα θαη κόλν βήκα ζε κηα εληαία ζέζε ζηνλ θώδηθα. Η jQuery έρεη επίζεο σο ζηόρν λα ελζσκαηώζεη ηελ ιεηηνπξγηθόηεηα ηεο JavaScript. Σα πιενλεθηήκαηα από ηε ρξήζε ηεο jQuery είλαη λα ελζαξξύλεη ην δηαρσξηζκό ηεο JavaScript θαη ηεο HTML δειαδή ε βηβιηνζήθε jQuery παξέρεη απιή ζύληαμε γηα ηελ πξνζζήθε ρεηξηζκνύ ζπκβάλησλ ζην DOM ρξεζηκνπνηώληαο JavaScript, αληί ηεο πξνζζήθεο HTML ραξαθηεξηζηηθώλ πνπ θαινύλ ιεηηνπξγίεο JavaScript. Έηζη, ελζαξξύλεη ηνπο πξνγξακκαηηζηέο λα δηαρσξίζνπλ πιήξσο ηνλ θώδηθα JavaScript από ηε ζήκαλζε HTML. Δπίζεηο πξνσζεί ζπληνκία θαη ζαθήλεηα κε ραξαθηεξηζηηθά όπσο ζπλδεδεκέλεο ιεηηνπξγίεο θαη ηελ ζηελνγξαθία ησλ νλνκάησλ ησλ ιεηηνπξγηώλ. Δμαιείθεη αζπκβαηόηεηεο κεηαμύ browser δειαδή νη πξαγξακαηηζηηθέο κεραλέο JavaScript δηαθνξεηηθώλ browsers δηαθέξνπλ ειαθξώο έηζη ώζηε ν θώδηθαο JavaScript πνπ ιεηηνπξγεί γηα έλα πξόγξακκα πεξηήγεζεο κπνξεί λα κελ ιεηηνπξγήζεη γηα έλα άιιν. πσο θαη άιια εξγαιεία ηεο JavaScript, ε jQuery ρεηξίδεηαη όιεο απηέο ηηο αληηθάζεηο κεηαμύ browser θαη παξέρεη κηα ζπλεπή δηεπαθή πνπ ιεηηνπξγεί ζε δηαθνξεηηθά πξνγξάκκαηα πεξηήγεζεο. Δπίζεηο έλα αθόκα πιενλέθηεκα ηεο βηβιηνζήθεο jQuery είλαη νηη λέα γεγνλόηα, ζηνηρεία θαη κέζνδνη κπνξνύλ λα πξνζηεζνύλ εύθνια θαη ζηε ζπλέρεηα λα επαλαρξεζηκνπνηεζνύλ σο έλα plugin. 3.1.3 HTML Η HTML (HyperText Markup Language), είλαη ε ηππηθή γιώζζα ζήκαλζεο πνπ ρξεζηκνπνηείηαη γηα ηε δεκηνπξγία ηζηνζειίδσλ. Δίλαη γξακκέλε ζε κνξθή ζηνηρείσλ πνπ απνηεινύληαη από εληνιέο θαη πεξηθιείνληαη ζε αγθύιεο (όπσο <html>). Δηηθέηεο HTML πην ζπρλά έξρνληαη ζε δεύγε, όπσο <h1> θαη </ h1>, αλ θαη κεξηθέο αληηπξνζσπεύνπλ θελά ζηνηρεία θαη έηζη είλαη ζε δεύγε γηα παξάδεηγκα <img>. Η πξώηε εηηθέηα ζε έλα ηέηνην δεπγάξη είλαη ε εηηθέηα έλαξμεο, θαη ε δεύηεξε είλαη ε εηηθέηα ηέινπο πνπ νλνκάδεηαη επίζεο ην άλνηγκα θαη ην θιείζηκν. Πξνγξάκκαηα πεξηήγεζεο ζην δηαδίθηπν κπνξεί λα δηαβάδνπλ αξρεία HTML θαη λα ηα θαζηζηνύλ νξαηά ζηηο ηζηνζειίδεο. Σα πξνγξάκκαηα πεξηήγεζεο δελ εκθαλίδεη ηηο εηηθέηεο HTML θαη ηα scripts, αιιά ηα ρξεζηκνπνηνύλ γηα λα εξκελεύζνπλ ην πεξηερόκελν ηεο ζειίδαο. Η HTML πεξηγξάθεη ηε δνκή κηαο ηζηνζειίδαο ζεκαζηνινγηθά καδί κε ζπλζήκαηα γηα ηελ παξνπζίαζε, θαζηζηώληαο ηελ κηα γιώζζα ζήκαλζεο, παξά κηα γιώζζα πξνγξακκαηηζκνύ. Σα HTML ζηνηρεία απνηεινύλ ηηο δνκηθέο κνλάδεο όισλ ησλ δηθηπαθώλ ηόπσλ. Η HTML επηηξέπεη εηθόλεο θαη αληηθείκελα λα ελζσκαησζνύλ θαη κπνξεί λα ρξεζηκνπνηεζεί γηα ηε δεκηνπξγία δηαδξαζηηθώλ κνξθώλ. Παξέρεη έλα κέζν γηα λα δεκηνπξγεζνύλ δνκεκέλα έγγξαθα από ηα δηαξζξσηηθά δειώλνληαο ηελ 20 Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο ζεκαζηνινγία ηνπ θεηκέλνπ, όπσο επηθεθαιίδεο, παξαγξάθνπο, ιίζηεο, ζπλδέζκνπο, απνζπάζκαηα θαη άιια αληηθείκελα. Μπνξεί λα ελζσκαηώζεη scripts γξακκέλα ζε γιώζζεο όπσο ε JavaScript πνπ επεξεάδνπλ ηε ζπκπεξηθνξά ησλ ηζηνζειίδσλ HTML. Ο Παγθόζκηνο Ιζηόο απνηειείηαη θπξίσο από έγγξαθα HTML πνπ κεηαδίδνληαη από ηνπο web servers ζε πξνγξάκκαηα πεξηήγεζεο ζην δηαδίθηπν ρξεζηκνπνηώληαο ην πξσηόθνιιν Hypertext Transfer Protocol (HTTP)35. Ωζηόζν, ε ΗΣΣΡ ρξεζηκνπνηείηαη γηα λα εμππεξεηήζεη ηηο εηθόλεο, ηνλ ήρν θαη άιιν πεξηερόκελν, εθηόο από ηελ θνηλή ρξήζε ηεο HTML. Γηα λα θαηαζηεί δπλαηή ε ιεηηνπξγία ησλ web browser γηα λα μέξνπλ πώο λα ρεηξηζηνύλ θάζε έγγξαθν πνπ δέρεηαη, άιιεο πιεξνθνξίεο δηαβηβάδνληαη καδί κε ην έγγξαθν. Απηά ηα δεδνκέλα πεξηιακβάλνπλ ζπλήζσο ηνλ ηύπν MIME36 γηα παξάδεηγκα θείκελν ζε κνξθή html ή εθαξκνγή ζε κνξθή xhtml θαη ε θσδηθνπνίεζε ησλ ραξαθηήξσλ απηώλ. ε ζύγρξνλα πξνγξάκκαηα πεξηήγεζεο, ν ηύπνο MIME πνπ απνζηέιιεηαη απν έλα έγγξαθν HTML κπνξεί λα επεξεάζεη ηνλ ηξόπν πνπ ην έγγξαθν αξρηθά εξκελεύεηαη. Έλα έγγξαθν πνπ απνζηέιιεηαη κε ηνλ ηύπν MIME XHTML αλακέλεηαη λα είλαη θαινζρεκαηηζκέλα XML37 δειαδή ζπληαθηηθά ιάζε κπνξεί λα πξνθαιέζεη ην πξόγξακκα πεξηήγεζεο λα κελ ιεηηνπξγεί ζσζηά. Σν ίδην έγγξαθν πνπ απνζηέιιεηαη κε ηνλ ηύπν MIME HTML κπνξεί λα εκθαληζηεί κε επηηπρία, δεδνκέλνπ όηη νξηζκέλα πξνγξάκκαηα πεξηήγεζεο είλαη πην επηεηθείο κε ηελ HTML. 3.1.4 CSS Η Cascading Style Sheets (CSS) είλαη κηα γιώζζα πξνγξακκαηηζκνύ ζε κνξθή θύιισλ πνπ ρξεζηκνπνηείηαη γηα ηελ πεξηγξαθή ηεο εκθάληζεο θαη ηε κνξθνπνίεζεο ελόο εγγξάθνπ γξακκέλν ζε κηα γιώζζα ζήκαλζεο. Αλ θαη ηηο πεξηζζόηεξεο θνξέο ρξεζηκνπνηείηαη γηα λα αιιάμεη ην ζηπι ησλ ηζηνζειίδσλ θαη ησλ user interfaces, γξακκέλν ζε HTML θαη XHTML, ε γιώζζα κπνξεί λα εθαξκνζηεί ζε νπνηνδήπνηε είδνο εγγξάθνπ XML, ζπκπεξηιακβαλνκέλσλ ησλ πεδηάδα XML, SVG θαη XUL. Μαδί κε ηελ HTML θαη JavaScript, ε CSS είλαη ν αθξνγσληαίνο ιίζνο ηεο ηερλνινγίαο πνπ ρξεζηκνπνηείηαη από ηνπο πεξηζζόηεξνπο ηζηόηνπνπο γηα λα δεκηνπξγήζνπλ νπηηθά ειθπζηηθό πεξηερόκελν ζηηο ηζηνζειίδεο, ζηηο δηεπαθέο ρξεζηώλ γηα δηαδηθηπαθέο εθαξκνγέο θαη ζηηο δηεπαθέο ρξεζηώλ γηα πνιιέο θηλεηέο εθαξκνγέο. Η CSS έρεη ζρεδηαζηεί γηα λα επηηξέπεη θπξίσο ην δηαρσξηζκό ηνπ πεξηερνκέλνπ ηνπ εγγξάθνπ από ηελ παξνπζίαζε ηνπ εγγξάθνπ, ζπκπεξηιακβαλνκέλσλ ησλ ζηνηρείσλ όπσο ε δηάηαμε, ηα ρξώκαηα θαη νη γξακκαηνζεηξέο. Απηόο ν δηαρσξηζκόο κπνξεί λα βειηηώζεη ηελ πξνζβαζηκόηεηα ηνπ πεξηερνκέλνπ παξέρνληαο κεγαιύηεξε επειημία θαη έιεγρν ζηηο πξνδηαγξαθέο ησλ ραξαθηεξηζηηθώλ παξνπζίαζεο, επηηξέπνληαο 35 Σν πξσηόθνιιν HTTP https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol Η επέθηαζε MIME https://en.wikipedia.org/wiki/MIME 37 Η γιώζζα XML https://en.wikipedia.org/wiki/XML 36 21 Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ πνιιέο ζειίδεο HTML λα κνηξαζηνύλ ηε κνξθνπνίεζε, θαζνξίδνληαο έηζη ηελ CSS ζε έλα μερσξηζηό αξρείν κε ηελ θαηάιεμε .css, θαη λα κεηώζνπλ ηελ πνιππινθόηεηα θαη ηελ επαλάιεςε ηνπ δηαξζξσηηθνύ πεξηερνκέλνπ, όπσο ηνπο ζεκαζηνινγηθά αζήκαληνπο πίλαθεο πνπ ρξεζηκνπνηνύληαη επξέσο ζε ζειίδεο πξηλ λα γίλνπλ δηαζέζηκεο ζε όιεο ηηο κεγάιεο κεραλέο αλαδήηεζεο. Η CSS θαζηζηά δπλαηό ην δηαρσξηζκό ησλ νδεγηώλ παξνπζίαζεο από ην πεξηερόκελν HTML ζε έλα μερσξηζηό ηκήκα ηνπ αξρείνπ ή ην ζηπι ηνπ αξρείνπ HTML. Γηα θάζε ζηνηρείν πνπ ηαηξηάδεηαη κε ηελ HTML, παξέρεηαη κηα ιίζηα κε ηηο νδεγίεο κνξθνπνίεζεο. Γηα παξάδεηγκα, έλαο θαλόλαο CSS ζα κπνξνύζε λα δηεπθξηλίζεη όηη όια ηα ζηνηρεία ηεο θιάζεο έλα πξέπεη λα είλαη κε έληνλα ρξσκαηηζκέλα γξάκκαηα, αθήλνληαο θαζαξά ηε ζεκαζηνινγηθή ζήκαλζε ηεο HTML πνπ ππνζηεξίδεη όηη ην θείκελν απηό είλαη κηα επηθεθαιίδα επηπέδνπ έλα ρσξίο κνξθνπνίεζε θώδηθα, όπσο έληνλα ρξσκαηηζκέλα γξάκκαηα δείρλνληαο πόζν ηέηνην θείκελν ζα πξέπεη λα λα εκθαληζηεί. Απηόο ν δηαρσξηζκόο ηεο κνξθνπνίεζεο θαη ηνπ πεξηερνκέλνπ θαζηζηά δπλαηό λα παξνπζηαζηεί ε ίδηα ζειίδα ζήκαλζεο ζε δηαθνξεηηθά ζηπι γηα ηηο δηάθνξεο κεζόδνπο απόδνζεο, όπσο επί ηεο νζόλεο, ζε έληππε κνξθή, κε θσλή όπσο όηαλ δηαβάδνληαη ηα θείκελα από κηα νκηιία πνπ βαζίδεηαη ζε πξόγξακκα πεξηήγεζεο ή κία νζόλε αλαγλώζηε θ.ι.π. Μπνξεί επίζεο λα ρξεζηκνπνηεζεί γηα λα εκθαλίζεη ηελ ηζηνζειίδα κε δηαθνξεηηθό ηξόπν, αλάινγα κε ην κέγεζνο ηεο νζόλεο ή ηε ζπζθεπή ζηελ νπνία πξνβάιιεηαη ην αληηθείκελν απηό. Παξά ην γεγνλόο όηη ν ζπγγξαθέαο κηαο ηζηνζειίδαο ζπλδέεη ηππηθά έλα αξρείν CSS κέζα ζην αξρείν ζήκαλζεο, νη αλαγλώζηεο κπνξνύλ λα θαζνξίζνπλ έλα δηαθνξεηηθό ζηπι θύιινπ, όπσο έλα αξρείν CSS πνπ είλαη απνζεθεπκέλν ζηνλ ππνινγηζηή ηνπο αληηθαζπζηώληαο απηό πνπ ν ζπγγξαθέαο έρεη θαζνξίζεη. Αλ ν ζπγγξαθέαο ή ν αλαγλώζηεο δελ ζπλδένπλ ην έγγξαθν ζε έλα ζηπι θύιινπ, ην πξνεπηιεγκέλν ζηπι ηνπ browser ζα πξέπεη λα εθαξκνζηεί. Έλα άιιν πιενλέθηεκα ηεο CSS είλαη όηη αηζζεηηθέο αιιαγέο ζην γξαθηθό ζρεδηαζκό ελόο εγγξάθνπ ή εθαηνληάδεο έγγξαθα κπνξνύλ λα εθαξκνζηνύλ γξήγνξα θαη εύθνια, κε επεμεξγαζία ιίγσλ γξακκώλ ζε έλα αξρείν, θαη όρη από κηα επίπνλε θαη θαηά ζπλέπεηα δαπαλεξή δηαδηθαζία ηεο εύξεζεο θαη αιιαγήο πάλσ από θάζε γξακκή ηνπ εγγξάθνπ. Η πξνδηαγξαθή CSS πεξηγξάθεη έλα ζύζηεκα πξνηεξαηόηεηαο γηα λα θαζνξηζηεί πνην ζηπι θαλόλσλ ηζρύνπλ ζε πνηά πεξίπησζε πεξηζζνηέξσλ ηνπ ελόο θαλόλα ζε έλα ζπγθεθξηκέλν ζηνηρείν. ε απηό ην ιεγόκελν θαηαξξάθηε, νη πξνηεξαηόηεηεο ή ην βάξνο ππνινγίδεηαη θαη απνδίδεηαη κε ηνπο θαλόλεο, έηζη ώζηε ηα απνηειέζκαηα λα είλαη πξνβιέςηκα. Οη πξνδηαγξαθέο CSS ζπληεξείηαη από ηελ Κνηλνπξαμία ηνπ Παγθόζκηνπ Ιζηνύ (W3C)38. Πξηλ ηελ δεκηνπξγία ηεο CSS, ζρεδόλ όια ηα γλσξίζκαηα ελόο εγγξάθνπ HTML πεξηέρνληαλ εληόο ηνπ ζήκαλζεο HTML δειαδή όια ηα ρξώκαηα ηεο γξακκαηνζεηξάο, ην ζηπι θόληνπ, νη επζπγξακκίζεηο ησλ ζηνηρείσλ, ηα ζύλνξα θαη ηα κεγέζε έπξεπε λα πεξηγξάθνληαη αλαιπηηθά, ζπρλά θαη 'επαλάιεςε, κέζα ζηελ HTML. Η CSS επηηξέπεη ζηνπο θαηαζθεπαζηέο ησλ ηζηηνζειίδσλ λα κεηαθηλνύλ κεγάιν κέξνο ηεο πιεξνθνξίαο ζε έλα άιιν αξρείν πνπ είλαη ηεο κνξθήο CSS κε απνηέιεζκα κία ζεκαληηθά απινύζηεξε κνξθή ηεο HTML. Γηα παξάδεηγκα, επηθεθαιίδεο, ππν-θαηεγνξίεο, ππν-ππν-θαηεγνξίεο, θ.ιπ., νξίδνληαη δνκηθά κε ηε 38 Η θνηλνπξαμία ηνπ παγθόζκηνπ ηζηνύ https://en.wikipedia.org/wiki/World_Wide_Web_Consortium 22 Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο ρξήζε ηεο HTML. ε έληππε κνξθή θαη ζηελ νζόλε, ε επηινγή ηεο γξακκαηνζεηξάο, ην κέγεζνο, ην ρξώκα θαη έκθαζε γηα ηα ζηνηρεία απηά είλαη ζέκα παξνπζίαζεο. Έλα άιιν πξόβιεκκα πξηλ ηελ αλάπηπμε ηεο CSS ήηαλ νηη νη ζπληάθηεο ελόο εγγξάθνπ πνπ ήζειαλ λα αλαζέζνπλ ηέηνηα ηππνγξαθηθά ραξαθηεξηζηηθά, γηα παξάδεηγκα όινπο ηνπο ηίηινπο ηεο θιάζεο h2 ρξεηαδόηαλ λα επαλαιάβνπλ ηελ HTML ζήκαλζε παξνπζίαζεο γηα θάζε εκθάληζε απηνύ ηνπ ηύπνπ θιάζεο. Απηό έθαλε ηα έγγξαθα πην πεξίπινθα, κεγαιύηεξα, θαη πην επηξξεπή ζε ιάζε θαη δύζθνιν λα δηαηεξεζνύλ. Η CSS επηηξέπεη ην δηαρσξηζκό ηεο παξνπζίαζεο από ηε δνκή. Μπνξεί λα θαζνξίζεη ην ρξώκα, ηελ γξακκαηνζεηξά, ηελ ζηνίρηζε ηνπ θεηκέλνπ, ην κέγεζνο, ηα ζύλνξα, ηηο απνζηάζεηο, ηε δηάηαμε θαη πνιιά άιια ηππνγξαθηθά ραξαθηεξηζηηθά, θαη κπνξνύλ λα ην θάλνπλ αλεμάξηεηα αλ πξννξήδεηαη γηα νζόλε ή γηα ηππσκέλν έγγξαθν. Οξίδεη επίζεο κε νπηηθά εθέ, όπσο ε ηαρύηεηα θαη ε έκθαζε κε ηελ νπνία ην θείκελν δηαβάδεηαη από θσλεηηθά πξνγξάκκαηα αλάγλσζεο θεηκέλνπ. Σα CSS πιαίζηα είλαη έηνηκεο βηβιηνζήθεο πνπ έρνπλ σο ζηόρν λα θαηαζηείζνπλ δπλαηή ηελ επθνιόηεξε ρξήζε ηεο Cascading Style Sheets γιώζζαο θαη πην ζπκβαηή κε ηα πξόηππα ζηπι ησλ ηζηνζειίδσλ. πσο νη γιώζζεο πξνγξακκαηηζκνύ θαη νη script βηβιηνζήθεο, ηα CSS πιαίζηα ελζσκαηώλνληαη ζπλήζσο σο εμσηεξηθά θύιια ηεο κνξθήο .css θαη αλαθέξνληαη ζηελ επηθεθαιίδα ηεο HTML. Παξέρνπλ κηα ζεηξά από έηνηκεο επηινγέο γηα ηνλ ζρεδηαζκό θαη ηνλ εμσηεξηθή εκθάλεζε ηεο ηζηνζειίδαο. Παξά ην γεγνλόο όηη πνιιά από απηά ηα πιαίζηα έρνπλ δεκνζηεπζεί, κεξηθνί ζπγγξαθείο ηνπο ηα ρξεζηκνπνηνύλ σο επί ην πιείζηνλ γηα ηελ ηαρεία πξσηνηππνπνίεζε, ή γηα ηελ εθκάζεζε από απηα, θαη πξνηηκνύλ λα ρξεζεκνπνηνύλ CSS πνπ είλαη θαηάιιεια γηα θάζε δεκνζηεπκέλε ηνπνζεζία ρσξίο ζρεδηαζκό, ζπληήξεζε θαη ιήςε θαη γεληθά έρνπλ πνιιά ραξαθηεξηζηηθά πνπ δελ ρξεζηκνπνηνύληαη ζην ζηπι ηνπ site 3.1.5 PHP Η PHP είλαη κηα script πξνγξακκαηηζηηθή γιώζζα απν ηελ πιεπξά ηνπ server πνπ έρεη ζρεδηαζηεί γηα ηελ αλάπηπμε ηνπ παγθόζκηνπ ηζηνύ, αιιά ρξεζηκνπνηείηαη επίζεο σο κία γεληθήο ρξήζεο γιώζζα πξνγξακκαηηζκνύ. Από ηνλ Ιαλνπάξην ηνπ 2013, ε PHP έρεη εγθαηαζηαζεί ζε πεξηζζόηεξνπο από 240 εθαηνκκύξηα ηζηνζειίδεο θαη 2,1 εθαηνκκύξηα web servers. Αξρηθά δεκηνπξγήζεθε από ηνλ Rasmus Lerdorf ην 1994, αιιά ε εθαξκνγή αλαθνξάο ηεο PHP πνπ ηξνθνδνηείηαη από ηελ κεραλή Zend39 παξάγεηαη πιένλ από ηνλ κηιν PHP. Ο PHP θώδηθαο κπνξεί λα είλαη αλακεκεηγκέλνο κε θώδηθα HTML, ή κπνξεί λα ρξεζηκνπνηεζεί ζε ζπλδπαζκό κε δηάθνξεο κεραλέο πθήο θαη πιαηζίσλ ηζηνζειίδσλ. Ο PHP θώδηθαο ζπλήζσο επεμεξγάδεηαη από έλαλ δηεξκελέα PHP, ν νπνίνο ζπλήζσο πινπνηείηαη σο κεηξηθή κνλάδα ελόο web server ή σο έλα Common Gateway 39 Η κεραλή Zend https://en.wikipedia.org/wiki/Zend_Framework 23 Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ Interface (CGI) εθηειέζηκν αξρείν. Μεηά ν PHP θώδηθαο εξκελεύεηαη θαη εθηειείηαη, ν web server ζηέιλεη ηελ έμνδν πνπ πξνθύπηεη γηα ηνλ πειάηε ηνπ, ζπλήζσο κε ηε κνξθή ελόο κέξνπο ηεο παξαγόκελεο ηζηνζειίδαο γηα παξάδεηγκα, ν θώδηθαο PHP κπνξεί λα δεκηνπξγήζεη έλα κέξνο ηνπ θώδηθα HTML κηαο ηζηνζειίδαο όπσο κηα εηθόλα, ή θάπνηα άιια δεδνκέλα. Η PHP έρεη εμειηρζεί επίζεο λα πεξηιακβάλεη κηα δηεπαθή γξακκήο εληνιώλ (CLI), κία ηθαλόηεηα θαη κπνξεί λα ρξεζηκνπνηεζεί ζε γξαθηθέο εθαξκνγέο. Σν πξόηππν δηεξκελέα PHP, ηξνθνδνηείηαη από ηελ κεραλή Zend, είλαη ειεύζεξν ινγηζκηθό πνπ δηαηίζεηαη βάζεη ηεο Άδεηαο PHP. Η PHP επξέσο κεηαθέξεηαη θαη κπνξεί λα αλαπηπρζεί ζηνπο πεξηζζόηεξνπο δηαθνκηζηέο ηνπ δηαδηθηύνπ θαη ζρεδόλ ζε θάζε ιεηηνπξγηθό ζύζηεκα θαη πιαηθόξκα, ρσξίο ρξέσζε. Παξά ηε δεκνηηθόηεηά ηεο, δελ ππήξρε γξαπηή πεξηγξαθή ή πξόηππα γηα ηε γιώζζα PHP, κέρξη ην 2014, αθήλνληαο ην θαλνληθό δηεξκελέα PHP σο έλα de facto πξόηππν. Από ην 2014, ππάξρεη ελ εμειίμεη εξγαζία γηα ηε δεκηνπξγία κηαο επίζεκεο πξνδηαγξαθήο PHP. Καηά ηε δηάξθεηα ηεο δεθαεηίαο ηνπ 2010 ε PHP σο πιαηθόξκα έρεη σξηκάζεη ζεκαληηθά ζε κεγάιν βαζκό από ηελ επηξξνή από άιιεο θνηλόηεηεο ινγηζκηθνύ θαη πξνγξακκάησλ. Η αλάπηπμε ηεο PHP μεθίλεζε ην 1994, όηαλ ν Rasmus Lerdorf έγξαςε κηα ζεηξά από Common Gateway Interface (CGI) εθηειέζηκα αξρεία ζε C ηα νπνία ζπλήζηδε λα δηαηεξήζεη ζηελ πξνζσπηθή ηνπ αξρηθή ζειίδα. Σα επεθηεηλέ θαη πξνζζέζε ηελ ηθαλόηεηα λα εξγάδνληαη κε θόξκεο ηζηνύ θαη λα επηθνηλσλνύλ κε βάζεηο δεδνκέλσλ, θαη νλόκαζε απηή ηελ εθαξκνγή "Πξνζσπηθή ειίδα" (Personal Home Page) ή αιιηώο PHP. Η PHP κπνξνύζε λα ρξεζηκνπνηεζεί γηα ηελ θαηαζθεπή απιώλ, δπλακηθώλ δηαδηθηπαθώλ εθαξκνγώλ. Ο Lerdorf αλαθνίλσζε αξρηθά ηελ θπθινθνξία ηεο PHP σο " Δξγαιεία Πξνζσπηθήο ειίδαο (Tools PHP) έθδνζε 1.0" δεκνζίσο γηα λα επηηαρύλεη ηελ ηνπνζεζία ζθαικάησλ θαη ηε βειηίσζε ηνπ θώδηθα, ζρεηηθά κε ηελ νκάδα ζπδήηεζεο Usenet ζηηο 8 Ινπλίνπ ηνπ 1995. Απηή ε έθδνζε είρε ήδε ηηο βαζηθέο ιεηηνπξγίεο πνπ ε PHP έρεη από ην 2013. Απηό πεξηειάκβαλε κεηαβιεηέο ηύπνπ Perl40, ηνλ ρεηξηζκό ηεο κνξθήο, θαη ηε δπλαηόηεηα λα ελζσκαηώζεη HTML. Η ζύληαμε έκνηαδε κε εθείλε ηνπ Perl, αιιά ήηαλ απινύζηεξε, πην πεξηνξηζκέλε θαη ιηγόηεξν ζπλεπείο. Η πξόσξε κνξθή ηεο PHP δελ πξννξίδνληαλ λα ήηαλ κηα λέα γιώζζα πξνγξακκαηηζκνύ θαη λα κεγάισλε νξγαληθά αιιά ν Lerdorf αλαθνίλσζε εθ ησλ πζηέξσλ: «Γελ μέξσ πώο λα ην ζηακαηήζσ, δελ ππήξμε πνηέ θακία πξόζεζε λα γξάςσ κηα γιώζζα πξνγξακκαηηζκνύ [...] Γελ έρσ απνιύησο θακία ηδέα γηα ην πώο λα γξάςσ κηα γιώζζα πξνγξακκαηηζκνύ, απιά ηε δηαηεξώ πξνζζέηνληαο ην επόκελν ινγηθό βήκα ζηελ πνξεία. ». Μηα νκάδα αλάπηπμεο άξρηζε λα ζρεκαηίδεηαη θαη, κεηά από κήλεο εξγαζίαο θαη δνθηκώλ, θπθινθόξεζε επίζεκα ε δεύηεξε έθδνζε ηεο PHP ηνλ Ννέκβξην ηνπ 1997. Μηα θξηηηθή ηεο PHP είλαη όηη δελ είρε ζρεδηαζηεί αξρηθά, αιιά αληίζεηα αλαπηύρζεθε νξγαληθά. Μεηαμύ άιισλ, απηό έρεη νδεγήζεη ζε αζπλεπείο νλνκαζία ησλ ιεηηνπξγηώλ θαη αζπλεπήο παξαγγειία ησλ παξακέηξσλ ηεο. ε νξηζκέλεο 40 Η γιώζζα Perl https://en.wikipedia.org/wiki/Perl 24 Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο πεξηπηώζεηο, ηα νλόκαηα ιεηηνπξγίαο επηιέρζεθαλ λα ηαηξηάδνπλ κε ηηο βηβιηνζήθεο ζε ρακειόηεξν επίπεδν πξνγξακαηηζκνύ, ην νπνίν έθαλε ηελ PHP λα ήηαλ «πεξηηύιηγκα», ελώ ζε θάπνηεο πνιύ αξρηθέο εθδόζεηο ηεο PHP ην κήθνο ησλ νλνκάησλ ιεηηνπξγίαο ρξεζηκνπνηείηαη εζσηεξηθά σο ζπλάξηεζε θαηαθεξκαηηζκνύ, έηζη ώζηε ηα νλόκαηα πνπ επηιέρζεθαλ ήηαλ γηα ηε βειηίσζε ηεο θαηαλνκήο ησλ ηηκώλ θαηαθεξκαηηζκνύ. 3.1.6 MySQL Η MySQL είλαη έλα αλνηθηνύ θώδηθα (open-source) ζύζηεκα δηαρείξηζεο ζρεζηαθώλ βάζεσλ δεδνκέλσλ (RDBMS)41. Σνλ Ινύιην ηνπ 2013, απνηεινύζε ηελ δεύηεξε πην επξέσο ρξεζηκνπνηνύκελε RDBMS ζηνλ θόζκν, θαη ην πην επξέσο ρξεζηκνπνηνύκελν opensource RDBMS κνληέιν clientserver. Πήξε ην όλνκά ηεο από ηελ θόξε θαη ζπλ-ηδξπηή ηνπ Michael Widenius. Σν αξθηηθόιεμν SQL ζεκαίλεη Structured Query Language. Σν ζρέδην αλάπηπμεο ηεο MySQL έρεη λα θάλεη κε ηνλ πεγαίν θώδηθά πνπ είλαη δηαζέζηκνο ππό ηνπο όξνπο ηεο GNU (General Public License)42, θαζώο θαη ππό ηεο ζπλζήθεο κηαο πνηθηιίαο ησλ ζπκθσληώλ ησλ ηδηόθηεησλ. Η MySQL αλήθεη θαη ρξεκαηνδνηείηαη από κία θαη κόλν γηα θεξδνζθνπηθή εηαηξεία, ηελ ζνπεδηθή εηαηξεία MySQL AB43, πνπ ηώξα αλήθεη ζηελ Oracle Corporation44. Γηα ηδηνθηεζηαθή ρξήζε, αξθεηέο εθδόζεηο είλαη δηαζέζηκεο, θαη πξνζθέξνπλ επηπιένλ ιεηηνπξγηθόηεηα. Η MySQL είλαη κηα δεκνθηιήο επηινγή βάζεσλ δεδνκέλσλ γηα ρξήζε ζε εθαξκνγέο web, θαη απνηειεί θεληξηθό ζπζηαηηθό ζηνηρείν κίαο ζηνίβαο open source θαη επξέσο ρξεζηκνπνηνύκελν ινγηζκηθό εθαξκνγώλ web. Σν LAMP είλαη έλα αξθηηθόιεμν γηα ην "Linux, Apache, MySQL, Perl / PHP / Python." Σα ειεύζεξα ινγηζκηθά αλνηθηνύ θώδηθα έξγσλ πνπ απαηηνύλ έλα πιήξεο ζύζηεκα δηαρείξηζεο βάζεσλ δεδνκέλσλ ζπρλά ρξεζηκνπνηνύλ MySQL. Οη εθαξκνγέο πνπ ρξεζηκνπνηνύλ ηε βάζε δεδνκέλσλ MySQL πεξηιακβάλνπλ: TYPO3, MODx, Joomla, WordPress, phpBB, ην Drupal θαη άιια ινγηζκηθά. Η MySQL ρξεζηκνπνηείηαη επίζεο ζε πνιιέο πςεινύ πξνθίι ηζηνζειίδεο κεγάιεο θιίκαθαο, ζπκπεξηιακβαλνκέλεο ηεο Google (αλ θαη όρη γηα ηηο αλαδεηήζεηο), ην Facebook, ην Twitter, ην Flickr θαη ην YouTube. ε όιεο ηηο πιαηθόξκεο εθηόο από ηα Windows ρξεζηκνπνηνύληαη άιιεο κνξθέο ηεο MySQL ρσξίο γξαθηθά εξγαιεία γηα ηε δηαρείξηζε βάζεσλ δεδνκέλσλ ή δηαρείξεζε δεδνκέλα πνπ πεξηέρνληαη ζε βάζεηο δεδνκέλσλ. Οη ρξήζηεο κπνξνύλ λα ρξεζηκνπνηνύλ ηα εξγαιεία πνπ πεξηιακβάλνληαη ζηε γξακκή εληνιώλ ή λα 41 Η βάζε δεδνκέλσλ RDBMS https://en.wikipedia.org/wiki/Relational_database_management_system Η άδεηα General Public License https://en.wikipedia.org/wiki/GNU_General_Public_License 43 Η εηαηξεία MySQL AB https://en.wikipedia.org/wiki/MySQL_AB 44 Η εηαηξεία Oracle https://en.wikipedia.org/wiki/Oracle_Corporationr 42 25 Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ εγθαηαζηήζνπλ MySQL Workbench κε μερσξηζηό ζηνηρείν ιήςεο. Πνιιά εξγαιεία GUI είλαη επίζεο δηαζέζηκα. Η MySQL είλαη γξακκέλε ζε C θαη C ++. Η SQL parser είλαη γξακκέλε ζε yacc, αιιά ρξεζηκνπνηεί έλα ζπηηηθό ιεμηθνγξαθηθό αλαιπηή. Η MySQL ιεηηνπξγεί ζε πνιιέο πιαηθόξκεο ζπζηεκάησλ, ζπκπεξηιακβαλνκέλσλ ησλ AIX, BSDi, FreeBSD, HP-UX, eComStation, i5 / OS, IRIX, Linux, OS X, Microsoft Windows, ην NetBSD, Novell NetWare, OpenBSD, OpenSolaris, OS / 2 Warp, QNX, Oracle Solaris, Symbian, SunOS, SCO OpenServer, SCO UnixWare, Sanos θαη Tru64. Σν ίδην ην ινγηζκηθό δηαθνκηζηή MySQL θαη νη βηβιηνζήθεο πειάηε ρξεζηκνπνηνύλ δηαλνκή δηπιήο αδεηνδόηεζεο. Πξνζθέξνληαη κε ηελ έθδνζε 2 ηεο GPL, αξρήο γελνκέλεο από ηηο 28 Ινπλίνπ 2000. Τιηθό ππνζηήξημεο κπνξεί λα ιεθζεί από ην επίζεκν εγρεηξίδην. Γσξεάλ επηπιένλ ππνζηήξημε είλαη δηαζέζηκε ζε δηαθνξεηηθά θαλάιηα IRC θαη θόξνπκ. Η Oracle παξέρεη ζηήξημε πνπ θαηαβάιιεηαη κέζσ ησλ πξντόλησλ ηεο MySQL Enterprise. Γηαθέξνπλ σο πξνο ην πεδίν εθαξκνγήο ησλ ππεξεζηώλ θαη ησλ ηηκώλ. Δπηπιένλ, κηα ζεηξά από ηξίηνπο νξγαληζκνύο ππάξρνπλ γηα λα παξέρνπλ ππνζηήξημε θαη ππεξεζίεο, ζπκπεξηιακβαλνκέλσλ ησλ SkySQL Ab θαη Percona. Η MySQL έρεη ιάβεη ζεηηθέο θξηηηθέο θαη ζρνιηαζηέο παξαηεξήζεηο όηη "εθηειείηαη εμαηξεηηθά θαιά ζηελ κέζε πεξίπησζε." θαη όηη νη "δηαζπλδέζεηο ηνπ έξγνπ είλαη εθεί, θαη ε ηεθκεξίσζε (γηα λα κελ αλαθέξνπκε ηα ζρόιηά ζηνλ πξαγκαηηθό θόζκν, κέζσ ηζηνζειίδσλ θαη ηα ζπλαθή) είλαη πνιύ, πνιύ θαιή". Δπίζεο, έρεη δνθηκαζηεί γηα λα είλαη κηα "γξήγνξε, ζηαζεξή θαη αιεζηλή βάζε δεδνκέλσλ SQL πνιιαπιώλ ρξεζηώλ θαη δηαθνκηζηώλ". πσο πξναλαθέξζεθε ε MySQL δεκηνπξγήζεθε από κηα ζνπεδηθή εηαηξεία, ηελ MySQL AB, πνπ ηδξύζεθε από ηνλ David Axmark, ηνλ Allan Larsson θαη ην Michael "Monty" Widenius. Η πξώηε έθδνζε ηεο MySQL εκθαλίζηεθε ζηηο 23 Μαΐνπ 1995. Αξρηθά δεκηνπξγήζεθε γηα πξνζσπηθή ρξήζε από ηελ mSQL κε βάζε ηελ ρακεινύ επηπέδνπ γιώζζα ISAM, πνπ νη δεκηνπξγνί ζεσξνύζαλ ππεξβνιηθά αξγή θαη άθακπηε. Γεκηνύξγεζαλ κηα λέα δηεπαθή SQL, δηαηεξώληαο ην ίδην API όπσο κε ηελ mSQL. Η δηαηήξεζε ηνπ API ζπλάδεη κε ην ζύζηεκα mSQL θαη πνιινί πξνγξακκαηηζηέο ήηαλ ζε ζέζε λα ρξεζηκνπνηήζνπλ ηελ MySQL αληί πξνγελέζηεξσλ εθδόζεσλ ηεο mSQL. 3.2 Πλαηθόπμερ ζσεδίαζηρ διαδικηςακών εθαπμογών 3.2.1 WordPress 26 Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο Σν WordPress είλαη έλα ζύζηεκα δηαρείξηζεο πεξηερνκέλνπ δσξεάλ θαη αλνηθηνύ θώδηθα (open-source) βαζηζκέλν ζε PHP θαη MySQL. Σα ραξαθηεξηζηηθά γλσξίζκαηα ηνπ πεξηιακβάλνπλ κηα αξρηηεθηνληθή plugin θαη έλα πξόηππν ζύζηεκα. Σν WordPress ρξεζηκνπνηείηαη πεξηζζόηεξν από ην 23,3% ησλ 10 εθαηνκκπξίσλ θνξπθαίσλ ηζηνζειίδσλ από ηνλ Ιαλνπάξην ηνπ 2015. Σν WordPress είλαη ην πην δεκνθηιέο ζύζηεκα ζε ρξήζε blog ζην δηαδίθηπν ζε πεξηζζόηεξα από 60 εθαηνκκύξηα ηζηνζειίδεο. Δίρε θπθινθνξήζεη ζηηο 27 Μαΐνπ ηνπ 2003, από ηνπο ηδξπηέο ηεο, Μαη Mullenweg θαη Mike Little. Η άδεηα ζύκθσλα κε ην νπνίν θπθινθνξήζε ην WordPress ινγηζκηθό είλαη ε GPLv2 θαη αξγόηεξα από ην Ίδξπκα Διεύζεξνπ Λνγηζκηθνύ. Σν B2 / cafelog45, πην γλσζηό σο Β2 ή cafelog, ήηαλ ν πξόδξνκνο ζην WordPress. Σν Β2 / cafelog εθηηκάηαη όηη έρεη εγθαηαζηαζεί ζε πεξίπνπ 2.000 blogs από ην Μάην ηνπ 2003. Ήηαλ γξακκέλν ζε PHP γηα ρξήζε κε MySQL από ηνλ Michel Valdrighi, ν νπνίνο ηώξα ζπκβάιιεη ζην έξγν ηνπ WordPress. Παξά ην γεγνλόο όηη ην WordPress είλαη ν επίζεκνο δηάδνρνο, έλα άιιν έξγν ην b2evolution είλαη επίζεο ζε ελεξγό αλάπηπμε. Σν WordPress εκθαλίζηεθε γηα πξώηε θνξά ην 2003 σο κηα θνηλή πξνζπάζεηα κεηαμύ ηνπ Matt Mullenweg θαη ηνπ Mike Little λα δεκηνπξγήζνπλ έλα παξαθιάδη ηνπ B2. Ο Christine Selleck Tremoulet, έλαο θίινο ηνπ Mullenweg, πξόηεηλε ην όλνκα ηνπ WordPress. Σνλ Οθηώβξην ηνπ 2009, ε έθζεζε Open Source CMS marketshare θαηέιεμε ζην ζπκπέξαζκα όηη ην WordPress θαηέρεη ηελ κεγαιύηεξε αληαγσληζηηθή δύλακε απν θάζε άιιν ζύζηεκα δηαρείξηζεο πεξηερνκέλνπ αλνηρηνύ θώδηθα. Οη ρξήζηεο κπνξνύλ λα εγθαηαζηήζνπλ ην WordPress θαη λα θάλνπλ ελαιιαγή κεηαμύ ησλ ζεκάησλ. Σα ζέκαηα απηά επηηξέπνπλ ζηνπο ρξήζηεο λα αιιάμνπλ ηελ εκθάληζε θαη ηε ιεηηνπξγηθόηεηα ηεο ηζηνζειίδαο WordPress θαη κπνξνύλ λα ηα εγθαηαζηήζνπλ ρσξίο λα αιινησζεί ην πεξηερόκελν ηνπ ηζηόηνπνπ. Κάζε ηζηνζειίδα πνπ δεκηνπξγήηαη κε ηελ ρξήζε ηνπ WordPress απαηηεί ηνπιάρηζηνλ έλα ζέκα λα είλαη παξόλ θαη θάζε ζέκα ζα πξέπεη λα ζρεδηαζηεί κε βάζε ηα πξόηππα ηνπ WordPress κε δνκεκέλν PHP, έγθπξε ρξήζε HTML θαη επηθαιππηόκελα θύιια ζηπι ηύπνπ CSS. Σα ζέκαηα κπνξεί λα εγθαηαζηαζνύλ άκεζα κε ηε ρξήζε ηνπ εξγαιείνπ δηνίθεζεο ηνπ WordPress ζην ηακπιό. Η PHP, ε HTML θαη ν CSS θώδηθαο πνπ βξίζθεηαη ζηα πξνππάξρνλ ζέκαηα κπνξεί λα πξνζηεζεί ή λα επεμεξγαζηεί γηα λα παξέρεη πξνεγκέλα ραξαθηεξηζηηθά. Σα WordPress ζέκαηα ζε γεληθέο γξακκέο θαηαηάζζνληαη ζε δύν θαηεγνξίεο, δσξεάλ ζέκαηα θαη ζέκαηα κε πιεξσηέν αζθάιηζηξν. ια ηα δσξεάλ ζέκαηα πνπ αλαθέξνληαη ζηνλ θαηάινγν WordPress θαη ηα πξηκνδνηεκέλα ζέκαηα ζα πξέπεη λα αγνξαζηνύλ από επηκέξνπο WordPress πξνγξακκαηηζηέο. Οη ρξήζηεο ηνπ WordPress κπνξνύλ επίζεο λα δεκηνπξγήζνπλ θαη λα αλαπηύμνπλ ηα δηθά ηνπο ζέκαηα, εθόζνλ έρνπλ ηε γλώζε θαη ηελ ηθαλόηεηα λα ην πξάμνπλ. 3.2.2 Joomla 45 Σν ζύζηεκα B2/cafelog https://en.wikipedia.org/wiki/B2evolution 27 Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ Σν Joomla είλαη έλα ζύζηεκα δηαρείξηζεο πεξηερνκέλνπ δσξεάλ θαη open-source γηα ην πεξηερόκελν δεκνζίεπζεο ζην δηαδίθηπν. Δίλαη ρηηζκέλν ζε έλα πιαίζην δηδηθηπαθήο εθαξκνγήο κε ηελ κνξθή Model-View-Controller πνπ κπνξεί λα ρξεζηκνπνηεζεί αλεμάξηεηα. Σν Joomla είλαη γξακκέλν ζε PHP θαη ρξεζηκνπνηεί ηερληθέο αληηθεηκελνζηξαθή πξνγξακκαηηζκνύ θαη ηα πξόηππα ζρεδηαζκνύ ινγηζκηθνύ, απνζεθεύεη δεδνκέλα ζε MySQL βάζεο δεδνκέλσλ θαη πεξηιακβάλεη ραξαθηεξηζηηθά όπσο ε cache ησλ ζειίδσλ, RSS feeds46, εθηππώζηκεο εθδόζεηο ησλ ζειίδσλ, εηδήζεηο, blogs, αλαδήηεζε, θαη ππνζηήξημε γηα δηεζλνπνίεζε γιώζζαο. Σνλ Φεβξνπάξην ηνπ 2014 ην Joomla έρεη θαηεβαζηεί πάλσ από 50 εθαηνκκύξηα θνξέο. Πάλσ από 7.700 δσξεάλ θαη εκπνξηθέο επεθηάζεηο είλαη δηαζέζηκεο από ηελ επίζεκε ζειίδα ηεο Joomla θαη πνιιά άιια είλαη δηαζέζηκα από άιιεο πεγέο. Δθηηκάηαη όηη είλαη ην δεύηεξν πην δηαδεδνκέλν ζύζηεκα δηαρείξηζεο πεξηερνκέλνπ ζην Γηαδίθηπν, κεηά από WordPress. Σν Joomla ήηαλ ην απνηέιεζκα ηεο δεκηνπξγίαο ελόο παξαθιαδηνύ ηνπ Mambo47, ζηηο 17 Απγνύζηνπ ηνπ 2005. Δθείλε ηελ επνρή, ην όλνκα Mambo ήηαλ ην ζήκα θαηαηεζέλ ηνπ Miro International Pty Ltd, ην νπνίν είλαη έλα κε θεξδνζθνπηθό ίδξπκα κε δεισκέλν ζθνπό ηε ρξεκαηνδόηεζε ηνπ έξγνπ θαη πξνζηαηεύνληάο ην από αγσγέο. Η νκάδα αλάπηπμεο ηνπ Joomla ηζρπξίζηεθε όηη πνιιέο από ηηο δηαηάμεηο ηεο θαηαζθεπήο ζεκειηώζεσο παξαβηάδνπλ πξνεγνύκελεο ζπκθσλίεο πνπ έρνπλ ζπλαθζεί από ηελ εθιεγκέλε ζπληνληζηηθή επηηξνπή Mambo, δελ είραλ ηελ απαξαίηεηε δηαβνύιεπζε κε ηνπο θύξηνπο ελδηαθεξόκελνπο θαη πεξηιακβάλνπλ δηαηάμεηο πνπ παξαβηάδνπλ βαζηθέο αμίεο αλνηρηνύ θώδηθα. Πξνγξακκαηηζηέο ηνπ Joomla δεκηνύξγεζαλ κηα ηζηνζειίδα πνπ νλνκάδεηαη OpenSourceMatters.org (OSM) γηα ηε δηαλνκή πιεξνθνξηώλ ζηελ θνηλόηεηα ηνπ ινγηζκηθνύ. Δπηθεθαιήο ηνπ ζρεδίνπ ήηαλ ν Andrew Eddie πνπ έγξαςε κηα επηζηνιή, ε νπνία εκθαλίζηεθε ζηελ ελόηεηα αλαθνηλώζεσλ ηνπ δεκόζηνπ θόξνπκ ζην mamboserver.com. Πάλσ από ρίιηνη άλζξσπνη ελώζεθαλ ζην OpenSourceMatters.org κέζα ζε κηα εκέξα γηα ελζάξξπλζε θαη ππνζηήξημε. Ο δηεπζύλσλ ζύκβνπινο Peter Lamont ηεο Miro απάληεζε δεκνζίσο ζηελ νκάδα αλάπηπμεο ζε έλα άξζξν κε ηίηιν "Η δηακάρε Mambo Open Source - 20 εξσηήζεηο κε ηελ Miro". Απηό ην γεγνλόο πξνθάιεζε κεγάιε αληηπαξάζεζε ζην εζσηεξηθό ηεο θνηλόηεηαο ειεύζεξνπ ινγηζκηθνύ γηα ηνλ νξηζκό ηνπ αλνηθηνύ θώδηθα. Φόξνπκ άιισλ έξγσλ αλνηρηνύ θώδηθα ήηαλ ελεξγά κε δεκνζηεύζεηο ζρεηηθά κε ηηο ελέξγεηεο θαη ησλ δύν πιεπξώλ. ηηο δύν εβδνκάδεο πνπ αθνινύζεζαλ απν ηελ αλαθνίλσζε, νη νκάδεο αλαδηνξγαλώζεθαλ θαη ε θνηλόηεηα ζπλέρηζε λα απμάλεηαη. Ο Eben Moglen θαη ην Software Freedom Law Center (SFLC) βνήζεζαλ ηελ νκάδα ηνπ ππξήλα ηνπ Joomla 46 47 Σν RSS feeds https://en.wikipedia.org/wiki/RSS Σν πξόγξακκα Mambo https://en.wikipedia.org/wiki/Mambo_%28software%29 28 Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο λα αξρίδεη ηνλ Αύγνπζην ηνπ 2005. Η SFLC ζπλερίζεη λα παξέρεη λνκηθή θαζνδήγεζε γηα ηελ ην έξγν ηνπ Joomla. ηηο 18 Απγνύζηνπ, ν Andrew Eddie δήηεζε απν ηελ θνηλόηεηα λα πξνηείλεη έλα όλνκα γηα ην έξγν. Η βαζηθή νκάδα επηθπιάζζεηαη ηνπ δηθαηώκαηόο ηεο γηα ηελ ηειηθή απόθαζε νλνκαηνδνζίαο, θαη επέιεμε έλα όλνκα πνπ δελ πξνηείλεηαη από ηελ θνηλόηεηα. ηηο 22 επηεκβξίνπ, ην λέν όλνκα, ην Joomla, είρε αλαθνηλσζεί. Δίλαη ε αγγινπνίεζε ηεο ζνπαρίιη ιέμεο jumla ζεκαίλεη όινη καδί ή σο ζύλνιν, ε νπνία έρεη επίζεο κηα παξόκνηα έλλνηα ζε ηνπιάρηζηνλ ηξείο άιιεο γιώζζεο. ηηο 26 επηεκβξίνπ, ε νκάδα αλάπηπμεο δήηεζε από ηελ θνηλόηεηα λα πξνηείλεη έλα ινγόηππν θαη θάιεζε ηελ θνηλόηεηα λα ςεθίζεη ζρεηηθά κε ην ινγόηππν απηό θαη ε νκάδα αλαθνίλσζε ηελ απόθαζε ηεο θνηλόηεηαο ζηηο 29 επηεκβξίνπ. 3.2.3 Drupal Σν Drupal απνηειεί έλα πιαίζην δηαρείξηζεο πεξηερνκέλνπ ειεύζεξνπ θαη αλνηθηνύ θώδηθα γξακκέλν ζε PHP θαη δηαλέκεηαη ππό ηελ GNU General Public License. Υξεζηκνπνηείηαη σο back-end πιαίζην γηα ηνπιάρηζηνλ 2,1% ηνπ ζπλόινπ ησλ ηζηνζειίδσλ ζε όιν ηνλ θόζκν πνπ θπκαίλνληαη από ηα πξνζσπηθά blogs γηα ηνπο εηαηξηθνύο, πνιηηηθνύο, θαη από θπβεξλεηηθνύο δηθηπαθνύο ηόπνπο. Δπίζεο ρξεζηκνπνηείηαη γηα ηε δηαρείξηζε ηεο γλώζεο θαη ηεο επηρεηξεκαηηθήο ζπλεξγαζίαο. Σν πξόηππν έθδνζεο ηνπ Drupal, γλσζηό σο ππξήλαο ηνπ Drupal, πεξηέρεη ηηο βαζηθέο ιεηηνπξγίεο πνπ είλαη θνηλέο ζηα ζπζηήκαηα δηαρείξηζεο πεξηερνκέλνπ. Απηέο πεξηιακβάλνπλ ηελ εγγξαθή ηνπ ινγαξηαζκνύ ηνπ ρξήζηε θαη ηε ζπληήξεζε απηνύ, ηε δηαρείξηζε κελνύ, RSS feeds, ηελ ηαμηλόκεζε, ηελ ζειηδνπνίεζε θαη ηε δηαρείξηζε ηνπ ζπζηήκαηνο. Ο ππξήλαο ηνπ Drupal κπνξεί λα ρξεζηκεύζεη σο κηα απιή ηζηνζειίδα, έλα blog ελόο ή πνιιαπιώλ ρξεζηώλ, έλα θόξνπκ ζην Γηαδίθηπν, ή κηα ηζηνζειίδα θνηλόηεηαο πνπ παξέρεη ην πεξηερόκελν πνπ δεκηνπξγείηαη από ηνπο ρξήζηεο. ηελ θνηλόηεηα ηνπ Drupal, ν όξνο "ππξήλαο" αλαθέξεηαη ζην ζπλεξγαηηθά ελζσκαησκέλν θνκκάηη ηνπ θώδηθα πνπ κπνξεί λα επεθηαζεί κέζσ αληαπνδνηηθώλ ελνηήησλ θαη εθδόζεσλ. Ο Drupal ππξήλαο είλαη ην ζηνηρείν απόζεκα ηνπ Drupal. ηελ πξνεπηιεγκέλε δηακόξθσζε ελόο ηζηόηνπνπ Drupal, ην πεξηερόκελν κπνξεί λα εηζθέξεη είηε νλνκαζηηθνύο είηε αλώλπκνπο ρξήζηεο θαηά ηελ θξίζε ηνπ δηαρεηξηζηή θαη είλαη πξνζβάζηκα ζηνπο επηζθέπηεο ηεο ηζηνζειίδαο κε κηα πνηθηιία επηιέμηκσλ θξηηεξίσλ. Σν Drupal έρεη πηνζεηήζεη θάπνηεο βηβιηνζήθεο ζην Drupal ππξήλα. 29 Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ Βαζηθέο ελόηεηεο πεξηιακβάλνπλ επίζεο έλα ηεξαξρηθό ζύζηεκα ηαμηλόκεζεο, ην νπνίν επηηξέπεη ζην πεξηερόκελν λα θαηεγνξηνπνηεζεί κε εηηθέηεο ή κε ιέμεηο-θιεηδηά γηα επθνιόηεξε πξόζβαζε. Drupal δηαηεξεί έλα ιεπηνκεξέο εκεξνιόγην αιιαγώλ ηνπ ππξήλα ελεκεξώζεσλ ραξαθηεξηζηηθό από ηελ έθδνζε. Από ηνλ Απξίιην ηνπ 2015, ε θνηλόηεηα ηνπ Drupal έρεη δηαζέζεη πάλσ από 31.000 επηπιένλ ελόηεηεο. Οη ελ ιόγσ κνλάδεο έρνπλ ζθνπό λα αιιάμνπλ θαη λα επεθηείλνπλ ηηο βαζηθέο δπλαηόηεηεο, ηε ζπκπεξηθνξά θαη ηελ εκθάληζε ελόο ηόπνπ Drupal. Η θνηλόηεηα ηνπ Drupal πεξηιακβάλεη πεξηζζόηεξα από έλα εθαηνκκύξην κέιε θαη 31.000 Πξνγξακκαηηζηέο. "Η Drupal Δπηζθόπεζε", έλα ραξαθηεξηζηηθό ηεο ηζηνζειίδαο ηνπ έξγνπ, ην πεξηγξάθεη σο πεξηερόκελν πιαηζίνπ δηαρείξηζεο. Σν Drupal πεξηγξάθεη επίζεο ην ίδην σο έλα πιαίζην εθαξκνγώλ δηαδηθηύνπ, δεδνκέλνπ όηη ηθαλνπνηεί ηηο γεληθά απνδεθηέο απαηηήζεηο γηα ηα πιαίζηα. Παξά ην γεγνλόο όηη ην Drupal πξνζθέξεη κηα εθιεπηπζκέλε δηεπαθή πξνγξακκαηηζκνύ εθαξκνγώλ γηα πξνγξακκαηηζηέο, ε βαζηθή εγθαηάζηαζε ηεο ηζηνζειίδαο θαη ε δηνίθεζε ηνπ πιαηζίνπ απαηηεί γλώζεηο πξνγξακκαηηζκνύ. Σν Drupal ηξέρεη ζε νπνηαδήπνηε ππνινγηζηηθή πιαηθόξκα πνπ ππνζηεξίδεη ηόζν έλα δηαθνκηζηή δηαδηθηύνπ πνπ κπνξεί λα ρξεζεκνπνηεί PHP όζν θαη κηα βάζε δεδνκέλσλ γηα ηελ απνζήθεπζε θαη δηακόξθσζε ηνπ πεξηερνκέλνπ. Αξρηθά γξακκέλν από ηνλ Dries Buytaert σο έλα πίλαθα αλαθνηλώζεσλ, ην Drupal κεηαηξάπεθε ζε ζρέδην αλνηθηνύ θώδηθα ην 2001. Σν όλνκα ηνπ Drupal απνηειεί κηα αγγιηθή απόδνζε ηεο νιιαλδηθή ιέμε "druppel", πνπ ζεκαίλεη "ζηαγόλα". Η νλνκαζία πξνήιζε από ηελ ηζηνζειίδα Drop.org, ηεο νπνίαο ν θώδηθαο ελζσκαηώζεθε ζην Drupal. Ο Buytaert ήζειε λα νλνκάζεη ηελ ηζηνζειίδα "dorp" (Οιιαλδηθά γηα «ρσξηό») γηα ηηο πηπρέο ηνπ σο θνηλόηεηα, αιιά γξάθνληαο ην ιάζνο θαη ζεώξεζε όηη ην ζθάικα αθνπγόηαλ θαιύηεξα. Σν ελδηαθέξνλ γηα ην Drupal πήξε κηα ζεκαληηθή ώζεζε ην 2003, όηαλ βνήζεζε ηελ θαηαζθεπή ηνπ "DeanSpace" γηα ηνλ Howard Dean, έλαο από ηνπο ππνςεθίνπο ζηελ πξσηνβάζκηα εθζηξαηεία ηνπ Γεκνθξαηηθνύ Κόκκαηνο ησλ ΗΠΑ γηα ηηο πξνεδξηθέο εθινγέο ηνπ 2004. Σν DeanSpace ρξεζηκνπνηεί ηελ θνηλή ρξήζε αλνηθηνύ θώδηθα ηνπ Drupal γηα λα ζηεξίμεη έλα απνθεληξσκέλν δίθηπν ησλ πεξίπνπ 50 δηαθνξεηηθώλ, αλεπίζεκσλ ηζηνζειίδσλ πνπ επέηξεπε ζηνπο ρξήζηεο λα επηθνηλσλνύλ απεπζείαο κεηαμύ ηνπο θαζώο θαη κε ηελ πνιηηηθή εθζηξαηεία. Μεηά ην ηέινο ηεο εθζηξαηεία ηνπ Dean, ηα κέιε ηεο νκάδαο πξνγξακκαηηζκνύ ηνπ, ζπλέρηζαλ ην ελδηαθέξνλ ηνπο γηα ηελ αλάπηπμε ηεο πιαηθόξκαο. Άιιεο εηαηξείεο άξρηζαλ λα εηδηθεύνληαη επίζεο ζηελ αλάπηπμε ηνπ Drupal. Μέρξη ην 2013 ε ηζηνζειίδα Drupal είρε εθαηνληάδεο πξνκεζεπηέο πνπ πξνζθέξνπλ ππεξεζίεο πνπ ζρεηίδνληαη κε ην Drupal. Μεηά απν πνιιέο αιιαγέο θαη βειηηώζεηο ζηηο εθδόζεηο ηνπ Drupal ηηο 7 Οθηώβξε ηνπ 2015 αλαθνηλώζεθε ε έθδνζε ηνπ Drupal 8. Σν Drupal 8 ζα πεξηιακβάλεη κηα ηεξάζηηα ζεηξά από λέα ραξαθηεξηζηηθά θαη βειηηώζεηο γηα ηνπο ρξήζηεο θαη ηνπο πξνγξακκαηηζηέο όπσο βειηησκέλε δηεπαθή ρξήζηε, επί ηόπνπ επεμεξγαζία, ζεκαληηθά βειηησκέλε ππνζηήξημε θνξεηώλ ζπζθεπώλ, εηζαγσγή λέσλ αληηθεηκέλσλ κε πξνζαλαηνιηζκό ηα ζπζηαηηθά ηνπ back-end, βειηησκέλε πνιπγισζζηθή ππνζηήξημε θαη εθαηνληάδεο άιιεο βειηηώζεηο. ηηο 30 Οθησβξίνπ ηνπ 2015, αλαθνηλώζεθε όηη ην Drupal 8 ζα θπθινθνξήζεη ζηηο 19 Ννέκβξε ηνπ 2015. 30 Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο 3.3 Πλαίζια (Frameworks) 3.3.1 Οπιζμόρ ηυν Frameworks Έλα Framework (πιαίζην) είλαη έλα ηππνπνηεκέλν ζύλνιν ησλ ελλνηώλ, ησλ πξαθηηθώλ θαη ησλ θξηηεξίσλ πνπ ζπκβάινπλ ζηελ αληηκεηώπηζε ελόο είδνπο ηνπ πξνβιήκαηνο, ην νπνίν κπνξεί λα ρξεζηκνπνηεζεί σο αλαθνξά γηα λα βνεζήζεη ηελ πξνζεγγίζε θαη λα επηιύζε λέσλ πξνβιήκαησλ παξόκνηαο θύζεο. ηνλ θόζκν ηνπ web design, γηα λα δσζεί έλαο πην απιόο νξηζκόο, έλα πιαίζην νξίδεηαη σο έλα παθέην πνπ απνηειείηαη από κηα δνκή ησλ αξρείσλ θαη ησλ θαθέισλ ηνπ ηππνπνηεκέλνπ θώδηθα (HTML, CSS, JS έγγξαθα θ.ιπ.), ηα νπνία κπνξνύλ λα ρξεζηκνπνηεζνύλ γηα ηελ ππνζηήξημε ηεο αλάπηπμε ησλ δηθηπαθώλ ηόπσλ, σο βάζε γηα λα αξρίζεη ε θαηαζθεπή ελόο site. Οη πεξηζζόηεξεο ηζηνζειίδεο κνηξάδνληαη κηα πνιύ παξόκνηα αλ όρη ηαπηόζεκε δνκή. Ο ζηόρνο ησλ πιαηζίσλ είλαη λα παξαρζεί κηα θνηλή δνκή έηζη ώζηε νη πξνγξακκαηηζηέο λα κελ ρξεηάδεηαη λα ην μαλαθάλνπλ από ηελ αξρή θαη λα ρξεζηκνπνηήζνπλ μαλά ηνλ θώδηθα πνπ παξέρεηαη. Με ηνλ ηξόπν απηό, ηα πιαίζηα επηηξέπνπλ ηελ απνθνπή κεγάινπ κέξνπο ηνπ έξγνπ κε απνηέιεζκα ηελ εμηθνλόκεζε πνιύ ρακέλνπ ρξόλνπ. Σα CSS πιαίζηα είλαη έηνηκα πιαίζηα ινγηζκηθνύ πνπ είλαη ζρεδηαζκέλα λα θαηαζηείζνπλ δπλαηή ηελ επθνιόηεξε θαη πην ζπκβαηή ιεηηνπξγία κε ηα πξόηππα ζρεδηαζκνύ ηζηνζειίδσλ κε ηε ρξήζε ηεο γιώζζαο Cascading Style Sheets. Σα πεξηζζόηεξα από απηά ηα πιαίζηα πεξηιακβάλνπλ ηνπιάρηζηνλ έλα πιέγκα. Πεξηζζόηεξα ιεηηνπξγηθά πιαίζηα έξρνληαη επίζεο κε πεξηζζόηεξεο δπλαηόηεηεο θαη πξόζζεηεο ιεηηνπξγίεο πνπ βαζίδνληαη ζηε JavaScript, αιιά σο επί ην πιείζηνλ ζηνλ πξνζαλαηνιηζκέλν ζρεδηαζκό. Απηό πνπ δηαθνξνπνηεί απηέο από ιεηηνπξγηθήο απόςεσο είλαη ε ρξήζε πιήξεο πιαηζίσλ κέζσ ηεο JavaScript. 3.3.2 Front-End και Back-End Τπάξρνπλ δύν βαζηθνί ηύπνη δηαθνξνπνηήζεο, ην νπίζζην πιαίζην (back-end) θαη ην εκπξόζζην πιαίζην (front-end). Απηή ε δηάθξηζε γίλεηαη αλάινγα κε ην αλ ην πιαίζην πξννξίδεηαη γηα ην ζηξώκα παξνπζίαζεο ή γηα ην ζηξώκα ηεο αίηεζεο θαη ηεο πξνγξακκαηηζηηθήο ινγηθήο. Σέηνηνπ είδνπο πιαίζηα είλαη κηα ελλνηνινγηθή αληίιεςε δειαδή κία πξνπαξαζθεπαζκέλε νκάδα πξνηύπσλ από ηελ νπνία εξγάδεηαη ν θαηαζθεπαζηήο κηαο εθαξκνγήο. Η έλλνηα ελόο πιαηζίνπ κπνξεί λα εθαξκνζηεί ζε δηαθνξεηηθέο δηεξγαζίεο πνπ πξαγκαηνπνηνύληαη ζην δηαδίθηπν δειαδή ην ζηξώκα ηνπ πξνγξακκαηηζηή πνπ ζπλδέεη ηε βάζε δεδνκέλσλ κε ην πεξηερόκελν ηνπ ηζηνηόπνπ θαη ρξεζηκνπνηεί γιώζζα PHP, θαη ην ζηξώκα ηνπ ζρεδηαζηή, όπνπ απηό ην πεξηερόκελν ζα πξέπεη λα παξνπζηάδεηαη ζε έγγξαθα HTML κε CSS πνπ νξίδεηαη σο θύιια ζηπι έηζη ώζηε λα κπνξνύλ ηειηθά λα πξνβιεζνύλ ζε έλα πξόγξακκα πεξηήγεζεο. Μπνξνύλ λα είλαη back-end δειαδή έλα ζύλνιν αξρείσλ κε βηβιηνζήθεο πνπ έρνπλ πξόζβαζε ζε βάζεηο δεδνκέλσλ, δνκέο πξνηύπσλ θαη δηαρείξηζε ζπλεδξηώλ ή κπνξνύλ λα είλαη front-end. Η παξνύζα εξγαζία επηθεληξώλεηαη ζε πιαίζηα front-end. 31 Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ Σα πιαίζηα Front-end ζπλήζσο απνηεινύληαη από έλα παθέην πνπ απνηειείηαη από κηα δνκή ησλ αξρείσλ θαη ησλ θαθέισλ ηνπ ηππνπνηεκέλνπ θώδηθα (HTML, CSS, JS έγγξαθα θ.ιπ.) Σα ζπλήζε ζπζηαηηθά είλαη: CSS θώδηθα γηα λα δεκηνπξγήζεη έλα πιέγκα: απηό επηηξέπεη ζηνλ θύξην ηνπ έξγνπ γηα ηελ ηνπνζέηεζε ησλ δηαθόξσλ ζηνηρείσλ πνπ ζπλζέηνπλ ην ζρεδηαζκό ηεο ηζηνζειίδαο ζε έλα απιό θαη επέιηθην ηξόπν. Οξηζκνύο ζηπι Σππνγξαθίαο γηα ζηνηρεία HTML. Λύζεηο γηα πεξηπηώζεηο αζπκβαηόηεηαο ηνπ πξνγξάκκαηνο πεξηήγεζεο, ώζηε ε ηζηνζειίδα εκθαλίδεη ζσζηά ζε όινπο ηνπο browsers. Γεκηνπξγία πξόηππσλ θιάζεσλ CSS πνπ κπνξνύλ λα ρξεζηκνπνηεζνύλ γηα Style Advanced ζπζηαηηθά ηεο δηεπαθήο ρξήζηε. Δικόνα 5 Γιαθοπέρ Front-end και Back-end 32 Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο 3.3.3 Το framework Foundation Σν Foundation είλαη έλα δηαδξαζηηθό front-end πιαίζην. Παξέρεη έλα δηαδξαζηηθό δίθηπν θαη ρξεζεκνπνηεί ηα ζπζηαηηθά, ηα πξόηππα θαη ηελ γεληθή έλλνηα δεκηνπξγίαο θώδηθα ηεο HTML θαη ηνπ CSS, ζπκπεξηιακβαλνκέλεο ηεο ηππνγξαθίαο, ηηο θόξκεο, ηα θνπκπηά, ηελ πινήγεζε θαη άιισλ ζηνηρείσλ ηνπ πεξηβάιινληνο, θαζώο θαη πξναηξεηηθέο επεθηάζεηο JavaScript. Σν Foundation ζπληεξείηαη από zurb.com θαη είλαη έλα έξγν αλνηθηνύ πεγαίνπ θώδηθα. Σν Foundation έρεη αλαδεηρζεί σο έλα έξγν ηεο εηαηξίαο ZURB γηα ηελ αλάπηπμε front-end θώδηθα γξεγνξόηεξα θαη θαιύηεξα. Σνλ Οθηώβξην ηνπ 2011, ε ZURB θπθινθόξεζε ηελ έθδνζε Foundation 2.0 σο αλνηθηνύ θώδηθα ππό ηελ άδεηα MIT. Απν ηνλ Ινύλην ηνπ 2012 κέρξη ηνλ Ννέκβξε ηνπ 2013 ε ZURB θπθινθόξεζε δηάθνξεο ελεκεξώζεηο, εθδόζεηο θαη αλαβαζκήζεηο θηάλνληαο ζηελ ζεκεξηλή θαη πην πξόζθαηε έθδνζε ην Foundation 5.0. Η νκάδα εξγάδεηαη γηα ηελ επόκελε έθδνζε ηνπ Foundation γηα ηηο ηζηηνζειίδεο πνπ ζα πξέπεη λα θπθινθνξήζεη ζηα ηέιε ηνπ 2015. Σν Foundation έρεη ζρεδηαζηεί θαη δνθηκαζηεί ζε πνιιά πξνγξάκκαηα πεξηήγεζεο θαη ζπζθεπέο. Πξόθεηηαη γηα έλα θηλεηό δηαδξαζηηθό πιαίζην ρηηζκέλν κε Sass / SCSS48 δίλνληαο ζηνπο ζρεδηαδηέο εθαξκνγώλ βέιηηζηε πξαθηηθή ρξήζε γηα ηελ ηαρεία αλάπηπμε. Σν πιαίζην πεξηιακβάλεη ηα πην θνηλά πξόηππα πνπ απαηηνύληαη γηα ηελ ξαγδαία θαηαζθεπή πξσηνηύπσλ ζε έλα δηαδξαζηηθό ρώξν. Μέζσ ηεο ρξήζεο ησλ Sass κεηγκάησλ, ηα ζπζηαηηθά ηνπ Foundation είλαη εύθνια ηξνπνπνηήζεκα κε βάζε ην ζηπι θαη απιά επεθηηλόκελα. Από ηελ έθδνζε 2.0 ππνζηεξίδεη επίζεο 48 Η stylesheets γιώζζα Sass https://en.wikipedia.org/wiki/Sass_%28stylesheet_language%29 33 Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ δηαδξαζηηθό ζρεδηαζκό. Απηό ζεκαίλεη όηη ε γξαθηζηηθή πιεπξά ησλ ηζηνζειίδσλ πξνζαξκόδεηαη δπλακηθά, ιακβάλνληαο ππόςε ηα ραξαθηεξηζηηθά ηεο ζπζθεπήο πνπ ρξεζηκνπνηείηαη (PC, tablet, θηλεηό ηειέθσλν). Δπηπιένλ, δεδνκέλνπ ηεο έθδνζεο 4.0 έρεη δώζεη κεγαιήηεξε βαξήηεηα ζηελ πξνζέγγηζε, ην ζρεδηαζκό θαη ηελ αλάπηπμε γηα θηλεηέο ζπζθεπέο αιιά θαη εληζρύνληαο ηηο ηζηνζειίδεο θαη ηηο εθαξκνγέο γηα κεγαιύηεξεο νζόλεο. Σν Foundation είλαη αλνηθηνύ θώδηθα θαη νη πξνγξακκαηηζηέο ελζαξξύλνληαη λα ζπκκεηάζρνπλ ζην πξόγξακκα θαη λα θάλνπλ ηηο δηθέο ηνπο εηζθνξέο ζηελ πιαηθόξκα. Σν Foundation είλαη ζπνλδπισηή πιαηθόξκα θαη απνηειείηαη νπζηαζηηθά από κηα ζεηξά θύιισλ ζηύι (stylesheets) ηύπνπ Sass πνπ εθαξκόδνπλ ηα δηάθνξα ζπζηαηηθά ηνπ παθέηνπ εξγαιείσλ. Σα Stylesheets ζπζηαηηθά κπνξεί λα ζπκπεξηιεθζνύλ κε Sass ή πξνζαξκόδνληαο ηελ αξρηθή ιήςε ηνπ Foundation. Οη πξνγξακκαηηζηέο κπνξνύλ λα πξνζαξκόζνπλ ην αξρείν ηνπ Foundation κόλν ηνπ, επηιέγνληαο ηα ζηνηρεία πνπ ζέινπλ λα ρξεζηκνπνηήζνπλ ζην έξγν ηνπο. Οη αλαπξνζαξκνγέο είλαη δπλαηέο κέζσ ελόο θεληξηθνύ ζηπι δηακόξθσζεο. Πεξηζζόηεξν βαζηέο αιιαγέο είλαη δπλαηόλ, αιιάδνληαο ηηο κεηαβιεηέο ηνπ Sass. Η ρξήζε ηεο γιώζζαο Sass επηηξέπεη ηε ρξήζε ησλ κεηαβιεηώλ, ηηο ιεηηνπξγίεο θαη ηνπο θνξείο εθκεηάιιεπζεο, ηηο θσιηαζκέλεο επηινγέο, θαζώο θαη ηα ιεγόκελα κείγκαηα (mixins)49. Από ηελ έθδνζε 3.0, ε δηακόξθσζε ηνπ Foundation έρεη επίζεο κία εηδηθή επηινγή πξνζαξκνγήο ζηελ ηεθκεξίσζε. Δπηπιένλ, νη πξνγξακκαηηζηέο ρξεζηκνπνηνύλ κηα θόξκα γηα λα επηιέμνπλ ηα επηζπκεηά ζηνηρεία θαη λα ξπζκίζνπλ, εάλ είλαη απαξαίηεην, ηηο αμίεο ησλ δηαθόξσλ ελαιιαθηηθώλ ιύζεσλ γηα ηηο αλάγθεο ηνπο. ηε ζπλέρεηα ην παθέην πνπ δεκηνπξγείηαη πεξηιακβάλεη ήδε ην πξν-ρηηζκέλν θύιιν ζηπι ηύπνπ CSS. 3.3.4 Το framework Bootstrap Σν Bootstrap είλαη κηα δσξεάλ θαη ειεπζέξνπ ινγηζκηθνύ (open-source) ζπιινγή εξγαιείσλ γηα ηε δεκηνπξγία ηζηνζειίδσλ θαη δηαδηθηπαθώλ εθαξκνγώλ. Πεξηέρεη HTML θαη CSS κε βάζε ηα πξόηππα ζρεδηαζκνύ γηα ηελ ηππνγξαθία, ηηο κνξθέο, ηα θνπκπηά, ηηο ιεηηνπξγίεο πινήγεζεο θαη άιισλ ζηνηρείσλ ηνπ πεξηβάιινληνο, θαζώο θαη πξναηξεηηθέο επεθηάζεηο JavaScript. Έρεη σο ζηόρν λα δηεπθνιύλεη ηελ αλάπηπμε δπλακηθώλ ηζηνζειίδσλ θαη δηαδηθηπαθώλ εθαξκνγώλ. Σν Bootstrap είλαη έλα 49 Σα ζηνηρεία mixins https://en.wikipedia.org/wiki/Mixin 34 Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο εκπξόζζην πιαίζην (frond-end), δειαδή, κηα δηεπαθή γηα ηνλ ρξήζηε, ζε αληίζεζε κε ηνλ θώδηθα ηνπ δηαθνκηζηή πνπ βξίζθεηαη ζην «πίζσ κέξνο» (back-end) ή ηελ πιεπξά ηνπ δηαθνκηζηή θαη ην πξνγξακκαηηζηηθό θνκκάηη ηεο εθαξκνγήο. To Bootstrap είλαη ην πην βξαβεπκέλν, κε πάλσ από 85.000 αζηέξηα ζε ηζηηνζειίδεο πνπ ζρεηίδνληαη κε ηέηνηεο πιαηθόξκεο αλάπηπμεο δηαδηθηπαθώλ εθαξκνγώλ θαη βάζε απηνύ έρνπλ αλαπηπρζεί πάλσ από 34.000 παξόκηεο πιαηθόξκεο απν αλεμάξηεηνπο ζρεδηαζηέο θαη πξνγξακκαηηζηέο πνπ νλνκάδνληαη παξαθιάδηα. Σν Bootstrap, πνπ αξρηθά νλνκάζηεθε Twitter Blueprint, αλαπηύρζεθε από ηνλ Mark Otto θαη ν Jacob Thornton ζην Twitter σο έλα πιαίζην γηα ηελ ελζάξξπλζε ηεο ζπλέπεηαο κεηαμύ ησλ εζσηεξηθώλ εξγαιείσλ. Πξηλ ην Bootstrap, δηάθνξεο βηβιηνζήθεο ρξεζηκνπνηήζεθαλ γηα ηελ αλάπηπμε δηεπαθώλ, νη νπνίεο νδήγεζαλ ζε αζπλέπεηεο θαη πςειή θνξνινγηθή επηβάξπλζε ζπληήξεζεο. ύκθσλα κε ηνλ πξνγξακκαηηζηήο ηνπ Twitter Μαξθ Otto: " Πήξα καδί κηα πνιύ κηθξή νκάδα πξνγξακκαηηζηώλ γηα λα ζρεδηάζεη θαη λα θαηαζθεπάζεη έλα λέν εζσηεξηθό εξγαιείν θαη είδα κηα επθαηξία λα θάλνπκε θάηη πεξηζζόηεξν. Μέζσ απηήο ηεο δηαδηθαζίαο, θαηαιήμακε λα νηθνδνκήζνπκε θάηη πνιύ πην νπζηαζηηθό από θάζε άιιν εζσηεξηθό εξγαιείν. Μήλεο αξγόηεξα, θαηαιήμακε ζε κηα πξώηκε έθδνζε ηνπ Bootstrap σο έλαλ ηξόπν γηα λα θαηαγξάςνπλ θαη λα κνηξαζηνύλ θνηλά πξόηππα ζρεδηαζκνύ θαη πεξηνπζηαθώλ ζηνηρείσλ εληόο ηεο εηαηξείαο. ". Μεηά από ιίγνπο κήλεο αλάπηπμεο από κηα κηθξή νκάδα, πνιινί πξνγξακκαηηζηέο ζην Twitter άξρηζαλ λα ζπλεηζθέξνπλ ζην έξγν, σο κέξνο ηεο εβδνκάδαο Hack, κηα εβδνκάδα ζπλαγνληζκνύ πξνγξακκαηηζηώλ γηα ηελ αλάπηπμε πξσηόηππσλ εθαξκνγώλ, γηα ηελ νκάδα αλάπηπμεο ηνπ Twitter. Μεηνλνκάζηεθε από ην Twitter Blueprint ζε Bootstrap θαη θπθινθόξεζε σο έλα έξγν αλνηθηνύ πεγαίνπ θώδηθα ζηηο 19 Απγνύζηνπ ηνπ 2011. πλέρηζε λα δηαηεξείηαη από ηνλ Mark Otto, ηνλ Jacob Thornton, θαη κηα κηθξή νκάδα πξνγξακκαηηζηώλ ηνπ ππξήλα, θαζώο θαη κηα κεγάιε θνηλόηεηα ησλ ζπλεηζθεξόλησλ. ηηο 31 Ιαλνπαξίνπ ηνπ 2012, ε δεύηεξε έθδνζε ηνπ Bootstrap αλαθνηλώζεθε. Απηή ε έθδνζε πξόζζεζε ηε δηάηαμε πιέγκαηνο κε δώδεθα ζηήιεο θαη δηαδξαζηηθώλ επηκέξνπο ηκεκάησλ ηνπ ζρεδηαζκνύ, θαζώο θαη αιιαγέο ζε πνιιά από ηα ππάξρνληα ζηνηρεία. Η έθδνζε Bootstrap 3 είρε αλαθνηλσζεί νηη ζα ήηαλ πξνζβάζηκε γηα ην θνηλό ζηηο 19 Απγνύζηνπ ηνπ 2013, ε νπνία ζαλ θύξην ζπζηαηηθό είρε ηελ πξνζέγγηζε ηεο κεηάβαζεο ζε θηλεηά κέζα ρξεζηκνπνηώληαο έλα επίπεδν ζρεδηαζκό. ηηο 29 Οθησβξίνπ, ην 2014, ν Mark Otto αλαθνίλσζε νηη ε έθδνζε ηνπ Bootstrap 4 είλαη ζε εμέιημε. Η πξώηε έθδνζε alpha ηνπ Bootstrap 4 δξνκνινγήζεθε ζηηο 19 Απγνύζηνπ, 2015. Σν Bootstrap είλαη ζπκβαηό κε ηηο ηειεπηαίεο εθδόζεηο ηνπ Google Chrome, Firefox, Internet Explorer, Opera, Safari θαη δηαθόξσλ άιισλ browsers, αλ θαη νξηζκέλα από απηά ηα πξνγξάκκαηα πεξηήγεζεο δελ ππνζηεξίδνληαη ζε όιεο ηηο πιαηθόξκεο. Από ηελ έθδνζε 2.0 ππνζηεξίδεη επίζεο δηαδξαζηηθό web design. Απηό ζεκαίλεη όηη ε δηάηαμε ησλ ηζηνζειίδσλ πξνζαξκόδεηαη δπλακηθά, ιακβάλνληαο ππόςε ηα ραξαθηεξηζηηθά ηεο ζπζθεπήο πνπ ρξεζηκνπνηείηαη (ππνινγηζηέο, tablet, θηλεηό ηειέθσλν). Ξεθηλώληαο κε ηελ έθδνζε 3.0, ην Bootstrap εμέδσζε κία πην θηλεηή ζρεδηαζηηθή θηινζνθία, κε έκθαζε ζηνλ δηαδξαζηηθό ζρεδηαζκό από πξνεπηινγή. Η 35 Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ έθδνζε 4.0 έθδνζε alpha πξνζζέηεη ηελ ππνζηήξημε Sass. Οη πξνγξακκαηηζηέο ελζαξξύλνληαη λα ζπκκεηάζρνπλ ζην πξόγξακκα θαη λα θάλνπλ ηηο δηθέο ηνπο εηζθνξέο ζηελ πιαηθόξκα. Η δνκή θαη ε δηάηαμε ηνπ Bootstrap είλαη ζπνλδπισηή θαη απνηειείηαη θπξίσο από κηα ζεηξά κηθξόηεξσλ stylesheets πνπ εθαξκόδνπλ ηα δηάθνξα ζπζηαηηθά ηνπ παθέηνπ εξγαιείσλ. Έλα ζηπι πνπ νλνκάδεηαη bootstrap.less πεξηιακβάλεη ηα ζηνηρεία stylesheets. Οη πξνγξακκαηηζηέο κπνξνύλ λα πξνζαξκόζνπλ ην ίδην ην αξρείν Bootstrap, επηιέγνληαο ηα ζηνηρεία πνπ ζέινπλ λα ρξεζηκνπνηήζνπλ ζην έξγν ηνπο. Αλαπξνζαξκνγέο είλαη δπλαηέο ζε πεξηνξηζκέλν βαζκό, κέζσ ελόο θεληξηθνύ ζηπι δηακόξθσζεο. Πεξηζζόηεξν βαζηέο αιιαγέο είλαη δπλαηέο από ηηο δειώζεηο ηύπνπ LESS50. Η ρξήζε ηεο γιώζζαο LESS, πνπ είλαη κία stylesheet51 γιώζζα πξνγξακκαηηζκνύ, επηηξέπεη ηε ρξήζε ησλ κεηαβιεηώλ, ηηο ιεηηνπξγίεο θαη ηνπο θνξείο εθκεηάιιεπζεο, θσιηαζκέλεο επηινγέο, θαζώο θαη ηα ιεγόκελα mixins. Από ηελ έθδνζε 2.0, ε δηακόξθσζε ηνπ Bootstrap έρεη επίζεο κία εηδηθή επηινγή πξνζαξκνγήο ζηελ ηεθκεξίσζε, δειαδή ζηελ δεκηνπξγία θαη ζηελ αλάπηπμε ηνπ θώδηθα ηεο εθαξκνγήο. Δπηπιένλ, ν ζρεδηαζηήο ηνπ έξγνπ επηιέγεη ζε κηα θόξκα ηα επηζπκεηά ζπζηαηηθά θαη ξπζκίδεη, αλ είλαη απαξαίηεην, ηηο αμίεο ησλ δηαθόξσλ ελαιιαθηηθώλ ιύζεσλ γηα ηηο αλάγθεο ηνπο. ηελ ζπλέρεηα δεκηνπξγείηαη έλα παθέην πνπ πεξηιακβάλεη ην ήδε πξν-ρηηζκέλν θύιιν ζηπι πνπ θάλεη ρξήζε ηνπ CSS. Σν δηαζπλδεδεκέλν ζπζηήκα πιέγκαηνο (Grid system) θαη ν δηαδξαζηηθόο ζρεδηαζκόο πξνζθέξεηαη σο ζηάληαξ πξνεπηινγή κε κία επξύ δηάηαμε πιέγκαηνο ησλ 1170 pixel. Δλαιιαθηηθά, ν πξνγξακκαηηζηήο κπνξεί λα ρξεζηκνπνηήζεη κία κεηαβιεηνύ πιάηνπο δηάηαμε. Καη ζηηο δύν πεξηπηώζεηο, ε εξγαιεηνζήθε έρεη ηέζζεξηο παξαιιαγέο πνπ θάλνπλ ρξήζε ησλ δηαθόξσλ αλαιύζεσλ θαη ηύπνπο ζπζθεπώλ όπσο θηλεηά ηειέθσλα, πνξηξέηα θαη ην ηνπία, tablets θαη ππνινγηζηέο κε ρακειή θαη πςειή αλάιπζε. Κάζε αιιαγή αιιάδεη ην πιάηνο ησλ ζηειώλ. 3.3.5 Το framework Semantic UI 50 51 Η γιώζζα LESS https://en.wikipedia.org/wiki/Less_%28stylesheet_language%29 Σν ζηνηρείν stylesheet https://en.wikipedia.org/wiki/Style_sheet_%28web_development%29 36 Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο πσο πξναλαθέξζεθε, ην Bootstrap θαη ην Foundation είλαη πιαίζηα αλάπηπμεο frond-end θαη απνηεινύλ ηα πην θαιά, εύρξεζηα θαη αμηόπηζηα εξγαιεία δεκηνπξγίαο θαη αλάπηπμεο δηαδηθηπαθώλ εθαξκνγώλ ζήκεξα. Πνιιά άιια ηέηνηα ειεύζεξνπ ινγηζκηθνύ πιαίζηα έρνπλ αλαπηπρζεί από δηάθνξνπο πξνγξακκαηηζηέο θαη εηαηξίεο, αιιά απηό ην λέν δεκηνπξγίζεκν θαη αθόκα αλαπηπζόκελν πιαίζην κε θαιέο πξννπηηθέο πνπ αμίδεη λα αλαθεξζεί είλαη ην Semantic UI. Δίλαη έλα ζύγρξνλν πιαίζην front-end αλάπηπμεο, πνπ ηξνθνδνηείηαη από ηελ ηερλνινγία βηβιηνζήθεο LESS θαη απν ηελ jQuery. Έρεη κηα θνκςή, ιεπηή θαη επίπεδε εκθάληζε ελόο ζρεδηαζκνύ πνπ παξέρεη κία θαιή εκπεηξία ζηνλ ρξήζηε. ύκθσλα κε ηελ ηζηνζειίδα ηνπ Semantic UI, ν ζηόρνο ηνπ πιαηζίνπ είλαη λα ελδπλακώζεη ηνπο ζρεδηαζηέο θαη ηνπο πξνγξακκαηηζηέο " δεκηνπξγώληαο κηα γιώζζα γηα ηελ αληαιιαγή UI". Απηό γίλεηαη κε ηε ρξήζε ζεκαζηνινγηθήο, πεξηγξαθηθήο γιώζζαο γηα ηηο ηάμεηο θαη ηηο ζπκβάζεηο νλνκαζίαο. Αληί λα ρξεζηκνπνηεί ζπληνκνγξαθίεο, όπσο θάλνπλ άιια πιαίζηα, ρξεζηκνπνηεί πξαγκαηηθέο ιέμεηο κε ηξόπν πην θνληά ζηελ απιή γιώζζα, ηα αγγιηθά. Σν Semantic UI είλαη κνλαδηθό κε δύν ηξόπνπο. Πξώηα είλαη ν ηξόπνο πνπ ην πιαίζην είλαη δνκεκέλν. Υξεζηκνπνηεί πέληε πεξηγξαθηθέο θαηεγνξίεο γηα ηνλ νξηζκό επαλαρξεζηκνπνηήζηκσλ ζπζηαηηθώλ ησλ User Interface. Έλα UI ζηνηρείν είλαη έλα βαζηθό δνκηθό ζηνηρείν. Μπνξεί λα εκθαλίδνληαη κόλα ηνπο ή ζε νκάδεο. Γηα παξάδεηγκα, έλα θνπκπί κπνξεί λα είλαη αλεμάξηεην ή λα ηεζεί ζε κηα νκάδα θνπκπηώλ. Μηα ζπιινγή UI είλαη κηα νκάδα ησλ δηαθόξσλ εηδώλ ζηνηρείσλ ηα νπνία είλαη αιιειέλδεηα. Γηα παξάδεηγκα, κηα κνξθή web κπνξεί λα έρεη θνπκπηά, εηζόδνπο, πιαίζηα ειέγρνπ, εηθόλεο, θαη νύησ θαζεμήο. Μία πξνβνιή απηνύ ηνπ UI αληηπξνζσπεύεη έλα θνηλό θνκκάηη ηνπ πεξηερνκέλνπ ηεο ηζηνζειίδαο. Γηα παξάδεηγκα, έλα ηκήκα ηξνθνδνζίαο ή ζρόιηα. Μηα ελόηεηα UI είλαη έλα ζπζηαηηθό κε ηεο δηαδξαζηηθήο ιεηηνπξγηθόηεηαο πνπ βαζίδεηαη ζε JavaScript. Μηα αθόκα ιεηηνπξγία ηνπ είλαη ε ζπκπεξηθνξά ηνπ UI, πνπ είλαη έλα ζηνηρείν πνπ δελ κπνξεί λα ππάξμεη αλεμάξηεηα, αιιά αλη 'απηνύ ρξεζηκνπνηείηαη γηα λα πξνζζέζεη ιεηηνπξγηθόηεηα ζε άιια ζπζηαηηθά. ρεδόλ θάζε ζηνηρείν έρεη ηύπνπο, δειώζεηο θαη παξαιιαγέο. Γηα παξάδεηγκα, κεξηθά από ηα είδε ηνπ ζηνηρείνπ θνπκπί πεξηιακβάλνπλ: πξόηππν θνπκπί, θνπκπί κε ην εηθνλίδην, θηλνύκελα θνπκπηά θαη έλα θνπκπί κπνξεί λα είλαη ζηελ ελεξγό θαηάζηαζε, απελεξγνπνηεκέλν, ή ζε αλακνλή. Σέινο, έλα θνπκπί κπνξεί λα πνηθίιιεη ζε κέγεζνο θαη ρξώκα, θαη κπνξεί λα κνξθνπνηεζεί σο βαζηθό, ζηαζεξό, ξεπζηό θαη πεξηζζόηεξα. Σν ζύζηεκα απηό δίλεη κηα κεγάιε επειημία ζηελ εκθάληζε ελόο ζηνηρείνπ. Σν δεύηεξν κνλαδηθό ζηνηρείν ηνπ Semantic UI είλαη όηη παξέρεη θάπνηα απνθιεηζηηθά ραξαθηεξηζηηθά θαη ζπζηαηηθά πνπ δελ ππάξρνπλ ζε άιια πιαίζηα. Γηα παξάδεηγκα, ζπζηαηηθά όπσο ην ε παξάιιειε θαηαθόξεθε γξακκή εξγαιεηώλ (Sidebar) θαη ηα δηάθνξα ζρήκαηα από ηηο ελόηεηεο ηνπ UI. Δπίζεο, όηαλ αιιειεπηδξνύλ κε ηα ζπζηαηηθά ηνπ Semantic UI κπνξεί λα έρεη ζε πξαγκαηηθό ρξόλν εμόδνπ ηνλ εληνπηζκνύ ζθαικάησλ. Έλα άιιν ζεκαληηθό ζηνηρείν ηνπ Semantic UI είλαη όηη ρξεζηκνπνηεί ειάρηζην θαη νπδέηεξν ζηπι, αθήλνληαο ηα πεξηζώξηα πξνζαξκνγήο αλνηθηά. Πεξηιακβάλεη ζεκαληηθά θαη ρξήζηκα πξάγκαηα, αθήλνληαο έμσ ηα πξόζζεηα ραξαθηεξηζηηθά γλσξίζκαηα πνπ πηζαλόηαηα δε ζα ρξεζηκνπνηήζεη έλαο πξνγξακκαηηζηήο. Πιένλ, ηα 37 Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ ζπζηαηηθά ηνπ πιαηζίνπ είλαη θνξεηά θαη απηόλνκα, ώζηε λα κπνξεί ν ζρεδηαζηήο ηεο εθαξκνγήο λα πάξεη θαη λα ρξεζηκνπνηήζεη κόλν εθείλα πνπ ρξεηάδεηαη. Σέινο, ην Semantic UI είλαη έλα πνιύ θαιά ηεθκεξησκέλν πιαίζην θαη ε ηζηνζειίδα ηνπ παξέρεη πνιιά παξαδείγκαηα γηα ηηο δηαθνξεηηθέο ζπληζηώζεο. Δπηπιένλ, έρεη έλαλ νδεγό ζηπι κε ηερληθέο θαη νδεγίεο γηα ην πώο γξάθεηαη ν θώδηθαο ηνπ. Παξ όια απηά, όπσο αλαθέξζεθε, ην Semantic UI είλαη αθόκα λέν ζηνλ ρώξν ησλ πιαηζίσλ εθαξκνγώλ θαη ηεο αλάπηπμεο ηζηηνζειίδσλ θάλνληαο ην λα έρεη πεξηζώξηα βειηίσζεο θαη αλάπηπμεο γηα λα θηάζεη ζην επίπεδν πνπ είλαη ζήκεξα ηα πην γλσζηά θαη αμηόπηζηα πιαίζηα. 3.3.6 Σύγκπιζη και επιλογή επγαλείος πλαιζίος Η επηινγή εξγαιείνπ πιαηζίνπ γηα ηελ δεκηνπξγία κίαο ηζηηνζειίδαο κέζσ δηαδηθηπαθώλ εθαξκνγώλ είλαη πνιύ ζπκαληηθή θαη ν ζρεδηαζηήο ηνπ έξγνπ ζα πξέπεη λα ιάβεη ηελ ηειηθή απόθαζε ζρεηηθά κε ην αλ πξέπεη ή όρη λα ρξεζηκνπνηεζεί πιαίζην θαη πνηό ζα είλαη απηό. Σα πιαίζηα είλαη έλαο πόξνο πνπ κπνξεί λα είλαη εμαηξεηηθά ρξήζηκνο γηα πνιινύο αλζξώπνπο, αιιά απηό δελ ζεκαίλεη όηη είλαη απαξαίηεηα ρξήζηκν ζε θάζε πεξίπησζε. Σα πιενλεθηήκαηα ηεο ρξήζεο ελόο πιαηζίνπ είλαη όηη επηηαρύλεη ηελ δηαδηθαζία δεκηνπξγίαο ηεο ηζηηνζειίδαο ζε πην ζύληνκν ρξνληθό δηάζηεκα. Παξέρεη έλαλ θαζαξό, ηαθηνπνηεκέλν θαη ζπγθξνηεκέλν πξνγξακκαηηζηηθό θώδηθα. Πξνζθέξεη ιύζεηο ζε θνηλά πξνβιήκαηα ζπκβαηόηεηα ζηνπο πεξηζζόηεξνπο CSS browsers. Παξέρεη θαιύηεξε θαη γξεγνξόηεξε εθκάζεζε ησλ πξαθηηθώλ ιεηηνπξγίαο ζηελ θαηαζθεπή κηαο ηζηηνζειίδαο. Έρεη κηα εληαία δηαδηθαζία γηα ηελ επίιπζε θνηλώλ πξνβιεκάησλ πνπ θαζηζηά ηε ζπληήξεζε δηαθόξσλ έξγσλ απιή θαη εύθνιε. Καη ε ρξήζε ελόο πιαηζίνπ είλαη ρξήζηκε ζηε ζπιινγηθή εξγαζία. Σα κεηνλεθηήκαηα ηεο ρξήζεο ελόο πιαηζίνπ όηη αλακεηγλήεη ην πεξηερόκελν κε ηελ παξνπζίαζε όπνπ ζε πνιιέο πεξηπηώζεηο εάλ δελ έρεη ζρεδηαζηεί ζσζηά πξνθαιεί ζύγρπζε. Μπνξεί λα πεξηέρεη απνκεηλάξηα αρξεζηκνπνίεηνπ θώδηθα θαηαιακβάλνληαο ρώξν ζηελ κλήκε θαη θαηαλαιώλνληαο ππνινγηζηηθή πζρή ρσξίο ιόγν, πξάγκα όκσο πνπ ζπκβαίλεη κόλν ζε κεγάιεο ηζηηνζειίδεο κε πνιιέο πιεξνθνξίεο. Έρεη βξαδύηεξε θακπύιε εθκάζεζεο πνπ ζπκαίλεη νηη γηα αξράξηνπο ζρεδηζηέο θαη πξνγξακκαηηζηέο ρξεηάδεηαη πεξηζζόηεξνο ρξόλνο εμεθίσζεο κε ην αληηθείκελν πνπ ίζσο θαηαζηεί απνζαξξπληηθό. Λακβάλνληαο ππόςελ ηα ζεηηθά θαη ηα αξλεηηθά ηεο ρξήζεο ελόο πιαηζίνπ γηα ηελ δεκηνπξγία κίαο δηαδηθηπαθήο εθαξκνγήο πξνθήπηεη όηη ε βέιηηζηε επηινγή είλαη ε ρξήζε ελόο ηέηνηνπ πιαηζίνπ. Δπηιέγνληαο ην ζσζηό πιαίζην γηα κία ηζηνζειίδα δελ είλαη θαζόινπ απιό, γηα δηάθνξνπο ιόγνπο όπσο ην θάζε ηζηηνζειίδα είλαη δηαθνξεηηθή θαη ζα απαηηεί δηαθνξεηηθά ραξαθηεξηζηηθά. Υξεζηκνπνηώληαο έλα πνιύ νινθιεξσκέλν πιαίζην γηα έλα εληαίν ρώξν ηεο ζειίδαο κπνξεί λα παξέρεη ην θαηάιιειν απνηέιεζκα, αιιά ζίγνπξα ράλεη ζε πνιινύο πόξνπο. Δπίζεηο, επί ηνπ παξόληνο, δελ ππάξρνπλ πνιιέο ζεκαληηθέο δηαθνξέο ζηα πην γλσζηά πιαίζηα γηαηί 38 Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο όια απηά είλαη πνιύ νινθιεξσκέλα θαη εύθνιε ζηε ρξήζε. Ωζηόζν, πξέπεη λα ιεηθζνύλ ππόςελ θάπνηεο πιεξνθνξίεο γηα ηελ επηινγή ελόο θαηάιιεινπ πιαηζίνπ όπσο είλαη γηα παξάδεηγκα: Η ηαρύηεηα εγθαηάζηαζεο ηνπ πιαηζίνπ γηαηί κεξηθά είλαη πνιύ απιά ζηελ εγθαηάζηαζε θαη άιια απαηηνύλ πεξηζζόηεξν ρξόλν γηα λα ξπζκηζηνύλ. Η επθνιία θαηαλόεζεο γηαηη κεξηθά είλαη πεξίπινθα θαη άιια, αληίζεηα, είλαη ζπγθξηηηθά πην απιά. Οη επηινγέο πνπ πξνζθέξνληαη δηόηη κεξηθά πιαίζηα είλαη πην πεξίπινθα από ό, ηη ηα άιια θαη λα πξνζθέξνπλ πεξηζζόηεξεο επηινγέο δηακόξθσζεο θαη δηαζύλδεζεο. Η θαιύηεξε καθξνπξόζεζκε ππνζηήξημε δηόηη νξηζκέλεο ςεθηαθέο εξγαζίεο ραξαθηεξίδνληαη από έιιεηςε ζπλέρεηαο ζην ρξόλν, ζπλερώλ ελεκεξώζεσλ θαη έιιεηςε ππεξεζηώλ ππνζηήξημεο. Δίλαη πάληα θαιύηεξν λα επηιέγνληαη εθείλα πνπ πξνζθέξνπλ εγγπήζεηο ζπλερήο ππνζηήξημεο. ύκθσλα κε ηα παξαπάλσ δεδνκέλα θαη ηα θπξηόηεξα ηξία πιαίζηα πνπ πξναλαθέξζεθαλ, δειαδή ην Foundation, ην Bootstrap θαη ην Semantic UI, αθνινπζνύλ ηα θύξηα πιενλεθηήκαηα ρξήζεο ηνπο θαη ε ζύγθξηζε απηώλ γηα ηελ επηινγή ελόο πξνο ρξήζε ζηελ παξνύζα εξγαζία. Η θύξηα δύλακε ηνπ Bootstrap είλαη ηεξάζηηα δεκνηηθόηεηά ηνπ. Σερληθά, δελ είλαη απαξαηηήησο θαιύηεξν από ηα άιια πιαίζηα, αιιά πξνζθέξεη πνιύ πεξηζζόηεξνπο πόξνπο όπσο άξζξα θαη tutorials, plug-ins θαη επεθηάζεηο, δεκηνπξγνύο ζεκάησλ θαη νύησ θαζεμήο, από ό, ηη ηα άιια δύν πιαίζηα ζε ζπλδπαζκό. Σα θύξηα πιενλεθηήκαηα ηνπ είλαη: Δύθνιν ζηε ρξήζε ρξεηάδνληαο βαζηθέο γλώζεηο HTML, JavaScript θαη CSS. πκβαηό κε mobile ζπζθεπέο όπσο smartphones θαη tablets. Έπθνιε δεκηνπξγία responsive website αιιάδνληαο δειαδή ην πεξηερόκελν αλάινγα κε ην κέγεζνο ηεο νζόλεο. πκβαηόηεηα κε όινπο ηνπο ζύγρξνλνπο browsers όπσο ηνλ Google Chrome, ηνλ Firefox, ηνλ Internet Explorer, ηνλ Safari θαη ηνλ Opera. Δπειεμία ζηελ ρξήζε θαη ηελ ηξνπνπνίεζε. Έπθνιε θαη γξήγνξε εγθαηάζηαζε. Πξόζβαζε ζε κεγάιε θνηλόηεηα πνπ παξέρεη έηνηκα πξνθαηαζθεπαζκέλα ραξαθηεξηζηηθά. Καηέρεη ηελ κεγαιύηεξε δεκνηηθόηεηα θαη σο απνηέιεζκα ηελ θαιήηεξε ππνζηεξηθηηθή βνήζεηα. Σν Foundation ρξεζηκνπνηείηαη ζε πνιιέο κεγάιεο ηζηνζειίδεο ζπκπεξηιακβαλνκέλσλ ησλ Facebook, Mozilla, eBay, Yahoo, θαη National Geographic. Δίλαη έλα πξαγκαηηθά επαγγεικαηηθό πιαίζην κε ηελ ππνζηήξημε ησλ επηρεηξήζεσλ, ηελ θαηάξηηζε θαη ζπκβνπιεπηηθέο ππεξεζίεο πνπ πξνζθέξεη. Παξέρεη επίζεο πνιινύο πόξνπο γηα ηελ βνήζεηα εθκάζεζεο θαη ρξεζηκνπνηήζεο ηνπ πιαίζηνπ γξεγνξόηεξα θαη επθνιόηεξα. Σα θύξηα πιενλεθηήκαηα ηνπ είλαη: Πνιύ θαιό δηαδξαζηηθό πιέγκα πξνο ρξήζε ζε όιεο ηηο ζπζθεπέο. Απιή θαη εύθνιε δηεπαθή ηνπ ρξήζηε. Πνιύ γξήγνξν θαη απιό ζηε ρξήζε ηνπ. Απόιπηε πξνηεξαηόηεηα ρξήζεο γηα θηλεηέο ζπζθεπέο. Μεγάιε πνηθηιία εξγαιείσλ γηα ηελ δεκηνπξγία δηεπαθώλ. 39 Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ Έθνια ηξνπνπνηήζεκν κε απνηέιεζκα ηελ γξήγνξε δεκηνπξγία πξσηόηππσλ θαηλνύξγησλ ζπζηαηηθώλ. Σν Semantic UI είλαη κηα θαηλνύξηα, ζπλερώο εμειηζώκελε πξνζπάζεηα γηα ηεσ δεκηνπξγία πηό ζεκαζηνινγηθώλ ηζηνζειίδσλ. Υξεζηκνπνηεί ηηο αξρέο ηεο θπζηθήο γιώζζαο, θαζηζηώληαο έηζη ηνλ θώδηθα πην αλαγλώζηκν θαη θαηαλνεηό. Δίλαη ην πην θαηλνηόκν θαη πιήξσο εμνπιηζκέλν πιαηζίν κεηαμύ ησλ ππνινίπσλ. Η ζπλνιηθή δνκή ηνπ πιαηζίνπ θαη ησλ ζπκβάζεσλ νλνκαηνδνζίαο, όζνλ αθνξά ηελ ζαθή ινγηθή θαη ηε ζεκαζηνινγία ησλ ηάμεσλ μεπεξλά ηα ππόινηπα πιαίζηα. Σα θύξηα πιενλεθηήκαηα ηνπ είλαη: Σν πηό εύθνιν θαη απιό πιαίζην ζηελ ρξήζε ηνπ από ηα άιια δύν. κνξθε θαη θνκςή εκθάλεζε. Μεγάιε πνηθηιία ζπζηαηηθώλ, εξγαιίσλ θαη εμαξηεκάησλ. πκβαηόηεηα κε θηλεηέο ζπζθεπέο. Απιή θαη όρη ηόζν πνιύπινθε δνκή ζε ζρέζε κε ηα άιια πιαίζηα. Υξήζε ζεκαζηνινγίαο ηνπ θώδηθα δειαδή σο θπζηθή γιώζζα γηα πηό εύθνιε θαηαλόεζε θαη εθκάζεζε. Πνιύ ελεξγή θαη γξήγνξε αλάπηπμε θαη ππνζηήξημε από ηνπο θαηαζθεπαζηέο ηνπ. Με γλώκνλα ηα πξναλαθεξόκελα πιενλεθηήκαηα θαη ιεηηνπξγίεο ησλ παξαπάλσ εξγαιείσλ πιαηζίνπ θαη ηηο ζπγθξηζήο απηώλ, θαηαιύγνπκε ζηελ επηινγή ηνπ πιαηζίνπ Bootstrap πξνο ρξήζε ζηελ παξνύζα πηπρηαθή εξγαζία, πνπ ζθνπό έρεη ηε θαηαζθεύε κίαο δηαδηθηπαθήο ηζηνζειηδαο, ιόγσ ηνπ όηη ην πιαίζην Bootstrap θαιύπηεη θαιύηεξα ηηο αλάγθεο ηεο εξγαζίαο. 40 Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο Κεθάλαιο 4 Bootstrap – βαζικέρ λειηοςπγείερ και δςναηόηηηερ 4.1 Σύζηημα πλέγμαηορ (Grid System) Σν Bootstrap καο πξνζθέξεη πιέγκα κε αληαπόθξηζε δειαδή έρεη θαηαθέξεη λα ζέζεη πξνθαζνξηζκέλα κεγέζε πιέγκαηνο γηα όια ηα κεγέζε νζνλώλ. Έηζη εάλ ν ρξήζηεο αιιάμεη ην πιάηνο ε κήθνο ηνπ παξαζύξνπ ηνπ πξνγξάκκαηνο πεξηήγεζεο άξα θαη ην κέγεζνο ηνπ πιέγκαηνο ηηο ηζηνζειίδαο καο εθεί ην bootstrap θαηαθέξλεη κε ην πξνθαζνξηζκέλν ηνπ πιέγκα λα αληαπνθξίλεηαη θαη λα έρνπκε κηα νκαιή εκπεηξία πεξηήγεζεο. Σν πιέγκα ηνπ Bootstrap ρξεζηκνπνηεί 12 ζηήιεο γηα έλα κεγάιν 940 px container ρσξίο αληαπόθξηζε (non- responsive). Αλ είλαη κε αληαπόθξηζε (responsive) ην δίθηπν πξνζαξκόδεηαη ώζηε λα είλαη 724 px θαη 1170 px εμαξηώκελν από ηελ γσληά ζέαζεο ηνπ ρξήζηε. Μαο παξέρεη όιεο ηηο ιεηηνπξγίεο ελόο πιέγκαηνο ζπζηήκαηνο, όπσο nesting, offset θαη ordering. Δικόνα 6 Αναλςηική παποςζίαζη μεγεθών πλέγμαηορ 1. Offset: Δπηηξέπεη ζην ρξήζηε λα δεκηνπξγήζεη επηπιένλ ρώξν κεηαμύ ησλ ζηειώλ ζε κηα ζεηξά, ρξεζηκνπνηώληαο ηηο θιάζεηο, .large-offset-3 and .smalloffset-4. 2. Nesting: αο επηηξέπεη λα θάλεηε εκθσιεπκέλν ην πεξηερόκελό ζαο κε ην πξνεπηιεγκέλν πιέγκα έηζη κπνξείηε λα δεκηνπξγήζεηε πνιύπινθε θιίκαθα κε ηε ρξήζε έλζεησλ πιεγκάησλ. 3. Ordering: ηελ πεγή παξαγγειίαο, κπνξνύκε εύθνια λα αιιάμνπκε ηε ζεηξά ησλ πιεγκάησλ κε ρξήζε col-md-push-* θαη col-md-pull-* θιάζεσλ. 41 Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ Δικόνα 7 Αναλςηική παποςζίαζη κλάζεων Τινπνίεζε Δηθόλαο 7 ζε θώδηθα. <div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> 4.2 Δξαπηήμαηα (Components) Σν Bootstrap πξνζθέξεη πνιιά ζηνηρεία γηα ηελ αλάπηπμε ηζηνζειίδαο, ρσξίο λα πξέπεη λα γξάςεη θάπνηνο κεγάιν όγθν θώδηθα. 42 Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο 1. Dropdowns: Αλαδηπισκέλν ζύλνιν κελνύ κε ιίζηα πξαγκάησλ πνπ ελεξγνπνηείηαη κε ηελ θιάζε .dropdown κε ηελ δπλαηόηεηα λα επζπγξακκίδεηαη απηόκαηα πάλσ δεμηά ελώ κε ηελ θιάζε .dropdown-menuright επζπγξακκίδεηαη θαη ην αλαδηπισκέλν κελνύ ζηε δεμηά πιεπξά ηεο νζόλεο. Δικόνα 8 Dropdown menu Τινπνίεζε Δηθόλαο 8 ζε θώδηθα. <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" arialabelledby="dropdownMenu1"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><a href="#">Separated link</a></li> </ul> </div> 2. Button Group: πγρσλεπόκελε ζεηξά θνπκπηώλ ζε κηα εληαία γξακκή, ρξεζηκνπνηώληαο .btn θαη .btn-group θιάζεηο. Με ηελ δπλαηόηεηα λα ξπζκίζεηε ην κέγεζνο ηνπ θνπκπηνύ ρξεζηκνπνηώληαο btn-group-lg, btngroup-sm θαη btn-group-xs θιάζεσλ. Δικόνα 9 Button Group Τινπνίεζε Δηθόλαο 9 ζε θώδηθα. 43 Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ <div class="btn-group" role="group" <button type="button" default">Left</button> <button type="button" default">Middle</button> <button type="button" default">Right</button> </div> aria-label="..."> class="btn btnclass="btn btn- class="btn btn- 3. Button Dropdown: αλαπηπζζόκελν θνπκπί πνπ έρεη δεκηνπξγεζεί από ηελ btn-group θιάζε. Δικόνα 10 Button Dropdown Τινπνίεζε Δηθόλαο 10 ζε θώδηθα. <div class="btn-group"> <button type="button" class="btn btn-default dropdowntoggle" data-toggle="dropdown" aria-haspopup="true" ariaexpanded="false"> Action <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> 4. Navs: Σα navs ρξεζηκνπνηνύληαη γηα ηε δεκηνπξγία εκθώιεπκελεο πινήγεζεο από ηε κία ζειίδα ζηελ άιιε ρξεζηκνπνηώληαο .nav θιάζε. Δικόνα 11 Navs Τινπνίεζε Δηθόλαο 11 ζε θώδηθα. <ul class="nav nav-tabs"> 44 Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages</a></li> </ul> 5. Thumbnails: Σν εμάξηεκα κηθξνγξαθία πνπ ρξεζηκνπνηείηαη γηα λα δείμεη πιέγκα εηθόλσλ, βίληεν, θεηκέλνπ, θαη πνιιά άιια. Τινπνίεζε Δηθόλαο 12 ζε θώδηθα. <div class="row"> <div class="col-xs-6 col-md-3"> <a href="#" class="thumbnail"> Δικόνα 12 Thumbnails <img src="..." alt="..."> </a> </div> ... </div> 6. Progress Bars: Δπέιηθηεο γξακκέο πξνόδνπ πνπ αλαηξνθνδνηνύλ ζρεηηθά κε ηελ πξόνδν ηελ ξνήο εξγαζίαο ζαο. Δικόνα 13 Progress Bar Τινπνίεζε Δηθόλαο 13 ζε θώδηθα. <div class="progress"> 45 Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ <div class="progress-bar" role="progressbar" ariavaluenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> </div> 7. List Groups: Λίζηα κε ζύλνιν απεηθνλίζεσλ πνπ πεξηέρνπλ ζύλζεην πεξηερόκελν. Δικόνα 14 List Groups Τινπνίεζε Δηθόλαο 13 ζε θώδηθα. <ul class="list-group"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul> 8. Panel: Λίζηα κε ζύλνιν απεηθνλίζεσλ πνπ πεξηέρνπλ ζύλζεην πεξηερόκελν. Δικόνα 15 Panel Τινπνίεζε Δηθόλαο 14 ζε θώδηθα. <div class="panel panel-default"> <div class="panel-body"> Basic panel example 46 Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο </div> </div> 4.3 JavaScript Δξαπηήμαηα (JS Components) 1. Modal: Υξεζηκνπνηώληαο ην modal.js κπνξνύκε λα δεκηνπξγήζνπκε pop-up παξάζπξα. Δικόνα 16 Modal Τινπνίεζε Δηθόλαο 16 ζε θώδηθα. <div class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" datadismiss="modal" aria-label="Close"><span ariahidden="true">×</span></button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btnprimary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> 2. Collapse: Με απηό ην ζηνηρείν κπνξείηε λα αλαπηύμεηε θαη ζπκπηύμεηε 47 Δικόνα 17 Collapse Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ πεξηερόκελν. Τινπνίεζε Δηθόλαο 17 ζε θώδηθα. <a class="btn btn-primary" role="button" toggle="collapse" href="#collapseExample" expanded="false" aria-controls="collapseExample"> Link with href </a> <button class="btn btn-primary" type="button" toggle="collapse" data-target="#collapseExample" expanded="false" aria-controls="collapseExample"> Button with data-target </button> <div class="collapse" id="collapseExample"> <div class="well"> ... </div> </div> dataaria- dataaria- 3. Carousel: Υξεζηκνπνηώληαο ην carousel.js κπνξνύκε λα δεκηνπξγήζνπκε κε θσηνγξαθείο ε παλόκνην πιηθό responsive slider. Δικόνα 18 Carousel Τινπνίεζε Δηθόλαο 18 ζε θώδηθα. <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> 48 Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο <li data-target="#carousel-example-generic" slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" slide-to="1"></li> <li data-target="#carousel-example-generic" slide-to="2"></li> </ol> datadatadata- <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> ... </div> <!-- Controls --> <a class="left carousel-control" href="#carouselexample-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" ariahidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carouselexample-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" ariahidden="true"></span> <span class="sr-only">Next</span> </a> </div> 49 Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ Κεθάλαιο 5 Τπόπορ ζσεδίαζηρ και παποςζίαζη ςλοποίηζηρ ππακηικού μέποςρ 5.1 Πποεηοιμαζία ςλοποίηζηρ 5.1.1 Δπιλογή Ππογπάμμαηορ Υλοποίηζηρ Γηα λα κπνξέζνπκε λα ζρεδηάζνπκε ηελ ηζηνζειίδα καο ρξεηαδόκαζηε έλα text editor. Τπάξρνπλ πνιιέο επηινγέο ίζσο κε πνην άγλσζηα ηα Notepad++, Brackets, Sublime Text εκείο επηιέμακε ην Sublime νπνύ κπνξείηε λα ην βξείηε δσξεάλ ζην (http://www.sublimetext.com/3) θάπνηα ραξαθηεξηζηηθά ηνπ πνπ καο έθαλε λα ην επηιέμνπκε είλαη ε ζπλερείο ππνζηήξημε ηνπ, ε κεγάιε πνηθηιία ηνπ ζε plugins αιιά θαη ζε γιώζζεο δηαδηθηύνπ θαη θπζηθά ζαλ πεξηβάιινλ εξγαζίαο πνπ είλαη απιό θαη δελ θνπξάδεη. Δικόνα 19 Ππόγπαμμα Text Editor- Sublime 5.1.2 Δγκαηάζηαζη Bootstrap ηελ ηζηνζειίδα http://getbootstrap.com/ κπνξείηε λα θαηεβάζεηε δσξεάλ ην Bootstrap ζηελ έθδνζε v3.3.5. 50 Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο Δικόνα 20 Το πλαίζιο Bootstrap Αθνύ επηιέμνπκε Download Bootstrap, ζηα έγγξαθα ηνπ ππνινγηζηή καο εκθαλίδεηαη ην ζπκπηεζκέλν αξρείν bootstrap-3.3.5-dist.zip θάλνπκε απνζπκπίεζε ηνπ θαθέινπ θαη ηα πεξηερόκελα ηνπ ηα κεηαθέξνπκε ζηνλ θαθέιν ηνπ project καο. 5.1.3 Δγκαηάζηαζη Font-Awesome ηελ ηζηνζειίδα https://fortawesome.github.io/Font-Awesome/ κπνξείηε λα θαηεβάζεηε δσξεάλ ηα Font- Awesome ζηελ έθδνζε v4.4.0 νπνύ είλαη κηα βηβιηνζήθε κε vector εηθνλίδηα νπνύ κπνξείηε λα παξακεηξνπνηήζεηε κέζσ CSS. Δικόνα 21 Η βιβλιοθήκη Font Awesome Αθνύ επηιέμνπκε Download, ζηα έγγξαθα ηνπ ππνινγηζηή καο εκθαλίδεηαη ην ζπκπηεζκέλν αξρείν font-awesome-4.4.0.zip θάλνπκε απνζπκπίεζε ηνπ θαθέινπ θαη ηα πεξηερόκελα ηνπ ηα κεηαθέξνπκε θαη απηά ζηνλ θάθειν ηνπ project καο. 51 Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ 5.2 Σσεδίαζη ιζηοζελίδαρ ηόρνο είλαη ε θαηαζθεύε κίαο ηζηνζειίδαο πνπ ιεηηνπξγεί σο κία κίλη παξνπζίαζε ηνπ Bootstrap σο Framework πξνζθέξνληαο ζηνλ επηζθέπηε ηελ δπλαηόηεηα λα θαηεβάζεη ην Bootstrap θαη λα απνθηήζεη κία γεληθή ηδέα γηα ην πώο ιεηηνπξγεί έλα responsive website. Η ηζηνζειίδα απαξηήδεηαη απν κηα ζειίδα δηαηάμεο ελόο θύιινπ (single-page layout) ρσξηζκέλε ζε 4 βαζηθά ηκήκαηα θαη 2 ηκήκαηα, κία κπάξα ζην πάλσ κέξνο ηεο ηζηηνζειίδαο θαη κία ζην θάησ, ηα νπνία βξήζθνληαη ζε θάζε website. 1. Header: Παξνπζίαζε ινγνηύπνπ θαη έλα κηθξό ζιόγθαλ. 2. Features: 3 Modals ρσξηζκέλα ζε 3 θαηεγνξείο CSS, JS θαη CMP νπνύ ζπλνπηηθά καο παξνπζηάδνπλ ην ηη καο πξνθέξεη ην bootstrap πάλσ ζε css, javascript θαη components. 3. About: Κάπνηα ζιόγθαλ νπνύ ζε πξνηξέπνπλ λα επηιέμεηο ην Bootstrap σο Framework. 4. Download: Σν section νπνύ θάπνηνο κπνξεί λα θαηεβάζεη ην Bootstrap θαη λα πεηξακαηηζηεί ν ίδηνο πάλσ ζην ζπγθεθξηκέλν framework. Πιένλ κπνξνύκε λα μεθηλήζνπκε λα ζρεδηάδνπκε ηελ ηζηνζειίδα καο. Γεκηνπξγνύκε έλα λέν HTML αξρείν index.html θαη μεθηλάκε κε ηα απαξαίηεηα hyperlinks ώζηε λα ζπλδέζνπκε bootstrap, font-awesome αιιά θαη ηηο γξακκαηνζεηξάο καο κε ηελ ζειίδα καο γηα λα κπνξνύκε κεηά λα πεξάζνπκε ζην πνην πξαθηηθό θνκκάηη. Ο θώδηθαο καο είλαη παξαθάησ θαη έηζη θαηαθέξακε λα έρνπκε κηα ζειίδα πνπ πιένλ ππνζηεξίδεη ηηο παξαπάλσ ηερλνινγίεο πνπ θαηεβάζακε από ην ηληεξλέη λσξίηεξα. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>Bootstrap</title> 52 Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο <!-- Bootstrap Core CSS - Uses Bootswatch Flatly Theme: http://bootswatch.com/flatly/ --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Custom CSS --> <link href="css/boot.css" rel="stylesheet"> <!-- Custom Fonts --> <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <link href="http://fonts.googleapis.com/css?family=Montserrat:4 00,700" rel="stylesheet" type="text/css"> <link href="http://fonts.googleapis.com/css?family=Lato:400,700 ,400italic,700italic" rel="stylesheet" type="text/css"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shi v.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond .min.js"></script> <![endif]--> </head> <body> <!-- jQuery --> <script src="js/jquery.js"></script> <!-- Bootstrap Core JavaScript --> <script src="js/bootstrap.min.js"></script> 53 Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ <!-- Plugin JavaScript --> <script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryeasing/1.3/jquery.easing.min.js"></script> <script src="js/classie.js"></script> <script src="js/cbpAnimatedHeader.js"></script> <!-- Custom Theme JavaScript --> <script src="js/boot.js"></script> </body> </html> 5.2.1 Το ππώηο ημήμα ηηρ ιζηιοζελίδαρ Ξεθηλάκε κε ην πξώην ηκήκα ηηο ζειίδαο ην Navigation νπνύ πεξηιακβάλεη ηνλ ηίηιν θαη ηηο 3 ελόηεηεο καο (Features,About,Download) σο button hyperlinks. Δικόνα 22 Η πάνω μπάπα-Navigation Τινπνίεζε Δηθόλαο 22 ζε θώδηθα. <!-- Navigation --> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header page-scroll"> <button type="button" class="navbartoggle" data-toggle="collapse" data-target="#bs-examplenavbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> 54 Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#pagetop">Bootstrap</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bsexample-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li class="hidden"> <a href="#page-top"></a> </li> <li class="page-scroll"> <a href="#portfolio">Features</a> </li> <li class="page-scroll"> <a href="#about">About</a> </li> <li class="page-scroll"> <a href="#contact">Download</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> 5.2.2 Το δεύηεπο ημήμα ηηρ ιζηιοζελίδαρ 55 Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ Πξνρσξώληαο ζην δεύηεξν ηκήκα ηηο ζειίδαο ην Header νπνύ πεξηιακβάλεη ην ινγόηππν θαη έλα κηθξό ζιόγθαλ. Δικόνα 23 Το ημήμα ηηρ επικεθαλίδαρ Τινπνίεζε Δηθόλαο 23 ζε θώδηθα. <!-- Header --> <header> <div class="container"> <div class="row"> <div class="col-lg-12"> <img class="img-responsive" src="img/profile.png" alt=""> <div class="intro-text"> <span class="name">Bootstrap</span> <hr class="star-light"> <span class="skills">Designed for everyone, everywhere.</span> </div> </div> 56 Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο </div> </div> </header> 5.2.3 Το ηπίηο ημήμα ηηρ ιζηιοζελίδαρ Πξνρσξώληαο ζην ηξίην ηκήκα ηηο ζειίδαο ην Features νπνύ ερνπκε 3 Modals ρσξηζκέλα ζε CSS, JS θαη CMP θαηεγνξηα. Δικόνα 24 Το ημήμα ηων σαπακηηπιζηικών-Features Τινπνίεζε Δηθόλαο 24 ζε θώδηθα. <section id="portfolio"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2>Features</h2> <hr class="star-primary"> </div> </div> <div class="row"> <div class="col-sm-4 portfolio-item"> 57 Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal"> <div class="caption"> <div class="caption-content"> <i class="fa fa-searchplus fa-3x"></i> </div> </div> <img src="img/portfolio/css.png" class="img-responsive" alt=""> </a> </div> <div class="col-sm-4 portfolio-item"> <a href="#portfolioModal2" class="portfolio-link" data-toggle="modal"> <div class="caption"> <div class="caption-content"> <i class="fa fa-searchplus fa-3x"></i> </div> </div> <img src="img/portfolio/js.png" class="img-responsive" alt=""> </a> </div> <div class="col-sm-4 portfolio-item"> <a href="#portfolioModal5" class="portfolio-link" data-toggle="modal"> <div class="caption"> <div class="caption-content"> <i class="fa fa-searchplus fa-3x"></i> </div> 58 Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο </div> <img src="img/portfolio/cmp.png" class="img-responsive" alt=""> </a> </div> </div> </div> </section> Γηα λα νινθιεξσζεί ζσζηά ην ζπγθεθξηκέλν section θαη λα έρνπκε ην ζσζηό απνηέιεζκα όπσο ζηελ εηθόλα ηεο παξνπζίαζεο πνπ αθνινπζεί, ρξεηάδεηαη λα ζπκπιεξώζνπκε θάπνηα παξαπάλσ ζηνηρεία ζηνλ θώδηθα καο. 59 Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ Δικόνα 25 CSS Modal Τινπνίεζε Δηθόλαο 25 ζε θώδηθα (όπνπ πεξηιακβάλεη θαη ηα 3 Modals) <!-- Portfolio Modals --> <div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" ariahidden="true"> <div class="modal-content"> <div class="close-modal" datadismiss="modal"> <div class="lr"> <div class="rl"> </div> </div> 60 Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο </div> <div class="container"> <div class="row"> <div class="col-lg-8 col-lg-offset2"> <div class="modal-body"> <h2>CSS</h2> <hr class="star-primary"> <img src="img/portfolio/css.png" class="img-responsive imgcentered" alt=""> <p>Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.</p> <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button> </div> </div> </div> </div> </div> </div> <div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" ariahidden="true"> <div class="modal-content"> <div class="close-modal" datadismiss="modal"> <div class="lr"> <div class="rl"> </div> </div> </div> 61 Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ <div class="container"> <div class="row"> <div class="col-lg-8 col-lg-offset2"> <div class="modal-body"> <h2>Javascript</h2> <hr class="star-primary"> <img src="img/portfolio/js.png" class="img-responsive imgcentered" alt=""> <p>Bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one.</p> <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button> </div> </div> </div> </div> </div> </div> <div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" ariahidden="true"> <div class="modal-content"> <div class="close-modal" datadismiss="modal"> <div class="lr"> <div class="rl"> </div> </div> </div> <div class="container"> 62 Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο <div class="row"> <div class="col-lg-8 col-lg-offset2"> <div class="modal-body"> <h2>Components</h2> <hr class="star-primary"> <img src="img/portfolio/cmp.png" class="img-responsive imgcentered" alt=""> <p>Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.</p> <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button> </div> </div> </div> </div> </div> </div> 5.2.4 Το ηέηαπηο ημήμα ηηρ ιζηιοζελίδαρ Πξνρσξώληαο ζην ηέηαξην ηκήκα ηηο ζειίδαο ην About νπνύ έρνπκε θάπνηεο γεληθέο πιεξνθνξίεο γηα ην bootstrap. 63 Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ Δικόνα 26 Το ημήμα ηων γενικών πληποθοπιών-About Τινπνίεζε Δηθόλαο 26 ζε θώδηθα. <section class="success" id="about"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2>About</h2> <hr class="star-light"> </div> </div> <div class="row"> <div class="col-lg-4 col-lg-offset-2"> <p>Bootstrap the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p> </div> <div class="col-lg-4"> <p>Makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.</p> </div> </div> 64 Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο </div> </section> 5.2.5 Το πέμπηο ημήμα ηηρ ιζηιοζελίδαρ Πξνρσξώληαο ζην πέκπην ηκήκα ηηο ζειίδαο ην Download νπνύ από εδώ κπνξεί λα θαηεβάζεη θάπνηνο κέζσ ηηο ηζηoζειίδαο καο ην bootstrap. Δικόνα 27 Το ημήμα ηος Download Τινπνίεζε Δηθόλαο 27 ζε θώδηθα. <section id="download"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2>Download</h2> <hr class="star-primary"> </div> </div> <div class="row"> <div class="col-lg-8 col-lg-offset-2"> <div class="col-lg-8 col-lg-offset-2 text-center"> <a href="#" class="btn btn-lg hover"> Bootstrap 65 Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ </a> </div> </div> </div> </div> </section> 5.2.6 Το έκηο ημήμα ηηρ ιζηιοζελίδαρ Καη ηέινο πξνρσξάκε ζην έθην ηκήκα ηηο ζειίδαο ην footer νπνύ έρνπκε θάπνηεο πιεξνθνξείο γηα εκάο. Δικόνα 28 Η κάηω μπάπα-Footer Τινπνίεζε Δηθόλαο 28 ζε θώδηθα. <footer class="text-center"> <div class="footer-below"> <div class="container"> <div class="row"> <div class="col-lg-12"> Piperakis Eleftherios AM 2649 Koukounavas Konstantinos AM 2488 </div> </div> </div> </div> </footer> 5.2.7 Ολοκλήπυζη ηηρ ιζηοζελίδαρ 66 Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο Γηα λα νινθιεξσζεί πιήξσο ε ζειίδα καο ρξεηάδεηαη θαη ηνλ απαξαίηεην θώδηθα css πνπ καο δίλεη ηελ δπλαηόηεηα λα ηελ παξακεηξνπνηήζνπκε θαη ζε ζέκα αηζζεηηθήο θαηάιιεια. Γεκηνπξγνύκε έλα λέν CSS αξρείν boot.css θαη γξάθνπκε ηνλ παξαθάησ θώδηθα όπνπ πεξηιακβάλεη ηνπο δηθνύο ηνπ θαλόλεο κνξθνπνίεζεο γηα ηελ ζειίδα καο. body { overflow-x: hidden; } p { font-size: 20px; } p.small { font-size: 16px; } a, a:hover, a:focus, a:active, a.active { outline: 0; color: #18bc9c; } h1, h2, h3, h4, h5, h6 { text-transform: uppercase; font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; 67 Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ font-weight: 700; } hr.star-light, hr.star-primary { margin: 25px auto 30px; padding: 0; max-width: 250px; border: 0; border-top: solid 5px; text-align: center; } hr.star-light:after, hr.star-primary:after { content: "\f005"; display: inline-block; position: relative; top: -.8em; padding: 0 .25em; font-family: FontAwesome; font-size: 2em; } hr.star-light { border-color: #fff; } hr.star-light:after { color: #fff; background-color: #18bc9c; } hr.star-primary { border-color: #2c3e50; 68 Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο } hr.star-primary:after { color: #2c3e50; background-color: #fff; } .img-centered { margin: 0 auto; } header { text-align: center; color: #fff; background: #18bc9c; } header .container { padding-top: 100px; padding-bottom: 50px; } header img { display: block; margin: 0 auto 20px; } header .intro-text .name { display: block; text-transform: uppercase; font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 2em; font-weight: 700; } header .intro-text .skills { font-size: 1.25em; 69 Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ font-weight: 300; } @media(min-width:768px) { header .container { padding-top: 200px; padding-bottom: 100px; } header .intro-text .name { font-size: 4.75em; } header .intro-text .skills { font-size: 1.75em; } } @media(min-width:768px) { .navbar-fixed-top { padding: 25px 0; -webkit-transition: padding .3s; -moz-transition: padding .3s; transition: padding .3s; } .navbar-fixed-top .navbar-brand { font-size: 2em; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .navbar-fixed-top.navbar-shrink { padding: 10px 0; } 70 Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο .navbar-fixed-top.navbar-shrink .navbar-brand { font-size: 1.5em; } } .navbar { text-transform: uppercase; font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: 700; } .navbar a:focus { outline: 0; } .navbar .navbar-nav { letter-spacing: 1px; } .navbar .navbar-nav li a:focus { outline: 0; } .navbar-default, .navbar-inverse { border: 0; } section { padding: 100px 0; } section h2 { margin: 0; font-size: 3em; } section.success { 71 Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ color: #fff; background: #18bc9c; } section.success a, section.success a:hover, section.success a:focus, section.success a:active, section.success a.active { outline: 0; color: #2c3e50; } @media(max-width:767px) { section { padding: 75px 0; } section.first { padding-top: 75px; } } #portfolio .portfolio-item { right: 0; margin: 0 0 15px; } #portfolio .portfolio-item .portfolio-link { display: block; position: relative; margin: 0 auto; max-width: 400px; } #portfolio .portfolio-item .portfolio-link .caption { 72 Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο position: absolute; width: 100%; height: 100%; opacity: 0; background: rgba(24,188,156,.9); -webkit-transition: all ease .5s; -moz-transition: all ease .5s; transition: all ease .5s; } #portfolio .portfolio-item .portfolio-link .caption:hover { opacity: 1; } #portfolio .portfolio-item .portfolio-link .caption .caption-content { position: absolute; top: 50%; width: 100%; height: 20px; margin-top: -12px; text-align: center; font-size: 20px; color: #fff; } #portfolio .portfolio-item .portfolio-link .caption .caption-content i { margin-top: -12px; } #portfolio .portfolio-item .portfolio-link .caption .caption-content h3, #portfolio .portfolio-item .portfolio-link .caption .caption-content h4 { 73 Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ margin: 0; } #portfolio * { z-index: 2; } @media(min-width:767px) { #portfolio .portfolio-item { margin: 0 0 30px; } } .btn-outline { margin-top: 15px; border: solid 2px #fff; font-size: 20px; color: #fff; background: 0 0; transition: all .3s ease-in-out; } .btn-outline:hover, .btn-outline:focus, .btn-outline:active, .btn-outline.active { border: solid 2px #fff; color: #18bc9c; background: #fff; } .floating-label-form-group { position: relative; margin-bottom: 0; padding-bottom: .5em; 74 Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο border-bottom: 1px solid #eee; } .floating-label-form-group input, .floating-label-form-group textarea { z-index: 1; position: relative; padding-right: 0; padding-left: 0; border: 0; border-radius: 0; font-size: 1.5em; background: 0 0; box-shadow: none!important; resize: none; } .floating-label-form-group label { display: block; z-index: 0; position: relative; top: 2em; margin: 0; font-size: .85em; line-height: 1.764705882em; vertical-align: middle; vertical-align: baseline; opacity: 0; -webkit-transition: top .3s ease,opacity .3s ease; -moz-transition: top .3s ease,opacity .3s ease; -ms-transition: top .3s ease,opacity .3s ease; transition: top .3s ease,opacity .3s ease; 75 Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ } .floating-label-form-group::not(:first-child) { padding-left: 14px; border-left: 1px solid #eee; } .floating-label-form-group-with-value label { top: 0; opacity: 1; } .floating-label-form-group-with-focus label { color: #18bc9c; } form .row:first-child .floating-label-form-group { border-top: 1px solid #eee; } footer { color: #fff; } footer h3 { margin-bottom: 30px; } footer .footer-above { padding-top: 50px; background-color: #2c3e50; } footer .footer-col { margin-bottom: 50px; } footer .footer-below { padding: 25px 0; 76 Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο background-color: #233140; } .btn-social { display: inline-block; width: 50px; height: 50px; border: 2px solid #fff; border-radius: 100%; text-align: center; font-size: 20px; line-height: 45px; } .btn:focus, .btn:active, .btn.active { outline: 0; } .scroll-top { z-index: 1049; position: fixed; right: 2%; bottom: 2%; width: 50px; height: 50px; } .scroll-top .btn { width: 50px; height: 50px; border-radius: 100%; font-size: 20px; 77 Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ line-height: 28px; } .scroll-top .btn:focus { outline: 0; } .portfolio-modal .modal-content { padding: 100px 0; min-height: 100%; border: 0; border-radius: 0; text-align: center; background-clip: border-box; -webkit-box-shadow: none; box-shadow: none; } .portfolio-modal .modal-content h2 { margin: 0; font-size: 3em; } .portfolio-modal .modal-content img { margin-bottom: 30px; } .portfolio-modal .modal-content .item-details { margin: 30px 0; } .portfolio-modal .close-modal { position: absolute; top: 25px; right: 25px; width: 75px; 78 Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο height: 75px; background-color: transparent; cursor: pointer; } .portfolio-modal .close-modal:hover { opacity: .3; } .portfolio-modal .close-modal .lr { z-index: 1051; width: 1px; height: 75px; margin-left: 35px; background-color: #2c3e50; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .portfolio-modal .close-modal .lr .rl { z-index: 1052; width: 1px; height: 75px; background-color: #2c3e50; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .portfolio-modal .modal-backdrop { display: none; opacity: 0; } 79 Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ #download > div > div:nth-child(2) > div > div > .btn:hover { color: #18BC9C; } Δάλ είρε γίλεη ζσζηή παξαθνινπζήζε ηνπ παξαπάλσ νδεγνύ ζα έρνπκε σο απνηέιεζκα ηελ εηθόλα 29 πνπ αθνινπζεί. 5.3 Παποςζίαζη ςλοποίηζηρ 5.3.1 Πποβολή ηηρ ζελίδαρ ζε οθόνη ζηαθεπού ςπολογιζηή Με βάζε ηηο ιεηηνπξγείεο θαη ηηο δπλαηόηεηεο πνπ καο πξνθέξεη ην bootstrap σο framework θαη κε ηελ ζπγγξαθή ηνπ θώδηθα πνπ απαηηείηαη, πινπνηήζεθε ε ηζηνζειίδα ζηελ παξαθάησ εηθόλα. 80 Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο Δικόνα 29 Παξνπζίαζε πινπνίεζεο ηζηηνζειίδαο 81 Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ 5.3.2 Πποβολή ηηρ ζελίδαρ ζε οθόνερ κινηηών ζςζκεςών ηηο παξαθάησ εηθόλεο κπνξείηε λα δεηηε ηελ ζειίδα πσο πξνζαξκόδεηαη ζε δηάθνξεο αλαιύζεηο (iphone6, ipad, Netbook, Laptop ) θαη έηζη γίλεηαη πηό εύθνιε ε θαηαλόεζε θαη πξαθηηθά γηα ην ηη είλαη ην rensponsive layout. IPhone 6 (Αναλςζη 375x627) Δικόνα 30 Η ζελίδα ζηιρ αναλύζειρ ηος IPhone 6 82 Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο IPad (Αναλςζη 768x1024) Δικόνα 31 Η ζελίδα ζηιρ αναλύζειρ ηος IPad 83 Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ Netbook (Ανάλςζη 1024x600) Δικόνα 32 Η ζελίδα ζηιρ αναλύζειρ ηος Netbook Laptop (Ανάλςζη 1280x800) Δικόνα 33 Η ζελίδα ζηιρ αναλύζειρ ηος Laptop 84 Κνπθνπλάβαο Κσλζηαληίλνο Πηπεξάθεο Διεπζέξηνο Κεθάλαιο 6 Σςμπεπάζμαηα Η ρξήζε ηνπ δηαδηθηύνπ κέζσ ησλ θηλεηώλ ζπζθεπώλ ζπλερίδεη λα απμάλεηαη ζε δεκνηηθόηεηα θάζε ρξόλν, καιηζηα ε Cisco πξνβιέπεη όηη ε παγθόζκηα δηαθίλεζε δεδνκέλσλ κέζσ θηλεηώλ ζπζθεπώλ ζα απμεζεί ζρεδόλ 11 θνξέο κεηαμύ 2013 θαη 2018, ζπλεπώο θαη ν ηξόπνο πνπ έρνπκε δηάδξαζε κε ην ίληεξλεη. ινη πιένλ επηιέγνπκε ην θηλεηό καο, ην tablet καο θαη ζπάληα πιένλ ηνλ ζηαζεξό ππνινγηζηή γηα λα επηζθεπηνύκε ην δηαδίθηπν κε ζθνπό γηα παξάδεηγκα λα δνύκε ηα emails ή λα ελεκεξνζνύκε γηα ηα θαζεκεξηλά λέα. Δηζη αιιάδεη ζπλερώο θαη ε αλάγθε καο λα έρνπκε κηα δηαδξαζηηθή, εύθνιε θαη γξήγνξε πεξηήγεζε. πλεπσο ε θαηαζθεπή ελόο δηαδξαζηηθνύ ηζηόηνπνπ/εθαξκνγήο γίλεηαη νινέλα θαη πηό ζεκαληηθή θαη ίζσο πιένλ κνλόδξνκνο. Mԑ ηƞv παξoύζα πηπρηαθή επηηπγράλζεθε o αξρηθό ζηόρνο δƞιαδή ƞ κειέηε ησλ θαηάιιεισλ ηερλνινγηώλ θαη ηελ ζρεδίαζε θαη πινπνίεζε κίαο δηεπαθήο ρξήζηε κε ζθνπό ηε βέιηηζηε παξνπζίαζε ησλ δηαδηθηπαθώλ εθαξκνγώλ. Γίλνληαο ηελ δπλαηόηεηα ζε θάπνηνλ πνπ δέλ γλσξίδεη, πιένλ λα κπνξεί λα θάλεη έζησ κηα θαιή αξρή ζηελ εθκάζεζε θαη νηθηνπνίεζε ζε απηόλ ηνλ ηνκέα, όζνλ αθνξά ηνπιάρηζηνλ ην frond-end θνκκάηη ηνπ ηζηόηνπνπ πνπ κειεηήζεθε εδώ θαη έκπξαθηα. Μάιηζηα κε ηελ πινπνίεζε πνπ έγηλε ζην θεθάιαην 4 θαη 5, αμηνπνηήζεθαλ επαξθώο νη δηαδηθηπαθέο ηερλνινγίεο πνπ παξνπζηάζηεθαλ ζε απηή ηελ πηπρηαθή θαη θαηαθέξακε λα έρνπκε έλα άθξσο επαγγεικαηηθό απνηέιεζκαηα πνπ κπνξεί λα αληαπνθξηζεί ζηηο απαηηήζεηο ηηο επνρήο, κηάο θαη ην ίληεξλεη θαη όηη ερεη ζρέζε κε απηό εμειίζεηαη θαζεκεξηλά. 85 Μειέηε, ζρεδίαζε θαη πινπνίεζε δηεπαθώλ ρξήζηε γηα ηε βέιηηζηε παξνπζίαζε δηαδηθηπαθώλ εθαξκνγώλ Κεθάλαιο 7 Βιβλιογπαθία Βιβλία και papers 1. 2. 3. 4. 5. 6. 7. 8. Castro, E., & Hyslop, B. (2011). HTML 5 και CSS 3 με εικόνερ. Κιεηδάξηζκνο. Spurlock, J. (2013). Bootstrap-Responsive Web Development. O'Reilly Media. Meloni, J. C. (2013). Μάθεηε HTML 5, CSS και JavaSript. Γθηνύξδαο Μ. Overson, J., & Strimpel, J. (2013). Developing Web Components. O'Reilly Media, Inc. Aravind, S., & Ulrich, S. (2014). Learning Bootstrap. PACKT. Pollock, J. (2013). Οδηγόρ ηηρ JavaScript. Ιαλόο. ηαζηλόπνπινο, Γ. (2007). Γιαδίκηςο και εθαπμογέρ. Δζληθό Μεηζόβην Πνιπηερλείν. Καδνιέα, Ι. (2013). Ππογπαμμαηιζμόρ Γιεπαθών Φοπηηών Σςζκεςών. Αξηζηνηέιεην Παλεπηζηήκην Θεζζαινλίθεο. Γιαδικηςακέρ Πήγερ 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. http://www.acunetix.com/websitesecurity/web-applications/ http://searchsoa.techtarget.com/definition/user-interface https://msdn.microsoft.com/en-us/library/aa468595.aspx http://www.smashingmagazine.com/2014/02/19/responsive-designframeworks-just-because-you-can-should-you/ http://blog.teamtreehouse.com/a-look-at-responsive-css-frameworks http://www.cssauthor.com/css-frameworks/ http://www.awwwards.com/what-are-frameworks-22-best-responsive-cssframeworks-for-web-design.html http://webdesignlike.com/2015/best-free-responsive-html5-frameworks/ http://www.sitepoint.com/5-most-popular-frontend-frameworks-compared/ http://designmodo.com/responsive-css-grid-frameworks/ http://www.evolllution.com/distance_online_learning/shifting-to-responsiveweb-design/ https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework) http://getbootstrap.com/about/ https://www.ostraining.com/blog/coding/bootstrap/ http://bootstrapbay.com/blog/what-is-bootstrap/ http://www.smashingmagazine.com/usability-and-user-experience/ https://www.ugurus.com/responsive-design-framework https://www.prestashop.com/blog/en/why-bootstrap-has-matched-the-hype/ 86