(development of a website for the agia marina foundation...

61
1 ΤΕΧΝΟΛΟΓΙΚΟ ΕΚΠΑΙΔΕΥΤΙΚΟ ΙΔΡΥΜΑ ΚΑΒΑΛΑΣ ΣΧΟΛΗ ΔΙΟΙΚΗΣΗΣ ΚΑΙ ΟΙΚΟΝΟΜΙΑΣ ΤΜΗΜΑ ΛΟΓΙΣΤΙΚΗΣ Θέμα πτυχιακής εργασίας: Δημιουργία διαδικτυακής ιστοσελίδας για το ίδρυμα «Αγία Μαρίνα» με χρήση του συστήματος διαχείρισης περιεχομένου Joomla . (Development of a website for the "Agia Marina" foundation using the Joomla content management system) Υποβληθείσα στον Καθηγητή : Ιωάννη Καζανίδη Από τον Σπουδαστή : Ευάγγελο Γκούλιο (Φιλαδελφείας 130 ,38445 ΒΟΛΟΣ ) Ημερομηνία Ανάληψης : 09/01/2012 Ημερομηνία Παράδοσης : Σεπτέμβριος Καβάλα 2012

Upload: others

Post on 20-Jul-2020

2 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

1

ΤΕΧΝΟΛΟΓΙΚΟ ΕΚΠΑΙΔΕΥΤΙΚΟ ΙΔΡΥΜΑ ΚΑΒΑΛΑΣ

ΣΧΟΛΗ ΔΙΟΙΚΗΣΗΣ ΚΑΙ ΟΙΚΟΝΟΜΙΑΣ

ΤΜΗΜΑ ΛΟΓΙΣΤΙΚΗΣ

Θέμα πτυχιακής εργασίας: Δημιουργία διαδικτυακής ιστοσελίδας για το

ίδρυμα «Αγία Μαρίνα» με χρήση του συστήματος διαχείρισης

περιεχομένου Joomla . (Development of a website for the "Agia

Marina" foundation using the Joomla content management system)

Υποβληθείσα στον Καθηγητή :

Ιωάννη Καζανίδη

Από τον Σπουδαστή :

Ευάγγελο Γκούλιο (Φιλαδελφείας 130 ,38445 ΒΟΛΟΣ )

Ημερομηνία Ανάληψης : 09/01/2012

Ημερομηνία Παράδοσης :

Σεπτέμβριος Καβάλα 2012

Page 2: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

2

Πινάκας Περιεχομένων

Πρόλογος ............................................................................................................................4

Πίνακας Εικόνων.................................................................................................................5

Κεφάλαιο 1 Εισαγωγή

1.1 Ιντερνέτ..........................................................................................................................6

1.2 Σκοπός Πτυχιακής Εργασίας ........................................................................................7

1.3 Φιλανθρωπικοί Οργανισμοί ..........................................................................................7

1.3.1 Γραμμή Ζωής ……………………………...……………………………………8

1.3.2 Άγιος Νικόλαος………………………………………………………………….8

1.3.3 Ανοιχτή Αγκαλιά………………………………………………………………..9

1.3.4 Μαζί Για Το Παιδί ………………….…………………………………………10

1.3.5 Το Χαμόγελο Του Παιδιού…………………………………………………….11

1.3.6 Unicef ……………………………………….…………………………………12

1.4 Ανάγκη Προβολής Έργου Αγίας Μαρίνας.................................................................17

Κεφάλαιο 2 Τεχνολογίες και εργαλεία ανάπτυξης

2.1 Joomla .........................................................................................................................19

2.1.1 Χαρακτηριστικά του Joomla .............................................................................20

2.1.2 Δομή του Joomla ..............................................................................................21

2.1.3 Δυνατότητες Joomla …………….……………………………………………22

2.2 Drupal .........................................................................................................................23

2.3 Php ..............................................................................................................................24

2.4 MySQL .......................................................................................................................24

2.5 Δικτυακός εξυπηρετητής(Web Server) ......................................................................25

2.5.1 Apache Web Server ..........................................................................................26

2.6 Ελεύθερο Λογισμικό...................................................................................................26

2.7 Domain Name .............................................................................................................27

2.8 Στατικές Σελίδες .........................................................................................................28

2.9 Δυναμικές Σελίδες ......................................................................................................28

2.10 HTML .......................................................................................................................29

2.11 World Wide Web ......................................................................................................29

Κεφάλαιο 3 Σχεδίαση Ιστοσελίδας

3.1 Εγκατάσταση του XAMPP ..................................................................... ...................31

3.1.1 Δημιουργία ΒάσηςΔεδομένων....................................................... ...................35

3.2 Εγκατάσταση του Joomla ...........................................................................................36

3.3 Διαχείριση περιεχομένου Joomla ................................................................................42

3.3.1 Εγκατάσταση Προτύπου ...................................................................................43

3.4 Άρθρα ..........................................................................................................................44

3.4.1 Δημιουργία Άρθρου ...........................................................................................44

3.4.2 Προσθήκη Φωτογραφιών σε Άρθρο...................................................................45

3.5 Μενού .........................................................................................................................46

3.5.1 Δημιουργία Μενού ............................................................................................ 46

3.5.2 Αντιστοίχηση Μενού – Άρθρου ……………………………………………….47

3.6 Module Manager ....................................................................................................... .50

Κεφάλαιο 4 Μεταφορά Εγκατάστασης Από Τοπικό Σε Απομακρυσμένο Server

4.1 Configuration php .......................................................................................................54

Page 3: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

3

4.2 Αντιγραφή Αρχείων ....................................................................................................56

4.3 Export-Import MySql ..................................................................................................57

4.4 Κατοχύρωση Ονόματος Ιστοσελίδας .........................................................................58

4.4.1 Μεταφορά Ονόματος Ιστοσελίδας ....................................................................58

Βιβλιογραφία ....................................................................................................................60

Page 4: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

4

Πρόλογος

Η συγκεκριμένη πτυχιακή στοχεύει στην ανάπτυξη μιας Ιστοσελίδας που θα βοηθήσει

ένα Ίδρυμα να γίνει κοινά γνωστό στην περιοχή της Καβάλας και όχι μόνο .Κάθε Μέλος

του οργανισμού θα μπορεί να δημοσιεύει τα πολιτιστικά νέα ,καθώς και διάφορες

εκδηλώσεις με σκοπό την άμεση ενημέρωση των ενδιαφερόντων .Θα παρουσιάσουμε

ένα χαρακτηριστικό εργαλείο αυτής της κατηγορίας, το Σύστημα διαχείρισης

Περιεχομένου Joomla.

Θα επεξηγήσουμε τι ακριβώς είναι αυτό το εργαλείο, θα παρουσιάσουμε ένα οδηγό

εγκατάστασης, και τις βασικές λειτουργίες του Τέλος, , θα παρουσιάσουμε βήμα προς

βήμα τη διαδικασία δημιουργίας του ιστόχωρου και πως μπορεί αυτό να χρησιμοποιηθεί.

Σημαντικό ρόλο στην επίτευξη αυτής της πτυχιακής ήταν οι σημειώσεις του μαθήματος

‘Πληροφοριακά Συστήματα’ της σχολής μου, καθώς και οι καθηγητές που είχαν

φροντίσει να γίνει μια πολύ καλή ανάλυση των εργαλείων του Joomla .

Page 5: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

5

ΠΙΝΑΚΑΣ ΕΙΚΟΝΩΝ 1.1 Ιστοσελίδα Γραμμή Ζωής …………………………………………………………….8

1.2 Ιστοσελίδα Άγιος Νικόλαος …………………………………………………………..9

1.3 Ιστοσελίδα Ανοιχτή Αγκαλιά …………………………………………………….…10

1.4 Ιστοσελίδα Μαζί Για Το Παιδί ……………………………………………..……….11

1.5 Ιστοσελίδα Το Χαμόγελο Του Παιδιού……………………………………..……….12

1.6 Ιστοσελίδα UNICEF ………………………………………….………………….….13

1.7 Πρώτο Δοκιμαστικό Πρότυπο ……………………………….……………………..15

1.8 Δεύτερο Δοκιμαστικό Πρότυπο …………………………………………………….16

1.9 Τρίτο Δοκιμαστικό Πρότυπο ……………………………………………………….17

3.1 Εύρεση XAMPP στο Διαδίκτυο ……………………………….……………………31

3.2 Όνομα Αρχείου XAMPP ……………………………………………………………32

3.3 Επιλογή Γλώσσας Εγκατάστασης XAMPP …………………………………………32

3.4 XAMPP 1.7.4 Setup – Next …………………………………………….…………..33

3.5 XAMPP 1.7.4 Setup – Browser ………………………………………….…………33

3.6 XAMPP 1.7.4 Τελευταίο Βήμα Πριν την Τελική Εγκατάσταση ………….………..35

3.7 Διεπαφή του XAMPP Control Panel ……………………………………….……….35

3.8 Βάση Δεδομένων PhpMyAdmin ……………………………………………………36

3.9 Επιλογή Γλώσσας Εγκατάστασης Κειμένου Joomla ……………………………….37

3.10 Προληπτικός Έλεγχος Εγκατάστασης Joomla …………………………………….37

3.11 Όροι Άδειας Χρήσης Εγκατάστασης ………………………………………………38

3.12 Εισαγωγή Ρυθμίσεων Βάσης Δεδομένων Εγκατάστασης Joomla …………………39

3.13 Εισαγωγή Ρυθμίσεων FTP Εγκατάστασης Joomla ……………………………..…40

3.14 Εισαγωγή Βασικών Ρυθμίσεων Ιστοτόπου Εγκατάστασης Joomla ……………….41

3.15 Τελευταίο Στάδιο Εγκατάστασης Joomla ………………………………………….42

3.16 Login Joomla……………………………………………………………………… 42

3.17 Κεντρικές Επιλογές Διαχείρισης Joomla ………………………………………….43

3.18 Εγκατάσταση Προτύπου Joomla …………………………………………………..44

3.19 Δημιουργία Άρθρου ……………………………………………………..…………45

3.20 Αποθήκευση Φωτογραφιών στο Joomla ………………………………..…………46

3.21 Δημιουργία Νέου Μενού ………………………………………………….……….47

3.22 Διαχείριση Προεπιλεγμένων Μενού Joomla ………………...…………………….48

3.23 Λίστα Υπό Μενού – Top Menu ………………………………..………………….49

3.24 Ενσωμάτωση Άρθρου σε Μενού ………………………………..…………………50

3.25 Θέσεις Μενού Ιστοσελίδας ……………………………………...…………………51

3.26 Αναζητήσεις Μενού στο Module Manager …………………….….………………52

3.27 Επιλογή Position Μενού ………………………………………….…..……………52

4.1 Αλλαγή Παραμέτρων Configuration.php ………………………………..…………55

4.2 Μεταφορά Αρχείων Μέσω FileZilla ………………………………………..……….56

4.3 Εξαγωγή Τοπικής Βάσης Δεδομένων ………………………………………….……57

4.4 Εισαγωγή Τοπικής Βάσης Δεδομένων σε απομακρυσμένο σέρβερ ………….…….58

4.5 Μεταφορά Ονομάτων στην Ιστοσελίδα ……………………………………….…….59

Πίνακες 1.1 Σύγκριση Στοιχείων από Φιλανθρωπικές Ιστοσελίδες …………………………...…14

Page 6: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

6

ΚΕΦΑΛΑΙΟ 1 ΕΙΣΑΓΩΓΗ

1.1 ΙΝΤΕΡΝΕΤ

Το Internet είναι ένα πλέγμα από εκατομμύρια διασυνδεδεμένους υπολογιστές που

εκτείνεται σχεδόν σε κάθε γωνιά του πλανήτη και παρέχει τις υπηρεσίες του σε

εκατομμύρια χρήστες.

Αποτελεί ένα “Παγκόσμιο Ηλεκτρονικό Χωριό”, οι “κάτοικοι” του οποίου, ανεξάρτητα

από υπηκοότητα, ηλικία, θρήσκευμα και χρώμα, μοιράζονται πληροφορίες και

ανταλλάσσουν ελεύθερα απόψεις πέρα από γεωγραφικά και κοινωνικά σύνορα.

Σύμφωνα με τις σχετικές εκτιμήσεις, αυτός ο παγκόσμιος ιστός υπολογιστών και

χρηστών αριθμεί σήμερα πάνω από δέκα εκατομμύρια υπολογιστές και εκατό

εκατομμύρια χρήστες, ενώ επεκτείνεται διαρκώς με εκθετικούς ρυθμούς. Αναμένεται ότι

το 2000 το Internet θα εξυπηρετεί περισσότερους από ένα δισεκατομμύριο χρήστες.

Το Διαδίκτυο ή Ίντερνετ είναι ένα επικοινωνιακό δίκτυο , που επιτρέπει την ανταλλαγή

δεδομένων μεταξύ οποιουδήποτε διασυνδεδεμένου υπολογιστή. Η τεχνολογία του είναι

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

τεχνολογικά πρωτόκολλα. Στην πιο εξειδικευμένη και περισσότερο χρησιμοποιούμενη

μορφή του, με τους όρους Διαδίκτυο, (με κεφαλαίο το αρχικό γράμμα) περιγράφεται το

παγκόσμιο πλέγμα διασυνδεδεμένων υπολογιστών και των υπηρεσιών και πληροφοριών

που παρέχει στους χρήστες του. Το Διαδίκτυο χρησιμοποιεί [μεταγωγή πακέτων] και τη

[στοίβα πρωτοκόλλων] Σήμερα, ο όρος Διαδίκτυο κατέληξε να αναφέρεται στο

παγκόσμιο αυτό δίκτυο. Για να ξεχωρίζει, το παγκόσμιο αυτό δίκτυο γράφεται με

κεφαλαίο το αρχικό "Δ". Η τεχνική της διασύνδεσης δικτύων μέσω μεταγωγής πακέτων

και της στοίβας πρωτοκόλλων ονομάζεται [Διαδικτύωση].

Σύμφωνα με την προσέγγιση της ιντερνετοφιλίας (ένα μείγμα κλασικής πλουραλιστικής

προσέγγισης και τεχνολογικού ντετερμινισμού), το Διαδίκτυο, αλλά και η ψηφιακή

τεχνολογία γενικότερα, έχουν την ικανότητα να δημιουργούν εικονικούς "χώρους",

εικονικές "κοινότητες", όπου παύουν να υφίστανται οι κοινωνικές και πολιτιστικές

διαχωριστικές γραμμές που υπάρχουν στον πραγματικό κόσμο και που τα παραδοσιακά

μέσα επικοινωνίας αδυνατούν να ξεπεράσουν εύκολα . Η επικοινωνία μέσω του

Διαδικτύου γίνεται άμεση και αμφίδρομη. Δίνεται η δυνατότητα σε κάθε χρήστη

ηλεκτρονικού υπολογιστή συνδεδεμένου στο Διαδίκτυο να πληροφορηθεί αλλά και να

πληροφορήσει ανταλλάσσοντας απόψεις μέσω ενός συμμετοχικότερου και λιγότερο

ελεγχόμενου διαύλου επικοινωνίας. Οι χρήστες αποκτούν ολοένα και περισσότερο την

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

του Διαδικτύου, να θεωρείται ένα άκρως δημοκρατικό μέσο μαζικής επικοινωνίας, το

οποίο αποδιαμεσολαβεί την επικοινωνία και καθιστά ισχυρότερο τον μέσο άνθρωπο,

καθώς δίνει στον τελευταίο τη δυνατότητα πρόσβασης σε μεγάλο όγκο πληροφοριών

συγκεντρωμένων σε ένα "χώρο" και την δυνατότητα της προσωπικής επιλογής των

πληροφοριών αυτών. Συνεπώς, η βασική θέση της προσέγγισης αυτής είναι ότι το

Page 7: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

7

Διαδίκτυο θα εκδημοκρατίσει την κοινωνία με το να βελτιώσει την επικοινωνία

καταργώντας την ανάγκη για διαμεσολάβηση.

1.2 ΣΚΟΠΟΣ ΠΤΥΧΙΑΚΗΣ ΕΡΓΑΣΙΑΣ

Βασικότερος σκοπός της δημιουργίας Ιστοσελίδας για το ίδρυμα Αγία Μαρίνα που

βρίσκεται στην Καβάλα είναι να γίνει γνωστό πως υπάρχουν άνθρωποι που χρειάζονται

την βοήθεια μας, εμείς θα πρέπει να ενημερωθούμε και να είμαστε εκεί για να τους

στηρίξουμε στην προσπάθεια τους αυτή για να μην δείχνουν διαφορετικοί .

Οργανισμοί οι οποίοι έχουν ελάχιστη βοήθεια από το κράτος και χρειάζονται την

βοήθεια των απλών ανθρώπων που μπορούν να βοηθήσουν σε αυτό το έργο (φροντίδα

,εκπαίδευση παιδιών).

1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ ΟΡΓΑΝΙΣΜΟΙ

Για να είναι φιλανθρωπικός, ένας οργανισμός πρέπει να ιδρυθεί και να λειτουργεί για

ανιδιοτελείς σκοπούς που ο νόμος τους θεωρεί φιλανθρωπικούς.

Τα χαρακτηριστικά στοιχεία ενός φιλανθρωπικού οργανισμού είναι:

είναι μη κερδοσκοπικός

είναι μια οντότητα που είναι ταμείο αρωγής υπέρ τρίτων (καταπίστευμα) ή

ίδρυμα

υπάρχει για το δημόσιο όφελος ή για την ανακούφιση της φτώχιας

οι σκοποί του είναι φιλανθρωπικοί εντός της νομικής έννοιας του όρου αυτού, και

ο αποκλειστικός σκοπός του είναι φιλανθρωπικός.

(http://www.ato.gov.au/corporate/PrintFriendly.aspx?ms=corporate&doc=/content/00274

017.html ).

Παρακάτω υπάρχουν μερικές ιστοσελίδες από κάποιους γνωστούς φιλανθρωπικούς

οργανισμούς, από όπου πάρθηκαν ιδέες προκειμένου να αποφασιστεί πως θα γίνει ηη

διαμόρφωση της συγκεκριμένης ιστοσελίδας, μερικές από αυτές είναι :

Page 8: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

8

1.3.1 Γραμμή Ζωής. Κοινωφελές μη κερδοσκοπικό σωματείο τηλεειδοποίησης και

βοήθειας στο σπίτι που δραστηριοποιείται κυρίως στη παροχή φροντίδας, προστασίας

και ασφάλειας προς τους ηλικιωμένους. Ιστοσελίδα : http://www.lifelinehellas.gr/ .

Εικόνα 1.1 Ιστοσελίδα Γραμμή ζωής

Στη διεπαφή της ιστοσελίδας επικρατεί το λευκό χρώμα ενώ υπάρχει λυτή σχεδίαση.

Όπως παρατηρούμε η ιστοσελίδα δομείται σε 4 κύρια μέρη. Στο πάνω μέρος

εμφανίζονται το λογότυπο του σωματείου ενώ ακριβώς από κάτω εμφανίζεται ένα

οριζόντιο μενού με τις κύριες επιλογές της ιστοσελίδα αλλά και κάποια διαφημηστικά

banners σχετικά με το θέμα της ιστοσελίδας.

Στο κύριο μέρος της ιστοσελίδας που βρίσκεται στο κέντρο εμφανίζεται το

πληροφοριακό υλικό ενώ παρατηρούμε ότι υπάρχει και διασύνδεση με τα κοινωνικά

δίλτυα.

Αριστερά υπάρχουν κάποια διαφημιστικά banners ενώ δεξιά εμφανίζονται τα νέα της

ιστοσελίδας και οι χορηγοί.

1.3.2 Άγιος Νικόλαος, Σύλλογος Γονέων, Κηδεμόνων και Φίλων Αυτιστικών

Ατόμων. Ο Συλλογος ιδρυθηκε το 2001 απο γονεις, κηδεμονες και φιλους ατομων με

αυτισμο. Ειναι φιλανθρωπικο μη κερδοσκοπικο σωματειο και εχει σκοπο τη λειτουργια

οικοτροφειου για ατομα με αυτισμο τα οποια προερχονται απο οικογενειες

Page 9: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

9

παραπληγικων, τυφλων, καρκινοπαθων και άπορων. Το οικοτροφειο ειναι το πρωτο στην

Ελλαδα για ατομα με Αυτισμο και παρεχει εκπαιδευση, θεραπεια και φροντιδα.

Ιστοσελίδα : www.autistika.gr /

Εικόνα 1.2 Ιστοσελίδα Άγιος Νικόλαος

Επίσης Λυτή σχεδίαση και για την Ιστοσελίδα του Αγίου Νικολάου .Κυρίαρχο χρώμα

είναι το μπλέ και το άσπρο .Η σελίδα αποτελείται από 3 μέρη :το κύριο μενού το οποίο

βρίσκεται στο πάνω μέρος της σελίδας, το υπό μενού στα αριστερά με μπλε φόντο και το

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

Στο κεντρικό μέρος βρίσκεται το πληροφοριακό υλικό .

Πάνω δεξιά εμφανίζεται η φόρμα Search .Δεν υπάρχουν banners στη συγκεκριμένη

ιστοσελίδα .

1.3.3 Ανοιχτή Αγκαλιά, των Φίλων Κοινωνικής Παιδιατρικής είναι ένα Μη

Κερδοσκοπικό Σωματείο ιδιωτικού δικαίου, με έδρα της στο Νοσοκομείο Παίδων Π. &

Α.Κυριακου, που δημιουργηθηκε στην Αθηνα το 1994 απο μια ομαδα εθελοντων, με

βασικο στοχο τη στηριξη με καθε τροπο του παιδιου που νοσηλευεται σε νοσοκομειο.

Ιστοσελίδα : www.fkpanoixtiagalia.gr .

Page 10: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

10

Εικόνα 1.3 Ιστοσελίδα Ανοιχτή Αγκαλιά

Η συγκεκριμένη ιστοσελίδα έχει ένα περίεργο χρώμα (μπεζ άσπρο) .πάνω στην κορυφή

της ιστοσελίδας φαίνονται εικόνες σχετικά με τον οργανισμό .Παρακάτω εμφανίζεται το

λογότυπο .

Στο αριστερό μέρος εμφανίζεται το μενού με τα υπό μενού τα οποία χαρακτηρίζονται με

μπλε γράμματα και πορτοκαλί πλαίσια .

Τα νέα της σελίδας ,ανακοινώσεις και οποιαδήποτε σχετική πληροφορία με αυτή

εμφανίζεται στο κέντρο της ιστοσελίδας .

1.3.4 ΜΑΖΙ ΓΙΑ ΤΟ ΠΑΙΔΙ. Είναι ένας Όμιλος 10 φιλανθρωπικών μη κερδοσκοπικών

σωματείων και εταιρειών με αντικείμενο την υποστήριξη παιδιών που αντιμετωπίζουν

σοβαρά ψυχικά, σωματικά και κοινωνικά προβλήματα. Ο σκοπός του συνίσταται στην

οργανωμένη προβολή των δραστηριοτήτων τους μέσα από κοινές δράσεις. Ιστοσελίδα :

www.mazigiatopaidi.gr .

Page 11: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

11

Εικόνα 1.4 Ιστοσελίδα Μαζί Για Το Παιδί

Χαρούμενο πρότυπο με σύννεφα το χαρακτηριστικό background της συγκεκριμένης

ιστοσελίδας, κυριαρχεί το γαλάζιο χρώμα. Πάνω αριστερά φαίνεται το λογότυπο του

οργανισμού .Πάνω δεξιά υπάρχει κοινοποίηση κοινωνικών δικτυακών τόπων ,twitter

.Ακριβώς κάτω βρίσκεται το Μενού ,ενώ παρακάτω βλέπουμε banners υποστήριξης

παρόμοιων σελίδων .Παρακάτω αριστερά βρίσκετε το κείμενο (ανακοινώσεις, νέα κοκ)

και δεξιά τους φωτογραφίες και βίντεο σχετικά με αυτά .

1.3.5 Το χαμόγελο του παιδιού. Αναγνωρισμένο μη κερδοσκοπικό νομικό πρόσωπο

ιδιωτικού δικαίου που προσφέρει κοινωφελές έργο από το 1995. Σκοπός του συλλόγου

είναι η παροχή φροντίδας και προστασίας σε όλα τα παιδιά της Ελλάδας, χωρίς άμεσες ή

έμμεσες διακρίσεις κοινωνικού αποκλεισμού. Ιστοσελίδα : www.hamogelo.gr

Page 12: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

12

Εικόνα 1.5 Ιστοσελίδα Το Χαμόγελο Του Παιδιού

Στη διεπαφή της σελίδας επικρατούν απλά χρώματα όπως το άσπρο αλλά και ένα

ουράνιο τόξο .Σύνδεσμοι κοινοποιήσεων βρίσκονται πάνω αριστερά ,ύστερα ακολουθεί

το κύριο μενού .Στο πάνω μέρος και αριστερά υπάρχουν διάφορα διαφημιστικά banners

καθώς και μια μηχανή αναζήτησης .

Στο κέντρο της σελίδας υπάρχουν τα «Νέα & Εκδηλώσεις» .Δεξιά αυτών βίντεο και

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

συγκεκριμένη ιστοσελίδα αποτελείται από 4 μέρη: λογότυπο, διαφημιστικά banners,

Κύριο Μενού και πληροφοριακό κείμενο .

1.3.6 UNICEF. H Ελληνική Επιτροπή Συνεργασίας με τη UNICEF λειτουργεί υπό την

εποπτεία των Υπουργείων Εξωτερικών και Υγείας, με σκοπό την πρόκληση

ενδιαφέροντος, την ευαισθητοποίηση και τη διάδοση των σκοπών της UNICEF.

www.unicef.gr .

Page 13: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

13

Εικόνα 1.6 Ιστοσελίδα Unicef

Στη διεπαφή της ιστοσελίδας επικρατεί το μπλε χρώμα και στο κέντρο φαίνεται η κύρια

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

Στο αριστερό μέρος υπάρχει το κύριο μενού .Τα διαφημιστικά banners βρίσκονται κάτω

και δεξιά παρακάτω από την εικόνα που βλέπουμε .Τέρμα δεξιά υπάρχει σύνδεσμος

κοινοποίησης μέσω κοινωνικών δικτύων (όπως facebook) .

Στο κεντρικό μέρος υπάρχουν οι φωτογραφίες και το πληροφοριακό κείμενο .

Οι παραπάνω εικόνες αντιστοιχούν σε 6 από τις πιο γνωστές σελίδες φιλανθρωπικών

οργανισμών .Βάση του παρακάτω πίνακα βοηθήθηκα για τις θέσεις των Μενού και την

διαμόρφωση της σελίδας .

Page 14: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

14

Μενού Ανακοινώσεις Καλώς

Όρισμα Λογότυπο

Κύριο

Χρώμα

Σύνδεση

με

Κοινωνικά

δικτ

mazigiatopaidi.gr Πάνω Πάνω

Αριστερά Γαλάζιο

fkpanoixtiagalia.gr Αριστερά Δεξιά Πάνω Άσπρο Χ

autistika.gr Πάνω Κέντρο Άσπρο

Μπλε Χ

lifelinehellas.gr Πάνω Πάνω

Αριστερά Άσπρο

hamogelo.gr Πάνω Πάνω

Κέντρο

Άσπρο

Κόκκινο

unicef.gr Αριστερά Πάνω Δεξιά Μπλε

*agia-marina.gr* Πάνω Πάνω Μπλε Χ

Πίνακας 1.1 Σύγκριση Στοιχείων Από Φιλανθρωπικές Ιστοσελίδες

Το κύριο Μενού, που δίνει και τις περαιτέρω επιλογές στην ιστοσελίδα, θα πρέπει να

είναι ευδιάκριτο .Σύμφωνα με τον παραπάνω πίνακα οι περισσότερες αυτών έχουν

τοποθετημένο το κύριο μενού στο πάνω μέρος της σελίδας τους .Στην ιστοσελίδα της

Αγίας Μαρίνας τοποθετήθηκε επίσης στο πάνω μέρος, αφού θεωρήθηκε το καλύτερο

δυνατό σημείο .Το όνομα της Ιστοσελίδας θα αναγράφεται στο κέντρο της .Αρχικά

υπάρχει το καλωσόρισμα, όπου θα αποτελεί ένα κείμενο που θα το διαλέξει η

διευθύντρια του ιδρύματος .Δοκιμάστηκαν 3 πρότυπα (templates) τα οποία θα ταίριαζαν

στην ιστοσελίδα που θα δημιουργηθεί και σε επικοινωνία με το ίδρυμα ,αποφασίστηκε το

τελικό πρότυπο για την δημιουργία αυτής .Τα 3 πρότυπα ήταν :

Page 15: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

15

Εικόνα 1.7 1ο Δοκιμαστικό Πρότυπο

Ένα πολύχρωμο Πρότυπο με την κύρια μπάρα των Μενού στην κορυφή και ακριβώς από

κάτω το Όνομα της σελίδας .Το συγκεκριμένο Πρότυπο απορρίφθηκε από το ίδρυμα .

Page 16: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

16

Εικόνα 1.8 2ο Δοκιμαστικό Πρότυπο

Το στυλ του προτύπου είναι νεανικό καθώς και τα χρώματα .Πάνω αριστερά

αναγράφεται το όνομα της Ιστοσελίδας που θα δημιουργηθεί και ακριβώς από κάτω η

μπάρα με τα Μενού .Το συγκεκριμένο πρότυπο απορρίφθηκε από το ίδρυμα .

Page 17: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

17

Εικόνα 1.9 3

ο Δοκιμαστικό Πρότυπο

Ένα ελπιδοφόρο όπως χαρακτηρίστηκε Πρότυπο από το ίδρυμα ,που κατά την άποψη

τους ταιριάζει απόλυτα με την Ιστοσελίδα που έχουν στο μυαλό τους οι υπεύθυνοι του

ιδρύματος .Αρχικά ,όπως και στις άλλες 2 Εικόνες το Μενού ,το όνομα της Ιστοσελίδας

και ακολουθεί το κείμενο που θα καλωσορίζει τον επισκέπτη .Μετά λόγω των Position

του Προτύπου στην θέση του “Search” τοποθετήθηκαν 2 Μενού ,ΕΠΙΚΟΙΝΩΝΙΑ και

ΑΡΧΙΚΗ ΣΕΛΙΔΑ .Λεπτομέρειες σχετικά με την σελίδα αναλύονται παρακάτω .

1.4 ΑΝΑΓΚΗ ΠΡΟΒΟΛΗΣ ΕΡΓΟΥ ΑΓΙΑΣ ΜΑΡΙΝΑΣ

Η ανάγκη για προβολή έχει ως σκοπό :

την ανακούφιση της φτώχιας ή ασθένειας ή οι ανάγκες των ηλικιωμένων

την προαγωγή της εκπαίδευσης

την προαγωγή της θρησκείας

υπηρεσίες παιδικής φροντίδας σε μη κερδοσκοπική βάση, και

άλλοι σκοποί που ωφελούν την κοινωνία .

Page 19: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

19

ΚΕΦΑΛΑΙΟ 2 ΤΕΧΝΟΛΟΓΙΕΣ ΚΑΙ ΕΡΓΑΛΕΙΑ ΑΝΑΠΤΥΞΗΣ

2.1 JOOMLA

Joomla!™ είναι ένα ανοιχτού κώδικα σύστημα διαχείρισης περιεχομένου το οποίο έχει

χαρακτηριστεί από τους δεκάδες χιλιάδες χρήστες του ως το καλύτερο CMS στον κόσμο,

διότι έχει τεράστιες δυνατότητες αλλά και ταυτόχρονα εξαιρετικά ευέλικτο και φιλικό

περιβάλλον εργασίας και διαχείρισης.

Μόλις εγκατασταθεί, ο διαχειριστής του δικτυακού τόπου μπορεί να συνδεθεί στην

κονσόλα διαχείρισης και να δημιουργήσει τμήματα, κατηγορίες, άρθρα με περιεχόμενο,

δημοσκοπήσεις κοκ. Διαχείριση ολόκληρου του frontend της ιστιοσελίδας από ένα

εύχρηστο, και άμεσο περιβάλλον διαχείρισης. Όταν δημιουργείται ένα νέο περιεχόμενο,

ένας WYSIWYG (What You See Ιs What You Get) επεξεργαστής κειμένου που

επιτρέπει απλές αλλαγές χωρίς τη γνώση της HTML . Παρόλο ότι δεν είναι απαραίτητο,

ο χρήστης να έχει γνώση της HTML και CSS , συνιστάται να αρχίσει τη μελέτη των

βασικών εντολών της HTML και CSSγια την περίπτωση που θα πρέπει να επεξεργαστεί

ή να τροποποιήσει κάποιο στοιχείο ώστε να το προσαρμόσει στις ανάγκες που θα

δημιουργηθούν. Στις κοινότητες φόρουμ για Joomla είναι διαθέσιμοι χιλιάδες

προγραμματιστές και σχεδιαστές για να βοηθήσουν νέους και έμπειρους χρήστες .

Το Joomla!™ είναι μία δωρεάν εφαρμογή, ανοιχτού κώδικα σύστημα διαχείρισης

περιεχομένου, το οποίο έχει συνταχθεί στην γλώσσα προγραμματισμού PHP για τη

διαχείριση και τη δημοσίευση περιεχομένου στον ιστό (web) χρησιμοποιώντας μια

MySQL βάση δεδομένων. To Joomla περιλαμβάνει χαρακτηριστικά όπως η cache των

σελίδων για τη βελτίωση των επιδόσεων, web ευρετηρίασης (indexing), RSS feeds,

εκτυπώσιμες (printable) εκδόσεις των σελίδων, blogs, forums, δημοσκοπήσεις,

ημερολόγια, αναζήτηση στην ιστοσελίδα, την ανάλογη γλώσσα αλλά και την δυνατότητα

πολυγλωσσικών ιστοσελίδων .

Το όνομα “joomla” είναι μια φωνητική γραφή της γλώσσας Σουαχίλι (Swahili) στην

οποία η λέξη "jumla" σημαίνει "όλοι μαζί" ή "ως σύνολο". Επέλεξαν αυτο το όνομα

για να αντικατοπτρίζει τη δέσμευση της Κοινότητας και την ομάδα ανάπτυξης του έργου.

Η πρώτη έκδοση του Joomla (Joomla 1.0.0) ανακοινώθηκε στις 16 Σεπτεμβρίου 2005.

Αυτή ήταν μια νέα ονομασία της έκδοσης Mambo 4.5.2.3 σε συνδυασμό με διορθώσεις

κάποιον σφαλμάτων (bug) στο περιβάλλον διαχείρησης και στον κώδικα της ασφαλείας.

Στη συνέχεια,για την πορεία ανάπτυξης του project, οι προγραμματιστές του πυρήνα

προβλέπουν ότι το Joomla! 2.0 θα ειναι ενα εντελώς ανανεωμένο και ξαναγραμμένο σε

νέο κώδικα βασισμένο σε PHP 5.0. (http://www.webmasterslife.gr/joomla-cms/55-

%CE%A4%CE%B9-%CE%B5%CE%AF%CE%BD%CE%B1%CE%B9-

%CF%84%CE%BF-joomla.html)

Η επίσημη ιστοσελίδα του Joomla project βρίσκετε στο www.joomla.org και για την

Ελλάδα η επίσημη ιστοσελίδα βρίσκετε www.joomla.gr

Το Joomla κυκλοφορεί και διανέμετε υπό την GNU General Public License.

Page 20: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

20

Το Joomla εγκαθίσταται σε έναν κεντρικό υπολογιστή, τον web server. Ο χρήστης έχει

πρόσβαση στο περιβάλλον διαχείρισης μέσω ενός browser, όπως είναι ο Internet

Explorer , ο Firefox ή ο Google Chrome.

Ο διαχειριστής, μπορεί να προσθέσει οποιοδήποτε κείμενο ή γραφικό,και έτσι να

δημιουργήσει τις ιστοσελίδες .

Η αρχή για την χρησιμοποίηση του Joomla μπορεί να γίνει από οποιονδήποτε που δεν

έχει βασικές γνώσεις . Υπάρχουν διάφοροι τρόποι να ξεκινήσει κάποιος. Μπορεί να

κατεβάσετε την τελευταία έκδοση του Joomla από την ιστοσελίδα του :

http://www.joomla.org ή στο ελληνικό site myjoomla.gr .Από την στιγμή που

εγκατασταθεί το Joomla ,μπορεί κάποιος να ξεκινήσει και να βοηθιέται από το

αντίστοιχο forum της ιστοσελίδας .

Οι γνώσεις δεν χρειάζεται να είναι ιδιαίτερες .Εάν κάποιος γνωρίζει τη χρήση ενός

επεξεργαστή κειμένου, βρίσκετε σε καλό δρόμο. Σε γενικές γραμμές, εξαρτάται από το τι

θέλετε να κάνει ο διαχειριστής με το Joomla. Υπάρχουν και περιπτώσεις που θα

χρειαστείτε την υποστήριξη ενός επαγγελματία, όταν χρειαστεί να αξιοποιηθούν

εξειδικευμένες και προηγμένες δυνατότητες του Joomla. Σε κάθε περίπτωση πάντως, ο

διαχειριστής έχει τον έλεγχο : δημοσιεύει ότι και όποτε αυτός θέλει, με το πάτημα ενός

κουμπιού .

2.1.1 ΧΑΡΑΚΤΗΡΙΣΤΙΚΑ JOOMLA

Παρακάτω ακολουθούν μερικά από τα βασικά χαρακτηριστικά - πλεονεκτήματα του

Joomla!:

Λογισμικό ανοιχτού κώδικα

Μεγάλη κοινότητα χρηστών στο www.joomla.org και στο www.joomla.gr

Μεγάλη ευελιξία στον τρόπο που δημοσιεύεται το περιεχόμενο

Εύκολη και απλή χρήση

Δυνατότητες υποστήριξης ροής δεδομένωνRSS

Κάδος ανακύκλωσης για τα δεδομένα με δυνατότητα ανάκτησης

Ειδικός μηχανισμός για βελτιστοποίηση αποτελεσμάτων στις μηχανές

αναζήτησης

Υποστηρίζει πολλές γλώσσες

Υπάρχουν διαθέσιμες εκατοντάδες πρόσθετες εφαρμογές

Εύκολη εγκατάσταση εφαρμογών και προσθέτων

Διαχωρισμός επιπέδων χρηστών

Δημιουργία στατιστικών

WYSIWYG επεξεργαστής κειμένου για τα άρθρα

Σύστημα ψηφοφοριών (polls)

Page 21: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

21

Εκτεταμένη Διαχείριση:

Λειτουργία ταξινομησης της προβολής των νέων FAQs, articles

Module για απομακρυσμένη υποβολή από τον συγγραφέα για Νέα, άρθρα, FAQs

και Links

Δημοσίευση απεριόριστων σελίδων, χωρίς να περιορισμό

Δυνατότητα προσθήκης forum, photo galleries, βιβλιοθήκες αρχείων, βιβλία

επισκεπτών και φόρμες επικοινωνίας

Εύκολη διαχείριση online των PNGs, PDFs, DOCs, XLSs, GIFs και JPEGs με τη

βοήθεια του Image library

Αυτόματο Path-Finder. Τοποθετήστε μια εικόνα και αφήστε στο Joomla να

τακτοποιήσει τα υπόλοιπα

News feed manager. Επιλέξτε από πάνω από 360 news feeds από όλο τον κόσμο

Archive manager. Βάλε τα παλαιά άρθρα στην "κατάψυξη" αντι να τα διαγράψετε

εντελώς

Email-a-friend και Print-format για κάθε άρθρο

Ενσωματομένος επεξεργαστής κειμένου αντίστοιχος του Word Pad

Εμφάνιση και αισθητική την οποία διαμορφώνει ο χρήστης

Δημοσκοπήσεις και Έρευνες .Δυνατότητα τοποθέτησης σε κάθε σελίδα

Custom Page Modules

Διαχείριση των Template (πρότυπα)

Δυνατότητα προεπισκόπισης. Μπορείτε να δείτε αυτά που δημιουργήσετε πριν τα

παρουσιάσετε online

Banner manager. Κερδίστε χρήματα από το site σας

(http://nefeli.lib.teicrete.gr/browse/stef/epp/2011/KyriakosHlias/attached-document-

1310461382-916290-10325/kyriakos2011.pdf ) .

2.1.2 ΔΟΜΗ ΤΟΥ JOOMLA

Τα κυριότερα κομμάτια που απαρτίζουν το Joomla! είναι:

Δημόσιο τμήμα (Front-end).

Το δημόσιο τμήμα είναι ουσιαστικά ότι εμφανίζεται στον φυλλομετρητή του τελικού

χρήστη. Τα άρθρα, τα μενού και γενικά όλα τα στοιχεία της ιστοσελίδας που θέλουμε να

εμφανίζονται στον χρήστη βρίσκονται στο δημόσιο τμήμα.

Περιοχή διαχείρισης (Backend).

Η περιοχή διαχείρισης ο ‘πίνακας ελέγχου’ του Joomla!. Μέσα από εκεί ο διαχειριστής

(administrator) κάνει όλες τις τροποποιήσεις που αφορούν στον ιστότοπο. Μπορεί

χειριστεί λειτουργίες όπως πρόσθεση περιεχόμενου, εμφάνιση ή απόκρυψη στοιχείων,

δημιουργία χρηστών και γενικά ότι έχει σχέση με το Joomla!.

Μενού.

Page 22: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

22

Η πλοήγηση του χρήστη στην ιστοσελίδα γίνεται με την χρήση των μενού. Η δημιουργία

τους γίνεται δυναμικά και συνδέονται με αντικείμενα του Joomla! (ενότητες, κατηγορίες,

άρθρα). Δεν υπάρχει περιορισμός στον αριθμό των μενού σε μια ιστοσελίδα Joomla!.

Εφαρμογές (Components).

Η χρήση των εφαρμογών αποσκοπεί στην δυνατότητα επέκτασης του Joomla!.

Χωρίζονται σε εμπορικές εφαρμογές και σε εφαρμογές που διανέμονται ελεύθερα. Για

παράδειγμα υπάρχουν εφαρμογές για διαδικτυακά καταστήματα, και για εκθέσεις

φωτογραφιών.

Πρόσθετα (plug-ins).

Τα πρόσθετα είναι μικρά πακέτα κώδικα τα οποία χρησιμοποιούνται για κάποιες ειδικές

λειτουργίες. Για παράδειγμα η μηχανή αναζήτησης του Joomla! είναι ένα πρόσθετο.

Πρότυπα (Templates).

Τα πρότυπα χρησιμοποιούνται για τον διαχωρισμό του περιεχόμενο από την εμφάνιση.

Στα πρότυπα γενικά ορίζονται οι σχεδιαστικοί κανόνες που αφορούν στην ιστοσελίδα,

όπως είναι τα χρώματα, οι γραμματοσειρές και η θέση των ενθεμάτων.

(http://nefeli.lib.teicrete.gr/browse/stef/epp/2011/KyriakosHlias/attached-document-

1310461382-916290-10325/kyriakos2011.pdf )

2.1.3 Δυνατότητες Joomla

Το Joomla έχει τόσες πολλές δυνατότητες που είναι δύσκολο να αναφερθούμε σε όλες.

Και δεν είναι μόνο αυτό , αλλά ενσωματώνοντας διάφορα πρόσθετα εργαλεία που

ονομάζονται επεκτάσεις, διευρύνονται ακόμα περισσότερο οι δυνατότητες και

λειτουργίες του.Επιγραμματικά, οι πιο δημοφιλείς δυνατότητες είνα:

Προσθήκη κείμενο ή να ανέβασμα φωτογραφιών στον ιστότοπο από

οποιονδήποτε υπολογιστή διαθέτει σύνδεση στο internet.

Συνεργασία με όσους μπορούν να συμβάλλουν στην επεξεργασία του

περιεχομένου. Μπορεί να γίνει από κάθε υπολογιστή με σύνδεση στο internet.

Δημιουργία με εύκολο τρόπο διαφημιστικών banners , προωθώντας έτσι τα

προϊόντα και τις υπηρεσίες, ή την χρησιμοποίηση τους ως διαφημιστικό μέσο για

τρίτους.

Προσθήκη forum, photo galleries, music player , βιβλιοθήκες αρχείων, βιβλία

επισκεπτών και φόρμες επικοινωνίας

Λόγω των πλούσιων δυνατοτήτων του Joomla , οι πρακτικές του εφαρμογές είναι

αμέτρητες. Επιγραμματικά μερικές από αυτές:

Δημιουργία προσωπικής ή εταιρικής ιστοσελίδας

blog ή Gallery με φωτογραφίες

Δικτυακοί τόποι με προσανατολισμό την ενημέρωση

Παρουσιάσεις Επιχειρήσεων

Website Πολιτικών Γραφείων

Ε- shop ( Ηλεκτρονικό Κατάστημα)

Page 23: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

23

WebSites προβολής προϊόντων ή υπηρεσιών

Ξενοδοχεία

WebSites Συλλόγων – Οργανισμών

Ηλεκτρονικές εκδόσεις Περιοδικών και Εφημερίδων

Πωλήσεις αυτοκινήτων

Μεσιτικά Γραφεία

Παρουσιάσεις και προβολή γεωγραφικών περιοχών ή ισοτόπων τοπικού

χαρακτήρα

(http://www.netapproach.gr/index.php?option=com_content&view=article&id=67&Itemi

d=92 )

2.2 DRUPAL

Το Drupal είναι ένα αρθρωτό σύστημα διαχείρισης περιεχομένου (Content Management

System, CMS) ανοικτού/ελεύθερου λογισμικού, γραμμένο στη γλώσσα

προγραμματισμού PHP. Το Drupal, όπως πολλά σύγχρονα CMS, επιτρέπει στο

διαχειριστή συστήματος να οργανώνει το περιεχόμενο, να προσαρμόζει την παρουσίαση,

να αυτοματοποιεί διαχειριστικές εργασίες και να διαχειρίζεται τους επισκέπτες του

ιστοτόπου και αυτούς που συνεισφέρουν. Παρόλο που υπάρχει μια πολύπλοκη

προγραμματιστική διεπαφή, οι περισσότερες εργασίες μπορούν να γίνουν με λίγο ή και

καθόλου προγραμματισμό. Το Drupal ορισμένες φορές περιγράφεται ως «υποδομή για

εφαρμογές ιστού», καθώς οι δυνατότητές του προχωρούν παραπέρα από τη διαχείριση

περιεχομένου, επιτρέποντας ένα μεγάλο εύρος υπηρεσιών και συναλλαγών.

Το Drupal μπορεί να εκτελεστεί σε διάφορες πλατφόρμες, συμπεριλαμβανομένων των

λειτουργικών συστημάτων Windows, Mac OS X, Linux, FreeBSD, ή οποιασδήποτε

πλατφόρμας που υποστηρίζει είτε το διακομιστή ιστοσελίδων Apache HTTP Server

(έκδοση 1.3+), είτε το Internet Information Services (έκδοση IIS5+), καθώς επίσης και τη

γλώσσα προγραμματισμού PHP (έκδοση 4.3.3+). Το Drupal απαιτεί μια βάση δεδομένων

όπως η MySQL και η PostgreSQL για την αποθήκευση του περιεχομένου και των

ρυθμίσεών του.

Αρχικά γραμμένο από τον Dries Buytaert ως σύστημα πίνακα ανακοινώσεων (BBS,

bulletin board system), το Drupal μετατράπηκε σε εγχείρημα ανοικτού κώδικα το 2001.

Drupal είναι η διατύπωση στην Αγγλική γλώσσα της Ολλανδικής λέξης "druppel", που

σημαίνει «σταγόνα». Το όνομα πάρθηκε από τον ξεπερασμένο πλέον ιστοτόπο Drop.org,

του οποίου ο κώδικας εξελίχθηκε στο Drupal. Ο Buytaert ήθελε να ονομάσει τον

ιστοτόπο "dorp" (στα Ολλανδικά σημαίνει «χωριό», αναφερόμενος στη διάσταση της

κοινότητας), αλλά έκανε ένα ορθογραφικό λάθος κατά τη διαδικασία ελέγχου του

ονόματος χώρου (domain name) και τελικά σκέφτηκε ότι ακούγεται καλύτερα.[2]

Page 24: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

24

Από το Μάιο του 2006 ως τον Απρίλιο του 2007, χρήστες κατέβασαν το Drupal από τον

επίσημο ιστότοπο περισσότερες από 600.000 φορές.[3]

Μια μεγάλη κοινότητα χρηστών

λαμβάνει πλέον μέρος στη συνεχή εξέλιξη του Drupal.

(http://el.wikipedia.org/wiki/Drupal - cite_note-3 )

2.3 PHP

Η PHP είναι μια "δυνατή" serverside γλώσσα για την κατασκευή δυναμικών και

διαδραστικών ιστοχόρων. Η PHP χρησιμοποιείται ευρέως, δωρεάν, και ουσιαστικά

αποτελεί μια εναλλακτική επιλογή σε εμπορικές τεχνολογίες όπως την Active Server

Pages της Microsoft. Η PHP ενδείκνυται για την κατασκευή εφαρμογών και σελίδων στο

Διαδίκτυο μιας και μπορεί να ενσωματωθεί απευθείας μέσα σε κώδικα HTML.

Η PHP είναι μια γλώσσα προγραμματισμού που σχεδιάστηκε για τη δημιουργία

δυναμικών σελίδων στο δυαδίκτυο και είναι επισήμως γνωστή ως: HyperText

preprocessor.

Είναι μια server-side (εκτελείτε στον διακομιστή) scripting γλώσσα που γράφεται

συνήθως πλαισιωμένη από HTML, για μορφοποίηση των αποτελεσμάτων. Αντίθετα από

μια συνηθισμένη HTML σελίδα η σελίδα PHP δεν στέλνεται άμεσα σε έναν πελάτη

(client), αντ' αυτού πρώτα αναλύεται και μετά αποστέλλεται το παραγόμενο αποτέλεσμα.

Τα στοιχεία HTML στον πηγαίο κώδικα μένουν ως έχουν, αλλά ο PHP κώδικας

ερμηνεύεται και εκτελείται. Ο κώδικας PHP μπορεί να θέσει ερωτήματα σε βάσεις

δεδομένων, να δημιουργήσει εικόνες, να διαβάσει και να γράψει αρχεία, να συνδεθεί με

απομακρυσμένους υπολογιστές , κ.ο.κ. Σε γενικές γραμμές οι δυνατότητες που μας δίνει

είναι απεριόριστες.

Αρχικά η ονομασία της ήταν PHP/FI από το Forms Interpreter η οποία δημιουργήθηκε το

1995 από τον Rasmus Lerdorf ως μια συλλογή από Perl scripts που τα χρησιμοποιούσε

στην προσωπική του σελίδα. Δεν άργησε να τα εμπλουτίσει με λειτουργίες επεξεργασίας

δεδομένων με SQL, αλλά τα σημαντικά βήματα που έφεραν και την μεγάλη αποδοχή της

PHP ήταν αρχικά η μετατροπή τους σε C και μετέπειτα η δωρεάν παροχή του πηγαίου

κώδικα μέσω της σελίδας του ώστε να επωφεληθούν όλοι από αυτό που είχε φτιάξει,

αλλά και να τον βοηθήσουν στην περαιτέρω ανάπτυξή της. ( http://www.freestuff.gr/forums/viewtopic.php?t=18943 ) .

2.4 MYSQL

Η MySQL είναι ένα σύστημα διαχείρισης σχεσιακής βάση ανοικτού κώδικα όπως

λέγεται (relational database management system - RDBMS) που χρησιμοποιεί την

Page 25: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

25

Structured Query Language (SQL), την πιο γνωστή γλώσσα για την προσθήκη, την

πρόσβαση και την επεξεργασία δεδομένων σε μία Βάση Δεδομένων. Επειδή είναι

ανοικτού κώδικα (open source), οποιοσδήποτε μπορεί να κατεβάσει την MySQL και να

την διαμορφώσει σύμφωνα με τις ανάγκες του σύμφωνα πάντα με την γενική άδεια που

υπάρχει. Η MySQL είναι γνωστή κυρίως για την ταχύτητα, την αξιοπιστία, και την

ευελιξία που παρέχει. Οι περισσότεροι συμφωνούν ωστόσο ότι δουλεύει καλύτερα όταν

διαχειρίζεται περιεχόμενο και όχι όταν εκτελεί συναλλαγές. Η MySQL αυτή τη στιγμή

μπορεί να λειτουργήσει σε περιβάλλον Linux, Unix, και Windows.

(http://www.isites.gr/clients/knowledgebase/19/---MySQL--.html )

Η MySQL είναι ένα πολύ γρήγορο και δυνατό , σύστημα διαχείρισης βάσεων δεδομένων.

Μια βάση δεδομένων σας επιτρέπει να αποθηκεύετε , να αναζητάτε , να ταξινομείτε και

να ανακαλείτε τα δεδομένα αποτελεσματικά . Ο MySQL διακομιστής ελέγχει την

πρόσβαση στα δεδομένα σας , για να μπορούν να δουλεύουν πολλοί χρήστες ταυτόχρονα

, για να παρέχει γρήγορη πρόσβαση και να διασφαλίζει ότι μόνο πιστοποιημένοι χρήστες

μπορούν να έχουν πρόσβαση. Συνεπώς η MySQL είναι ένας πολυνηματικός διακομιστής

πολλαπλών χρηστών. Χρησιμοποιεί την SQL ( Structured Query Language ) την τυπική

γλώσσα ερωτημάτων για βάσεις δεδομένων, παγκόσμια . H MySQL είναι διαθέσιμη από

το 1996 αλλά η ιστορίας της ξεκινά από το 1979 .

2.5 ΔΙΚΤΥΑΚΟΣ ΕΞΥΠΕΡΕΤΗΤΗΣ (WEB SERVER)

Με τον όρο Web Server αναφερόμαστε είτε σε έναν ηλεκτρονικό υπολογιστή (hardware),

είτε σε ένα λογισμικό (software) που μας επιτρέπει μέσω του Internet και με την βοήθεια

του HTTP (Hyper Text Transfer Protocol - Πρωτόκολλο Μεταφοράς Υπερκειμένου) να

αποκτούμε πρόσβαση σε ιστοσελίδες που είναι αποθηκευμένες σε αυτόν.

Server να "ανοίξει" μια συγκεκριμένη ιστοσελίδα το αίτημά του ελέγχεται πρώτα από

τον διαχειριστή της ιστοσελίδας ή του διακομιστή και στην συνέχεια αφού παραχωρηθεί

η άδεια ο χρήστης βλέπει την ιστοσελίδα. Η διαδικασία αυτή φαντάζει να είναι

πολύπλοκη και χρονοβόρα, όμως, όπως πολύ σωστά αναφέρεται σε σχετικό άρθρο στο

www.topwebhosting.gr, "Oι Web Servers είναιικανοί να χειριστούν εκατοντάδες χιλιάδες

αιτήματα το δευτερόλεπτο και μπορούν να ανατρέξουν σε πληροφορίες γρήγορα,

παρέχοντας στον επισκέπτη της σελίδας την πληροφορία που αναζητεί σε μηδενικό

χρόνο.".

Υπάρχουν διάφορα είδη Web Server όπως οι dedicated servers, οι load balancing servers,

οι database servers. Επίσης, καθένας μπορεί να μετατρέψει τον ηλεκτρονικό υπολογιστή

του σε έναν Web Server εγκαθιστώντας κατάλληλο λογισμικό που να συνδέει τον

υπολογιστή του με το Internet. (http://www.webvistas.org/topic/451-

%CF%84%CE%AF-%CE%B5%CE%AF%CE%BD%CE%B1%CE%B9-

%CE%BF%CE%B9-web-servers/ ) .

Page 26: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

26

2.5.1 APACHE WEB SERVER

Ο Apache Web Server είναι αυτό ακριβώς που δηλώνει το όνομά του. Πρόκειται δηλαδή

για έναν εξυπηρετητή (server) του παγκόσμιου Ιστού (Web). Με τον όρο server το μυαλό

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

άδικα. Ο όρος αυτός χρησιμοποιείται και για το μηχάνημα εξυπηρετητή (hardware) αλλά

και για το πρόγραμμα (software). Στο άρθρο αυτό θα ασχοληθούμε μόνο με το software

και συγκεκριμένα με τον Apache.

Ο Apache εγκαθίσταται σε έναν υπολογιστή ο οποίος μπορεί να χρησιμοποιεί διάφορα

λειτουργικά συστήματα όπως Linux, Unix, Microsoft Windows, GNU, FreeBSD, Solaris,

Novell NetWare, Mac OS X, OS/2, TPF. Ο ρόλος του Apache είναι να αναμένει αιτήσεις

από διάφορα προγράμματα – χρήστες (clients) όπως είναι ένας ο φυλλομετρητής

(browser) ενός χρήστη και στη συνέχεια να εξυπηρετεί αυτές τις αιτήσεις “σερβίροντας”

τις σελίδες που ζητούν είτε απευθείας μέσω μιας ηλεκτρονικής διεύθυνσης (URL), είτε

μέσω ενός συνδέσμου (link). Ο τρόπος με τον οποίο ο Apache εξυπηρετεί αυτές τις

αιτήσεις, είναι σύμφωνος με τα πρότυπα που ορίζει το πρωτόκολλο HTTP (Hypertext

Transfer Protocol). (http://mytwocents.gr/apache-web-server/#.T9OSWFJIHos ).

2.6 ΕΛΕΥΘΕΡΟ ΛΟΓΙΣΜΙΚΟ

Το Ελεύθερο λογισμικό είναι ζήτημα ελευθερίας, όχι κόστους.

Το ελεύθερο λογισμικό προσφέρει στους χρήστες την ελευθερία να εκτελούν,

αντιγράφουν, διανέμουν, μελετούν, τροποποιούν και βελτιώνουν το Ελεύθερο λογισμικό.

Για την ακρίβεια, αναφέρεται σε τέσσερις βασικές ελευθερίες:

Την ελευθερία να εκτελείτε το πρόγραμμα για οποιονδήποτε σκοπό (ελευθερία

0).

Την ελευθερία να μελετάτε τον τρόπο λειτουργίας του προγράμματος και να το

προσαρμόζετε στις ανάγκες σας (ελευθερία 1). Η πρόσβαση στον πηγαίο κώδικα

είναι προϋπόθεση για να ισχύει κάτι τέτοιο.

Την ελευθερία να αναδιανέμετε αντίγραφα του προγράμματος ώστε να βοηθάτε

το συνάνθρωπο σας. (ελευθερία 2).

Την ελευθερία να βελτιώνετε το πρόγραμμα και να δημοσιεύεται τις βελτιώσεις

που έχετε κάνει στο ευρύ κοινό, ώστε να επωφεληθεί ολόκληρη η κοινότητα

(ελευθερία 3). Η πρόσβαση στον πηγαίο κώδικα είναι προϋπόθεση για να ισχύει

κάτι τέτοιο.

Page 27: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

27

Ένα πρόγραμμα θεωρείται ελεύθερο λογισμικό όταν οι χρήστες του έχουν όλες τις

παραπάνω ελευθερίες. Επομένως, θα πρέπει να είστε ελεύθεροι να αναδιανέμετε

αντίγραφα, με ή χωρίς τροποποιήσεις, δωρεάν ή χρεώνοντας για την διανομή, στον

οποιονδήποτε και οπουδήποτε. Το να είστε ελεύθεροι να κάνετε όλα τα παραπάνω

σημαίνει (μεταξύ άλλων) πως δεν χρειάζεται να ζητήσετε εξουσιοδότηση ή να

πληρώσετε κάποιον ώστε να λάβετε τη ανάλογη άδεια.

Η ελευθερία της χρήσης ενός προγράμματος σημαίνει πως δίδεται η ελευθερία σε κάθε

άτομο ή επιχείρηση να το χρησιμοποιήσει σε κάθε είδους υπολογιστικό σύστημα, για

κάθε είδος εργασίας χωρίς να είναι υποχρεωμένο να επικοινωνήσει εκ των προτέρων με

τον προγραμματιστή ή με κάποια άλλη οντότητα. Σε αυτή την ελευθερία, είναι η άποψη

του χρήστη που έχει σημασία, και όχι αυτή του κατασκευαστή.

Η ελευθερία της αναδιανομής αντιγράφων θα πρέπει να περιλαμβάνει εκτελέσιμες

(executable) μορφές του προγράμματος, καθώς και τον πηγαίο κώδικα, τόσο για την

τροποποιημένη όσο και για την αρχική έκδοση του προγράμματος. (Η διανομή

προγραμμάτων σε εκτελέσιμη μορφή είναι απαραίτητη για εγκατεστημένα ελεύθερα

λειτουργικά συστήματα). Θεωρείται δεκτό όταν δεν υπάρχει τρόπος να δημιουργηθεί η

εκτελέσιμη μορφή για κάποιο συγκεκριμένο πρόγραμμα (από τη στιγμή που μερικές

γλώσσες δεν υποστηρίζουν κάτι τέτοιο), αλλά θα πρέπει να έχετε την ελευθερία να

αναδιανέμετε τέτοιες μορφές σε περίπτωση που αναπτύξετε ή βρείτε κάποιο δικό σας

τρόπο να τις δημιουργήσετε).

Για να ισχύουν πρακτικά οι τέσσερις βασικές ελευθερίες, και να μπορείτε να

δημοσιεύετε βελτιωμένες εκδόσεις, θα πρέπει να έχετε πρόσβαση στον πηγαίο κώδικα

του προγράμματος. Επομένως, η πρόσβαση στον πηγαίο κώδικα είναι απαραίτητη

προϋπόθεση στο ελεύθερο λογισμικό. (http://mytwocents.gr/apache-web-

server/#.T9OSWFJIHos ) .

2.7 DOMAIN NAME

To Domain Name είναι η "διεύθυνση" στο διαδίκτυο!

Όποιος πληκτρολογήσει το domain σε έναν browser (Mozzila Firefox, Internet Explorer,

Safari, Opera, Google Chrome κτλ.) θα μεταφερθεί στην ιστοσελίδα σας. Κάθε domain

είναι μοναδικό και παρέχει μια πρώτη εικόνα της ιστοσελίδας που ακολουθεί, καθώς και

μια ιδέα για το περιεχόμενο του site, ή τα προϊόντα/υπηρεσίες που παρέχει.

Page 28: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

28

Για να καταχωρήσουμε το domain της επιλογής μας θα πρέπει πρώτα να ελέγξουμε τη

διαθεσιμότητα του domain και να το κατοχυρώσουμε το συντομότερο δυνατόν,

τοποθετώντας τα στοιχεία μας κατά τη διαδικασία κατοχύρωσης, εάν είναι διαθέσιμο. Αν

δεν είναι διαθέσιμο θα πρέπει να δοκιμάσουμε περισσότερες αναζητήσεις παρόμοιων με

αυτό domain names, πχ. προσθέτοντας επιπλέον λέξεις, παύλες κ.ο.κ. (

http://www.papaki.gr/qa/%CF%84%CE%B9%CE%B5%CE%AF%CE%BD%CE%B1%

CE%B9-domain-name.html ) .

2.8 ΣΤΑΤΙΚΕΣ ΣΕΛΙΔΕΣ

Με τον όρο στατικές σελίδες εννοούμε τις σελίδες που δεν αλλάζουν συχνά, για

παράδειγμα το Ποιοί είμαστε.

Οι στατικές σελίδες μπορούν να ανανεωθούν καθώς και να προστεθούν ή αφαιρεθούν

από τον διαχειριστή της σελίδας. Δεν υπάρχει κανένας περιορισμός για τον αριθμό τους

ή για το περιεχόμενο τους. Οι στατικές σελίδες μπορούν να περιέχουν κείμενο,

φωτογραφίες και επισυναπτόμενα αρχεία.

Η κατηγοριοποίηση των στατικών περιεχομένων γίνεται με την μορφή δένδρου στο

κεντρικό μενού της σελίδας και είναι επίσης πλήρως δυναμική, καθώς ο διαχειριστής

μπορεί να επιλέξει που θα τοποθετηθεί κάθε νέα ή υπάρχουσα επιλογή, να δημιουργήσει

νέα επιλογές ή υπό επιλογές στο μενού.

Παραδείγματα Στατικών Σελίδων για Εταιρία

Εταιρικό Προφίλ - Ποιοί είμαστε

Ιστορικό Εταιρίας

Πολιτική της Εταιρίας

Οικονομικά Στοιχεία

Βραβεύσεις

(http://www.utopiaengineering.com/stoixeia-istoselidas/statikes-selides ).

2.9 ΔΥΝΑΜΙΚΕΣ ΣΕΛΙΔΕΣ

Οι δυναμικές ιστοσελίδες, σε αντίθεση με τις στατικές ιστοσελίδες, δεν είναι απλά

HTML έγγραφα, αλλά συμπεριλαμβάνουν προγραμματισμό (σε μία γλώσσα

προγραμματισμού κατάλληλη για το διαδίκτυο, όπως π.χ. είναι η php) και ουσιαστικά

είναι web εφαρμογές.

Η κατασκευή δυναμικών ιστοσελίδων είναι προφανώς πιο πολύπλοκη από τις απλές

στατικές ιστοσελίδες, και ο βαθμός δυσκολίας τους εξαρτάται φυσικά από τις λειτουργίες

Page 29: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

29

και τις δυνατότητες που περιλαμβάνει η εκάστοτε web εφαρμογή. Στις δυναμικές

ιστοσελίδες, το περιεχόμενο της ιστοσελίδας, αποθηκεύεται και αντλείται δυναμικά από

μία ή περισσότερες βάσεις δεδομένων (π.χ. MySQL), ενώ διαθέτουν εκτός από το

frontend (user interface) και το backend (administration area) μέσω του οποίου γίνεται

εύκολα η διαχείριση του περιεχομένου της ιστοσελίδας.(

http://www.vdimitris.gr/mysql.php?seo=24 ).

2.10 HTML

H html δεν είναι γλώσσα προγραμματισμού. Είναι γλώσσα σήμανσης (markup

language). Ανακαλύφτηκε από την IBM, η οποία ήθελε να λύσει το πρόβλημα της για μη

τυποποιημένη εμφάνιση κειμένων στα διάφορα υπολογιστικά της συστήματα. Html

υπάρχει και στις δυναμικές και στις στατικές ιστοσελίδες. Η html αποτελείται από

διάφορα tags που δίνουν εντολές στον browser όπου ο τελευταίος απεικονίζει τα

αποτελέσματα αυτών των εντολών στις οθόνες μας. Τα tags είναι εντολές που βρίσκονται

μεταξύ των συμβόλων < και >. Π.χ. αν θέλουμε να δώσουμε εντολή στον browser μας να

εμφανίσει κάποιο κείμενο μαρκαρισμένο σε bold, στην html γράφεται:

<b>To_κείμενο_εδώ</b> Οι εντολές είναι case insensitive, δεν επηρεάζονται από το αν

έχουν γραφτεί με πεζά (μικρά) ή κεφαλαία. Αξιοσημείωτο είναι επίσης ότι η html είναι η

πρώτη και πιο διαδεδομένη γλώσσα περιγραφής της δομής μιας ιστοσελίδας. Η html

έφερε τα πρώτα προβλήματα εμφάνισης ιστοσελιδών από τους διάφορους browsers.

Ειδικά όταν περιλαμβάνει (που περιλαμβάνει συχνά) εφαρμογές σε Javascript. Αρχικά

είχαν θεσπιστεί κάποιες προδιαγραφές για τη html που κάλυπταν μέχρι τη html 2.0. Τα

προβλήματα προέκυψαν όταν οι Microsoft κι η Netscape πρόσθεσαν στην html τέτοιες

δυνατότητες που ήταν συμβατές να απεικονιστούν από ορισμένους browsers. Ακόμη και

τώρα αλλιώς απεικονίζεται μια σελίδα από διαφορετικούς browsers. Χάρη σε αυτό

εκθρονίστηκε ο explorer από τον firefox.Μεγάλα προγράμματα στα οποία ο χρήστης

συγγράφει κώδικα html και ταυτόχρονα μπορεί να βλέπει και το αποτέλεσμα των

κωδικών που συγγράφει είναι το Dreamweaver της Adobe, το FrontPage της Microsoft

και το Ace HTML.( http://www.bloggertips.gr/2011/03/blog-post_05.html ) .

2.11 WORLD WIDE WEB

Το WorldWideWeb ήταν το πρώτο web browser, όταν γράφτηκε ήταν το μοναδικό

πρόγραμμα για την περιήγηση στον παγκόσμιο ιστό. Ο πηγαίος κώδικας έγινε κοινό

κτήμα το 1993. Παραμένει σε ένα υπολογιστή NextCube στο μουσείο του CERN ως

ιστορικό τεχνούργημα. Ο Τιμ Μπέρνερς Λι έγραψε το WorldWideWeb στο δεύτερο

εξάμηνο του 1990 σε ένα υπολογιστή NEXT, κατά τη διάρκεια της εργασίας του στο

CERN. To πρώτο επιτυχές build ολοκληρώθηκε στις 25 Δεκεμβρίου 1990, και άλλα

διαδοχικά build κυκλοφόρησαν μεταξύ του Μπέρνες Λι και τους συναδέλφους του στο

CERN πριν διατεθεί στο κοινό, από ομάδες συζήτησης (newsgroups) στο Ίντερνετ, τον

Αύγουστο του 1991. Μέχρι τότε, ήταν αρκετοί άλλοι που συμμετείχαν στο έργο,

Page 30: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

30

συμπεριλαμβανομένου των Bernd Pollermann, Robert Cailliau, Jean-François Groff, και

ο μεταπτυχιακός φοιτητής Nicola Pellow, ο οποίος έγραψε το line-mode browser.

Ο Μπέρνερς Λι και ο Groff προσάρμοσαν αργότερα πολλά από τα στοιχεία του

WorldWideWeb, δημιουργώντας την libWWW API.

Μια σειρά από προγράμματα περιήγησης εμφανίστηκαν, όπως το ViolaWWW. Όλα

επισκιάστηκαν από το Mosaic , το οποίο από το 1993, είχε αντικαταστήσει το

πρόγραμμα WorldWideWeb. Τα μέρη που συμμετείχαν στη δημιουργία του είχαν

μετακινηθεί σε άλλα καθήκοντα, όπως ο καθορισμός προτύπων και κατευθυντήριων

γραμμών για την περαιτέρω ανάπτυξη του Παγκόσμιου Ιστού - π.χ HTML, διάφορα

πρωτόκολλα επικοινωνίας, και ούτω καθεξής.

Στις 30 Απριλίου 1993, η διεύθυνση του CERN κυκλοφόρησε τον πηγαίο κώδικα του

WorldWideWeb στο δημόσιο τομέα, καθιστώντας το ελεύθερο λογισμικό. Διάφορες

εκδόσεις του λογισμικού είναι ακόμα διαθέσιμα για λήψη από αρχείο του evolt.org. Ο

Μπέρνερς Λι αρχικά σκέφτηκε την άδεια GNU General Public License, αλλά τελικά

επέλεξε να το εκδώσει στο κοινό κτήμα για να μεγιστοποιήσει την εταιρική υποστήριξη

.(2012 , http://el.wikipedia.org/wiki/WorldWideWeb ).

Page 31: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

31

ΚΕΦΑΛΑΙΟ 3 ΣΧΕΔΙΑΣΗ ΙΣΤΟΣΕΛΙΔΑΣ

3.1 ΕΓΚΑΤΑΣΤΑΣΗ ΤΟΥ XAMPP

Το XAMPP είναι ένα ελεύθερο και ανοικτό λογισμικό, που αποτελείται κυρίως από τον

Apache HTTP Server, τη MySQL βάση δεδομένων και των διερμηνέων για scripts

γραμμένα σε γλώσσες προγραμματισμού PHP και Perl. Με τη χρήση του

προσομοιώνεται ο τοπικός υπολογιστής σε δικτυακό εξυπηρετητή. Εγκαθιστούμε τοπικά

στον υπολογιστή μας το XAMPP το οποίο βρίσω στην μηχανή αναζήτησης google

κάνοντας searching to XAMPP download .Εικόνα 3.1.1 :

Εικόνα 3.1 Εύρεση XAMPP Στο διαδίκτυο

Τρέχουμε το αρχείο xampp-win32-1.7.4-VC6-installer.exe για το installation .

Page 32: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

32

Εικόνα 3.2 Όνομα Αρχείου XAMPP

Επιλέγουμε εγκατάσταση και μετά επιλογή γλώσσας ,προτεινόμενη Αγγλική .Εικόνα 3.3

:

Εικόνα 3.3 Επιλογή γλώσσας εγκατάστασης XAMPP

Επιλέγουμε Next :

Page 33: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

33

Εικόνα 3.4 XAMPP 1.7.4 Setup – Next

Επιλέγουμε την διεύθυνση που θα αποθηκευτεί το αρχείο (μέσω της επιλογής browser)

και έπειτα Next .Βλέπε Εικόνα 3.5 :

Εικόνα 3.5 XAMPP 1.7.4 Setup – Browser

Page 34: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

34

Τέλος Τσεκάρουμε τις επιλογές “Install Apache as Server” και “Install MySQL as

Server” .Έχουμε την επιλογή να διαλέξουμε αν θα θέλαμε να δημιουργηθεί εικονίδιο

στην επιφάνεια εργασίας ή στην Έναρξη των Windows .Αφού αποφασίσουμε τι θέλουμε

και τι όχι πατάμε “Install” .Βλέπε Εικόνα 3.6 :

Εικόνα 3.6 XAMPP 1.7.4 Τελευταίο βήμα πριν την τελική εγκατάσταση

Περιμένουμε να ολοκληρωθεί η εγκατάσταση και πατάμε “Finish” .

Έπειτα από το installation τρέχουμε τη συντόμευση το XAMPP Control Panel .

Page 35: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

35

Εικόνα 3.7 Διεπαφή του XAMPP Control Panel

Start στο Apache & MySql

Στον browser πληκτρολογούμε http://127.0.0.1/ ή http://localhost/ για να μεταβούμε στην

κεντρική σελίδα του XAMPP από όπου μπορούμε να χρησιμοποιήσουμε τα εργαλεία που

έχει στο πακέτο όπως το PhpMyAdmin.

3.1.1 ΔΗΜΙΟΥΡΓΙΑ ΒΑΣΗΣ ΔΕΔΟΜΕΝΩΝ

Πριν την εγκατάσταση του Joomla πρέπει να δημιουργήσουμε μια βάση δεδομένων

MySql .

Στην αρχική σελίδα του “phpMyadmin” όπως φαίνεται παρακάτω πληκτρολογούμε στο

κουτάκι ‘Δημιουργία Βάσης’ το όνομα που θέλουμε για την βάση και μετά ‘δημιουργία’

.

Page 36: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

36

Εικόνα 3.8 Βάση Δεδομένων PhpMyAdmin

3.2 ΕΓΚΑΤΑΣΤΑΣΗ JOOMLA

Την τελευταία έκδοση του Joomla την κατεβάζουμε στο http://www.joomla.org/.

Στην συγκεκριμένη πτυχιακή χρησιμοποιήθηκε η version 1.7.0 .Μετά την λήψη του

αρχείου ,το αποσυμπιέζουμε και το αντιγράφουμε σε συγκεκριμένο φάκελο

χρησιμοποιώντας την διεύθυνση στον browser .

Βήμα 1ο :Επιλέγουμε την γλώσσα που θα χρησιμοποιήσουμε στην εγκατάσταση

.Ελληνικά .

Page 37: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

37

Εικόνα 3.9 Επιλογή Γλώσσας Κειμένου Εγκατάστασης Joomla

Βήμα 2ο : Ελέγχεται εάν κάποιο από τα στοιχεία δεν υποστηρίζεται (σημειώνεται ως Όχι)

Εικόνα 3.10 Προληπτικός Έλεγχος Εγκατάστασης Joomla

Page 38: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

38

Βήμα 3ο :Εμφανίζεται η Άδεια Χρήσης του Joomla και πατάμε επόμενο .

Εικόνα 3.11 Όροι Άδειας Χρήσης Εγκατάστασης Joomla

Βήμα 4ο : Εισάγουμε τις ρυθμίσεις της βάσης δεδομένων που έχουμε δημιουργήσει. Το

είδος της Βάσης , στην περίπτωση μας είναι MySQL, το όνομα του διακοσμητή:

localhost και όνομα χρήστη: root , τον κωδικό (μπορούμε να μην το συμπληρώσουμε –

δεν είναι υποχρεωτικό πεδίο ) ,όνομα βάσης δεδομένων: joomla_site και πρόθεμα πίνακα

(αν δεν είναι προεπιλογή) πληκτρολογούμε: b8qjw_ .

Page 39: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

39

Εικόνα 3.12 Εισαγωγή Ρυθμίσεων Βάσης Δεδομένων Εγκατάστασης Joomla

Βήμα 5ο : Εισάγουμε της ρυθμίσεις FTP ,το αφήνουμε ως έχει και πατάμε επόμενο(όπως

αναφέρεται με κόκκινα γράμματα) .

Page 40: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

40

Εικόνα 3.13 Εισαγωγή Ρυθμίσεων FTP Εγκατάστασης Joomla

Βήμα 6ο : Αποθηκεύουμε ‘όνομα ιστότοπου’ ,’ηλεκτρονική διεύθυνση ταχυδρομείου’

και κωδικό πρόσβασης .(όνομα χρήστη :admin για λόγους ευκολίας ).

Page 41: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

41

Εικόνα 3.14 Εισαγωγή Βασικών Ρυθμίσεων Ιστοτόπου Εγκατάστασης Joomla

Βήμα 7ο :Μας ενημερώνει το joomla πως η εγκατάσταση έγινε με επιτυχία .Το μόνο που

μένει είναι να διαγράψουμε το φάκελο installation .

Page 42: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

42

Εικόνα 3.15 Τελευταίο Στάδιο Εγκατάστασης Joomla

3.3 ΔΙΑΧΕΙΡΙΣΗ ΠΕΡΙΕΧΟΜΕΝΟΥ JOOMLA Ανοίγουμε τον browser μας και πληκτρολογούμε http://127.0.0.1/administrator/

Page 43: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

43

Εικόνα 3.16 Login Joomla

Κάνουμε Login και μας εμφανίζεται το Control Panel ,όπου σε αυτό το σημείο έχουμε κάποιες

επιλογές που φαίνονται με κουτάκια στην Εικόνα 3.3.2 .Με βάση αυτά το Joomla μας προσφέρει

κάποιες από τις δυνατότητες του τις οποίες μπορούμε να χρησιμοποιήσουμε άμεσα ή έμμεσα από

την μπάρα κάτω από το Administration .Μερικές από αυτές είναι :Δημιουργία Νέου Άρθρου

,Διαχείριση Άρθρου ,Διαχείριση User κοκ .

Εικόνα 3.17 Κεντρικές Επιλογές Διαχείρισης Joomla

3.3.1 ΕΓΚΑΤΑΣΤΑΣΗ ΠΡΟΤΥΠΟΥ

Με βάση την εικόνα 3.17 παραπάνω (Control Panel) ,θα πρέπει πρώτα να κάνουμε upload &

install το template αφού το έχουμε σε μορφή .zip ή .rar στον υπολογιστή μας .Ακολουθούμε την

εξής διαδικασία και επιλέγουμε ExtensionExtension Managerαναζήτηση .Αφού βρούμε και

επιλέξουμε το αρχείο πατάμε upload & install όπως φαίνεται και στην εικόνα 3.18 :

Page 44: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

44

Εικόνα 3.18 Εγκατάσταση Προτύπου Joomla

3.4 ΑΡΘΡΑ

Τα άρθρα αποτελούν σημαντικό κομμάτι αυτής της ιστοσελίδας αφού ένα σημαντικό κομμάτι

βασίζεται σε σύστημα διαχείρισης περιεχομένου.

3.4.1 ΔΗΜΙΟΥΡΓΙΑ ΑΡΘΡΟΥ

Για να δημιουργήσουμε ένα νέο άρθρο πηγαίνουμε

Content Article Manager Add New Article

Εκεί υπάρχουνε διάφορα πεδία τα οποία άλλα πρέπει υποχρεωτικά να συμπληρωθούν (*) και

άλλα τα οποία δεν είναι υποχρεωτικά .Υπάρχει το Article Text όπου εκεί γράφουμε το άρθρο .

Το Status που μας δίνει την δυνατότητα αν θέλουμε το άρθρο να είναι εμφανίσιμο ή όχι .

Ακολούθως το πεδίο Text ,που εκεί γράφεις το κείμενο το οποίο θα συμπεριληφθεί στο Article

.(όπως φαίνονται και με κόκκινη σήμανση στην παρακάτω φωτογραφία .

Page 45: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

45

Εικόνα 3.19 Δημιουργία Άρθρου

3.4.2 ΠΡΟΣΘΗΚΗ ΦΩΤΟΓΡΑΦΙΩΝ ΣΕ ΑΡΘΡΟ

Για να προσθέσουμε κάποια εικόνα στο Άρθρο μας πηγαίνουμε στο πεδίο Article Text και κάτω

αριστερά έχει μια επιλογή Image .

Επιλέγουμε Image και εμφανίζεται :

Page 46: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

46

Εικόνα 3.20 Αποθήκευση φωτογραφιών Στο Joomla

Στο πλαίσιο «Αναζήτηση ...» ψάχνουμε την εικόνα μέσα από τον υπολογιστή μας .Έπειτα πατάμε

Ok Start Upload .Όταν η εικόνα αποθηκευτεί ,στο πάνω μέρος του παραθύρου εμφανίζεται:

Α. Το Directory ,δηλαδή ο προορισμός που αποθηκεύτηκε η εικόνα μέσα στον υπολογιστή

(Σκληρό Δίσκο) και

Β. Μήνυμα που μας ενημερώνει πως το Upload έγινε επιτυχώς .

Ύστερα επιλέγουμε την εικόνα και πατάμε Insert .

Η εικόνα έχει προστεθεί στο πλαίσιο κειμένου του Joomla .

3.5 ΜΕΝΟΥ

Τα Menus αποτελούν τον οδηγό πλοήγησης των επισκεπτών της ιστοσελίδας ,και μέσω του

joomla επεξεργαζόμαστε εύκολα και γρήγορα τα στοιχεία που εμπεριέχουν .

3.5.1 ΔΗΜΙΟΥΡΓΙΑ ΜΕΝΟΥ

Πέρα από τα 3(τρία) σε αριθμό κλασσικά Menus που μας προσφέρει το Joomla

User Menu

Top

Main Menu

Μας δίνει την δυνατότητα να δημιουργήσουμε δικά μας απλά και γρήγορα .

Επιλέγουμε τον παρακάτω προορισμό στο CPanel :

Page 47: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

47

Menus Menu Manager Add New Menu

Εικόνα 3.21 Δημιουργία Νέου Μενού

Στην παραπάνω εικόνα υπάρχουν μερικά Υποχρεωτικά Πεδία τα οποία πρέπει να συμπληρωθούν

και είναι :

1. Title : Δηλαδή ο τίτλος-όνομα του Menu που θα δημιουργήσουμε και

2. Menu Type : Τον τύπο των αρχείων που θα δημοσιεύονται στην σελίδα μας

3.5.2 Αντιστοίχηση Μενού – Άρθρου

Κάθε Μενού για να έχει περιεχόμενο θα πρέπει να ενώνεται με ένα άρθρο .Δηλαδή αφού

δημιουργήσουμε τα άρθρα θα πρέπει να τα κατατάξουμε στα μενού, γενικότερα που θα

εμφανίζονται στην Ιστοσελίδα μας .Αρχικά επιλέγουμε Menu Menu Manager ,εκεί

βλέπουμε όλα τα είδη μενού που υπάρχουν τα οποία είναι έτοιμα από το Joomla .Βλέπε

εικόνα 3.22 :

Page 48: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

48

Εικόνα 3.22 Διαχείριση Προεπιλεγμένων Μενού Joomla

Σημείωση: Σε περίπτωση που θέλουμε να δημιουργήσουμε καινούριο Μενού πατάμε

πάνω δεξιά New .Αν θέλουμε να διορθώσουμε ή ακόμα και να αλλάξουμε κάτι από τα

προϋπάρχοντα Μενού μπορούμε να τα τσεκάρουμε και να πατήσουμε Edit .

Στις ήδη υπάρχουσες στήλες Published ,Unpublished οι αριθμοί μας περιγράφουν πόσα

Άρθρα έχουν επιλεχθεί να είναι δημοσιευμένα και πόσα όχι .Για παράδειγμα επιλέγουμε

το Top Menu ,που σύμφωνα με την Εικόνα 3.22 έχει 5 δημοσιευμένα και 5 Μη

δημοσιευμένα Άρθρα .Επιλέγουμε Top με δεξί κλικ ,βλέπε Εικόνα 3.23 :

Page 49: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

49

Εικόνα 3.23 Λίστα Υπό Μενού – Top Menu

Σημείωση :Με πράσινο πλαίσιο σημειώνονται τα κουτάκια που θα πρέπει να επιλέξουμε

για να πραγματοποιήσουμε τις δυνατότης τες του Joomla πάνω δεξιά .Στο στάτους με το

κόκκινο βελάκι φαίνεται ποια υπό μενού είναι δημοσιευμένα και ποια όχι .Τσεκάροντας

τα Μενού πατώντας το Publish ή Unpublish σημειώνεται στο status πράσινο ή κόκκινο

σημαδάκι .Αυτή η ενέργεια μας δίνει την δυνατότητα να εμφανίζονται ή όχι σε

διαφορετικά χρονικά διαστήματα τα υπό μενού .Η κλειδαριά δείχνει ποιο από τα μενού

χρησιμοποιήθηκε πρόσφατα .

Επιλέγουμε ένα από τα Μενού (πράσινο πλαίσιο Εικόνα 3.23) ,πατάμε Edit .Μας

εμφανίζεται ένα περιβάλλον οποίο μας δίνονται κάποιες δυνατότητες .Βλέπε Εικόνα

3.24 :

Page 50: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

50

Εικόνα 3.24 Ενσωμάτωση Άρθρου σε Μενού

Σύμφωνα με την Εικόνα 3.24 :πάνω αριστερά μέσα στην φόρμα Details ,εμφανίζεται το

Menu Item Type .Στην επιλογή Select μπορούμε να επιλέξουμε την μορφή του Άρθρου

που έχουμε δημιουργήσει ( Single Article ,Category Blog ,Archived Article κοκ) ή

ακόμα και κάτι άλλο πέρα από αυτό που αναφέρουμε (Web Links ,User Manager κοκ)

.Δεξιά μέσα στην φόρμα στο κόκκινο πλαίσιο Select / Charge ,διαλέγουμε το

συγκεκριμένο άρθρο που θέλουμε να αντιστοιχεί με το Μενού .Τέλος Save & Close .

3.6 MODULE MANAGER

Το Module Manager μας βοηθάει στο να ορίσουμε τις Position των Menu .

Πληκτρολογώντας το παρακάτω Link : http://127.0.0.1/?tp=1 εμφανίζεται στο

Background η ιστοσελίδα μας και με αχνά γκρι πλαίσια τα position ,οι θέσεις δηλαδή

,όπου θα ορισθούν τα Menus .Βλέπε Εικόνα 3.25

Page 51: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

51

Εικόνα 3.25 Θέσεις Μενού Ιστοσελίδας

Συγκεκριμένα το Top Menu που αποτελείτε από διάφορα Items όπως Ιστορικό

,Δραστηριότητες κοκ βρίσκεται στο User3 Position του Website .

Με βάση το Module Manager μπορούμε να αλλάξουμε την θέση του και να το βάλουμε

όπου θέλουμε εμείς.

Extensions Module Manager .

Στο Module Manager στο πεδίο Filter : γράφουμε Top και πατάμε Search (το ίδιο γίνεται

για οποιοδήποτε άλλο Menu θέλουμε )

Από τα αποτελέσματα τσεκάρουμε το Top και Edit .

Page 52: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

52

Εικόνα 3.26 Αναζήτηση Μενού στο Module Manager

Στο υποχρεωτικό πεδίο Position και με βάση το Link με την κατάληξη «?tp=1» Select

Position επιλέγουμε την θέση που θα βάλουμε το συγκεκριμένο Menu .Βλέπε εικόνα

3.27 :

Page 53: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

53

Εικόνα 3.27 Επιλογή Position Μενού

Σημείωση : Στις συγκεκριμένες θέσεις μπορούν να μεταφερθούν ότι περιέχει η λίστα

των Modules .Όχι απαραίτητα μόνο Μενού .

Page 54: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

54

ΚΕΦΑΛΑΙΟ 4 ΜΕΤΑΦΟΡΑ ΕΓΚΑΤΑΣΤΑΣΗΣ ΑΠΟ ΤΟΠΙΚΟ ΣΕ

ΑΠΟΜΑΚΡΥΣΜΕΝΟ SERVER.

Για να μεταφέρουμε την ιστοσελίδα Joomla που μόλις δημιουργήσαμε από τον τοπικό σε

απομακρυσμένο server θα πρέπει να ακολουθήσουμε μερικά απλά βήματα ,τα οποία

είναι ίδια (με μικρές διαφορές) σε οποιοδήποτε server επιθυμούμε να τα ανεβάσουμε

.Αρχικά κρατάμε ένα αντίγραφο ασφαλείας των αρχείων Joomla καθώς και των αρχείων

της βάσης μας MySQL .

Επιλέγουμε τον απομακρυσμένο server αναλόγως με αυτά που προσφέρει και με αυτά

που χρειαζόμαστε για να μπορέσει η σελίδα μας να είναι up .Ένας server ο οποίος είναι

free και τον προτίμησα και εγώ είναι ο ακολούθως : http://www.000webhost.com/ .Το

μόνο που χρειάζεται όπως και σε όλους τους server είναι να δημιουργήσουμε ένα

account βάζοντας ένα email και έναν προσωπικό κωδικό .

Επίσης μας δίνει την ευκαιρία αν δεν έχουμε κάποιο domain name να βάλουμε κάποιο

δικό μας προσωρινά με κατάληξη του site ,όπως φαίνεται και στην ιστοσελίδα που

αναφέρθηκε παραπάνω .

4.1 Configuration.php

Το συγκεκριμένο αρχείο έχει τα στοιχεία εκείνα που θα μας δώσουν την δυνατότητα να

συνδεθούμε με τον απομακρυσμένο server .Αυτό μπορούμε να το βρούμε μέσα στο

φάκελο htdocs που βρίσκεταιστο φάκελο xampplite .

Το μόνο που μένει είναι να ανοίξουμε το αρχείο με Notepad ή με κάποιον άλλον

επεξεργαστή κειμένου και να αλλάξουμε 5 στοιχεία εντός αυτού .Αναλυτικότερα Βλέπε

Εικόνα 4.1 :

Page 55: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

55

Εικόνα 4.1 Αλλαγή Παραμέτρων configuration.php

Σημείωση :Στο κάτω μέρος του αρχείου υπάρχουν και οι δύο γραμμές που τονίστηκαν

με κόκκινα γράμματα.

Ουσιαστικά οι 5 παράμετροι που πρέπει να αλλαχθούν αναλυτικά είναι :

var $log_path = '/home/account_name/public_html/logs';

var $tmp_path = '/home/account_name/public_html/tmp';

var $user = 'όνομα user της βάσης σας';

var $db = 'όνομα της mysql βάσης σας';

var $password = 'το password της βάσης σας';

Σημείωση :Το όνομα user & mysql καθώς και το password της βάσης εμφανίζονται

όταν δημιουργήσετε την δική σας βάση στο server .Αρχικά δημιουργούμε την βάση

δεδομένων και μετά αλλάζουμε τις παραμέτρους .

Page 56: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

56

4.2 Αντιγραφή Αρχείων

Για το upload των αρχείων της τοπικής μας βάσης δεδομένων σε αυτή του

απομακρυσμένου Server χρησιμοποιήσαμε μια γνωστή FTP εφαρμογή : «Filezilla» όπου

την κατεβάσαμε από το link http://filezilla-project.org/download.php .

Αφού έχουμε κάνει τις απαραίτητες αλλαγές στο configuration.php μεταφέρoυμε τα

αρχεία μέσω του συγκεκριμένου προγράμματος .Βλέπε Εικόνα 4.2:

Εικόνα 4.2 Μεταφορά Αρχείων Μέσω Filezilla

Στην παραπάνω εικόνα στους αριθμούς 1 ,2 ,3 συμπληρώνονται από τα details του server

που βρίσκονται στο CPanel .Με μπλε σκίαση είναι ο φάκελος htdocs ,βρίσκουμε την

διαδρομή του στον υπολογιστή και το σέρνουμε στο κουτάκι που δείχνει το βελάκι στην

εικόνα .

Αφού όλα τα πεδία έχουν συμπληρωθεί «Γρήγορη Σύνδεση» .Ο χρόνος είναι ανάλογος

με τα αρχεία που πρέπει να μεταφερθούν .

Page 57: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

57

4.3 Export-Import mysql

Όπως τα αρχεία έτσι και η βάση δεδομένων αντιγράφηκε και μεταφέρθηκε σε μια

αντίστοιχη στο internet .

Επομένως έγινε εξαγωγή τοπικά και εισαγωγή στον server .Βλέπε εικόνα 4.3 & 4.4 .

Εικόνα 4.3 Εξαγωγή Τοπικής Βάσης Δεδομένων

Σημείωση :Στο κυκλικό περίγραμμα επιλέγουμε την βάση δεδομένων μου που έχουμε

ορίσει για την συγκεκριμένη ιστοσελίδα.

Στη συνέχεια με το email & password ,κάνουμε login στην σελίδα όπου βρίσκεται ο

server .Ύστερα ψάχνουμε την βάση δεδομένων που έχουμε δημιουργήσει στο server και

επιλέγουμε “Enter PhpMyAdmin” .Εμφανίζεται νέο παράθυρο όπου κάνουμε Import την

βάση δεδομένων που είχαμε κάνει εξαγωγή τοπικά .Βλέπε εικόνα 4.4 :

Page 58: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

58

Εικόνα 4.4 Εισαγωγή Τοπικής βάσης δεδομένων σε απομακρυσμένο σερβερ

Σημείωση :Στην επιλογή «Αναζήτηση» ,ψάχνουμε το αρχείο και μετά πατάμε «GO» .

4.4 Κατοχύρωση Ονόματος Ιστοσελίδας

Κάθε Ιστοσελίδα θα πρέπει να έχει το δικό της όνομα που αυτό χαρακτηρίζει πολλές

φορές το αντικείμενο αυτής .Έτσι σε επικοινωνία με την διευθύντρια του ιδρύματος

‘Αγία Μαρίνα’ ,συζητήθηκε ύστερα από προτεινόμενα ονόματα το τελικό Domain Name

που θα ήθελαν να έχει η σελίδα τους .Καταλληλότερο από αυτά ήταν agia-marina.gr το

οποίο καταχωρήθηκε μέσω ενός πάροχου Domain Names .

4.4.1 Μεταφορά Ονόματος Ιστοσελίδας

Για την μεταφορά θα χρειαστούμε name servers από την host για να τα τοποθετήσει στο

CPanel του ονόματος που κατοχύρήθηκαν στο προηγούμενο βήμα .Βλέπε Εικόνα 4.5 :

Page 59: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

59

Εικόνα 4.5 Μεταφορά Ονομάτων στην Ιστοσελίδα

Σημείωση :Στις κόκκινες γραμμές πληκτρολογούμε τα name servers από το CPanel που

θα βρούμε στο server μας και μετά ‘αλλαγή Name Servers’ στο πορτοκαλί πλαίσιο .

Page 60: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

60

Βιβλιογραφία

Πηγές στο διαδίκτυο

http://www2.uth.gr/main/help/help-desk/internet/internet2.html

http://el.wikipedia.org/wiki/%CE%94%CE%B9%CE%B1%CE%B4%CE%AF%CE%BA%CF%

84%CF%85%CE%BF

http://www.ato.gov.au/corporate/PrintFriendly.aspx?ms=corporate&doc=/content/00274017.html

http://www.ato.gov.au/corporate/PrintFriendly.aspx?ms=corporate&doc=/content/00274017.html

http://www.webmasterslife.gr/joomla-cms/55-%CE%A4%CE%B9-

%CE%B5%CE%AF%CE%BD%CE%B1%CE%B9-%CF%84%CE%BF-joomla.html

http://www.netapproach.gr/index.php?option=com_content&view=article&id=67&Itemid=92

http://nefeli.lib.teicrete.gr/browse/stef/epp/2011/KyriakosHlias/attached-document-1310461382-

916290-10325/kyriakos2011.pdf

http://nefeli.lib.teicrete.gr/browse/stef/epp/2011/KyriakosHlias/attached-document-1310461382-

916290-10325/kyriakos2011.pdf

http://joomla.gr/about-joomla

http://el.wikipedia.org/wiki/Drupal

http://www.freestuff.gr/forums/viewtopic.php?t=18943

http://www.isites.gr/clients/knowledgebase/19/---MySQL--.html

http://www.webvistas.org/topic/451-%CF%84%CE%AF-

%CE%B5%CE%AF%CE%BD%CE%B1%CE%B9-%CE%BF%CE%B9-web-servers/

http://mytwocents.gr/apache-web-server/#.T9OSWFJIHos

http://www.gnu.org/philosophy/free-sw.el.html

http://www.papaki.gr/qa/%CF%84%CE%B9-

%CE%B5%CE%AF%CE%BD%CE%B1%CE%B9-domain-name.htm

http://www.utopiaengineering.com/stoixeia-istoselidas/statikes-selides

http://www.vdimitris.gr/mysql.php?seo=24

http://www.bloggertips.gr/2011/03/blog-post_05.html

http://el.wikipedia.org/wiki/WorldWideWeb

Page 61: (Development of a website for the Agia Marina foundation ...digilib.teiemt.gr/jspui/bitstream/123456789/2362/1/022012196.pdf · ,εκπαίδευση παιδιών). 1.3 ΦΙΛΑΝΘΡΩΠΙΚΟΙ

61