ΔΠΜΣ «Επιστήμες της Αγωγής μέσω Καινοτόμων Τεχνολογιών και Βιοϊατρικών Προσεγγίσεων» Εισαγωγή στην Εκπαιδευτική Τεχνολογία (ΕΡΓ)

Ανάπτυξη ιστότοπων µε εργαλεία Web 2.0

1. Εισαγωγή
Στο -όχι πολύ μακρινό- παρελθόν, η δημιουργία περιεχομένου για τον Ιστό και η δημοσίευσή του δεν
ήταν ιδιαίτερα απλές διαδικασίες. Στα μέσα της δεκαετίας του 1990 και για μία δεκαετία περίπου, την
εποχή δηλαδή του ”Web 1.0” (the “read”
web), για να παράγει κανείς ιστοσελίδες, θα
έπρεπε να διαθέτει γνώσεις HTML και
προγραμματισμού, να έχει την ικανότητα να
σχεδιάζει γραφικά, να διαθέτει έναν server
για τη φιλοξενία των ιστοσελίδων και να έχει
φροντίσει για μια μέθοδο να προσελκύσει
επισκέπτες στον ιστότοπο.

https://blockgeeks.com/guides/web-3-0/ Από τα μέσα της δεκαετίας του 2000, την

εποχή του επονομαζόμενου ”Web 2.0” (the
“read/write” web), η δημιουργία online περιεχομένου έχει απλουστευθεί, δίνοντας τη δυνατότητα στους
χρήστες να εστιάζουν σε ιδέες και δημιουργικότητα παρά σε τεχνικά θέματα. Στα λεγόμενα Web 2.0
εργαλεία ανήκει πληθώρα εφαρμογών με ποικίλους σκοπούς: από ιστολόγια και wikis, μέχρι εφαρμογές
διαμοιρασμού και κοινωνικής δικτύωσης.

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

1.

Μ. Μουντρίδου [19-11-2022] 1/5

ΔΠΜΣ «Επιστήμες της Αγωγής μέσω Καινοτόμων Τεχνολογιών και Βιοϊατρικών Προσεγγίσεων» Εισαγωγή στην Εκπαιδευτική Τεχνολογία (ΕΡΓ)

Μερικές από τις πιο γνωστές

Web 2.0 Εφαρμογές Ανάπτυξης Ιστοσελίδων/Ιστότοπων

Επιτρέπει τη συνεργατική δημιουργία ενός ιστότοπου (με την ίδια λογική που διέπει τη
συνεργατική δημιουργία εγγράφων). Το στοιχείο που ίσως κάνει τα Google Sites να
υπερέχουν έναντι άλλων εργαλείων είναι η δυνατότητα εύκολης ενοποίησης των
υπηρεσιών που παρέχει η Google, ενσωματώνοντας προϊόντα αυτών των υπηρεσιών
στις ιστοσελίδες (π.χ., υπολογιστικά φύλλα, παρουσιάσεις και άλλους τύπους εγγράφων του Google
Drive, ημερολόγια, χάρτες, κλπ). Επίσης, είναι σημαντικό ότι η εν λόγω υπηρεσία της Google
απευθύνεται τόσο στον αρχάριο χρήστη που θέλει να δημιουργήσει μια τυπική μορφή ιστότοπου
χρησιμοποιώντας τις βασικές δυνατότητες, όσο και στον πιο προχωρημένο που θα αξιοποιήσει το
σχετικά «ανοιχτό» περιβάλλον της υπηρεσίας για να δημιουργήσει έναν ιστότοπο προσαρμοσμένο στις
δικές του ανάγκες και απαιτήσεις.

" https://sites.google.com/ s https://support.google.com/sites/?hl=en - topic=1689606

Το Weebly είναι ένα ιδιαίτερα δημοφιλές online εργαλείο δημιουργίας ιστότοπων.

Διακρίνεται για την ευχρηστία του και την αρκετά «επαγγελματική» εμφάνιση των
προϊόντων (ιστότοπων) που μπορεί να παράγει ο χρήστης, χωρίς να χρειάζεται να
διαθέτει τεχνικές γνώσεις. Τα στοιχεία περιεχομένου (όπως κείμενο, εικόνες, βίντεο, κ.ά.)
προστίθενται στην ιστοσελίδα απλώς με drag & drop. Σημαντικό προσόν της συγκεκριμένης υπηρεσίας
(δεδομένου ότι παρέχεται δωρεάν) είναι η πλήρης απουσία διαφημίσεων.

" http://www.weebly.com/ s https://www.weebly.com/app/help/us/en/topics/first-steps

Το WiX είναι ένα ακόμη δημοφιλές online εργαλείο δημιουργίας ιστότοπων που μοιάζει
αρκετά ως προς τις δυνατότητες και τον τρόπο χρήσης και λειτουργίας του με το Weebly.
Μια επιπλέον δυνατότητα που προσφέρει είναι αυτή της ενσωμάτωσης στις ιστοσελίδες συγκεκριμένων
εφαρμογών (apps) και υπηρεσιών (π.χ. έγγραφα από το Google Drive, τροφοδοσίες από κοινωνικά
δίκτυα ή ιστολόγια, κ.ά.)

" http://www.wix.com/ s https://support.wix.com/en/

Μ. Μουντρίδου [19-11-2022] 2/5

ΔΠΜΣ «Επιστήμες της Αγωγής μέσω Καινοτόμων Τεχνολογιών και Βιοϊατρικών Προσεγγίσεων» Εισαγωγή στην Εκπαιδευτική Τεχνολογία (ΕΡΓ)

2. Η πλατφόρμα του Weebly

Όπως προαναφέρθηκε, το Weebly είναι ένα πολύ διαδεδομένο online εργαλείο δημιουργίας
ιστοσελίδων/ιστότοπων. Είναι ιδιαίτερα εύχρηστο καθώς απευθύνεται και σε χρήστες που μπορεί να
μην διαθέτουν τεχνικές γνώσεις, ενώ παράλληλα οι παραγόμενοι μέσω αυτού ιστότοποι έχουν αρκετά
«επαγγελματική» εμφάνιση.

§ Διαθέτει πληθώρα έτοιμων θεμάτων/προτύπων από τα οποία ο χρήστης μπορεί να επιλέξει εκείνο
στο οποίο θα «βασιστεί» ο ιστότοπος που κατασκευάζει.

§ Τα στοιχεία περιεχομένου (όπως κείμενο, εικόνες, βίντεο, κ.ά.) προστίθενται στην υπό κατασκευή
ιστοσελίδα απλώς με drag & drop.

§ Υπάρχουν διάφορα στοιχεία –πέρα από τα τυπικά– που μπορούν να εισαχθούν σε μια ιστοσελίδα:
gallery εικόνων, χάρτες, φόρμα επικοινωνίας, αρχεία οποιουδήποτε τύπου προς «κατέβασμα»,
κώδικας html για ενσωμάτωση αντικειμένων, social icons, φόρμα έρευνας, κλπ. Επίσης, ο χρήστης
μπορεί να «συνδέσει» επιπλέον εφαρμογές (apps) προς χρήση/εισαγωγή στις ιστοσελίδες του.

§ Οι ιστοσελίδες μπορούν να μετονομαστούν, να διαγραφούν, να προστεθούν νέες, να αλλάξει η θέση

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

§ Επιπλέον, πέρα από τις τυπικές ιστοσελίδες (standard page) μπορεί να εισαχθεί σε έναν ιστότοπο και
σελίδα τύπου ιστολογίου (blog), ώστε να παρέχεται ένας χώρος επικοινωνίας/διαλόγου με τους
επισκέπτες του ιστότοπου.

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

§ Μετά την κατασκευή του, ο ιστότοπος μπορεί να δημοσιευθεί είτε σε domain που διαθέτει (έχει
αγοράσει) ο χρήστης, είτε δωρεάν σε subdomain του Weebly.

Μερικά (ενδεικτικά) χρήσιμα video-tutorials για το Weebly:

…για τα «βασικά»:

- Weebly Tutorial for Beginners 2022 | How to build… - https://youtu.be/f8Jgp45wu2s

- Weebly Tutorial 2019 - Create a free website - https://youtu.be/RYEWfdDUqbE

…για πιο «προχωρημένα»:

- Weebly Tutorial: How To Add A Preloader To Your Weebly Site - https://youtu.be/1v3RhNK1-Ok

- Add Multiple Languages to your Weebly website in 2019 - https://youtu.be/kFwJDwJrpvw

- Auto Popup Weebly App Tutorial - https://youtu.be/w1DjpAQW80Q

Μ. Μουντρίδου [19-11-2022] 3/5

ΔΠΜΣ «Επιστήμες της Αγωγής μέσω Καινοτόμων Τεχνολογιών και Βιοϊατρικών Προσεγγίσεων» Εισαγωγή στην Εκπαιδευτική Τεχνολογία (ΕΡΓ)

Φύλλο εργασίας: “Δοκιµάζοντας το Weebly”

1. Μεταβείτε στη διεύθυνση: https://www.weebly.com/

2. Δημιουργήστε λογαριασμό στην πλατφόρμα (Sign Up) ή κάνετε απευθείας είσοδο (Log In)
χρησιμοποιώντας τον Facebook ή Google λογαριασμό σας.

3. Ξεκινήστε τη δημιουργία ενός νέου website και επιλέξτε το “I just need a website”

4. Επιλέξτε «θέμα» για τον ιστότοπό σας:

- Προτείνεται από την κατηγορία Personal, να επιλέξετε το

OUR STORY.

- Θα δείτε το θέμα σε προεπισκόπηση.

- Πατήστε πάνω δεξιά

5. Εμφανίζεται ένα παράθυρο που σας προτρέπει να διαλέξετε domain στο οποίο θα δημοσιευθεί ο
ιστότοπός σας. Πατήστε x για να κλείσετε το παράθυρο αυτό (θα κάνετε αυτή την ενέργεια
αργότερα). Τώρα βρίσκεστε στο περιβάλλον επεξεργασίας του ιστότοπού σας.

Διαμόρφωση της δομής (των σελίδων) του ιστότοπου

6. Στην πάνω οριζόντια γραμμή επιλογών:

επιλέξτε το Pages. Αριστερά, κάθετα, εμφανίζονται οι σελίδες που περιλαμβάνει το ‘θέμα’ που
επιλέξατε. Εκεί μπορείτε να διαμορφώσετε τη δομή του ιστότοπού σας (προσθήκη/διαγραφή/
οργάνωση/μετονομασία σελίδων), καθώς και να αλλάξετε τα χαρακτηριστικά καθεμιάς από τις
σελίδες (Header type – τύπος κεφαλίδας/ Visibility – ορατότητα/ SEO Settings – βελτιστοποίηση για
τις μηχανές αναζήτησης). Εργαστείτε εδώ με στόχο να καταλήξετε σε αυτό:

Επισημάνσεις:

- Η ΑΡΧΙΚΗ σελίδα στο Header type να οριστεί με “Header”, οι υπόλοιπες

“No header”

- Η σελίδα ΧΩΡΟΣ ΣΥΖΗΤΗΣΗΣ να είναι τύπου Blog (θα πρέπει να εισάγετε

μια νέα σελίδα και να επιλέξετε να είναι τύπου Blog και όχι Standard page)

Διαμόρφωση του θέματος του ιστότοπου

7. Στην πάνω οριζόντια γραμμή επιλογών:

επιλέξτε το Theme. Αριστερά, κάθετα, εμφανίζονται χρωματικοί συνδυασμοί που μπορείτε να
επιλέξετε, δίνεται η δυνατότητα αλλαγής του θέματος (Change Theme), καθώς και η δυνατότητα
αλλαγής γραμματοσειρών (Change Fonts). Η τελευταία επιλογή σας είναι ιδιαιτέρως χρήσιμη αν
παρατηρήσετε ότι σε κάποιο πεδίο των σελίδων σας δεν υποστηρίζονται οι ελληνικοί χαρακτήρες.
Προς το παρόν, δεν χρειάζεται να κάνετε κάποια αλλαγή εδώ.

Μ. Μουντρίδου [19-11-2022] 4/5

ΔΠΜΣ «Επιστήμες της Αγωγής μέσω Καινοτόμων Τεχνολογιών και Βιοϊατρικών Προσεγγίσεων» Εισαγωγή στην Εκπαιδευτική Τεχνολογία (ΕΡΓ)

Ρυθμίσεις για τον ιστότοπο

8. Στην πάνω οριζόντια γραμμή επιλογών:

επιλέξτε το Settings. Εδώ μπορείτε να κάνετε διάφορες ρυθμίσεις για τον ιστότοπό σας.

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

- Στο General: Πατήστε Change στο Site Address για να ορίσετε τη διεύθυνση
στην οποία θα δημοσιευθεί ο ιστότοπός σας. Αναζητήστε μια διεύθυνση που
θα δείτε ότι είναι διαθέσιμη ως subdomain και όταν τη βρείτε, πατήστε
Choose.

- Στο Editors: Πατήστε Add Editor για να προσκαλέσετε έναν συμφοιτητή σας
να συνεπεξεργαστείτε τον ιστότοπό σας.

Επεξεργασία των σελίδων του ιστότοπου

9. Στην πάνω οριζόντια γραμμή επιλογών:

επιλέξτε το Build για να επεξεργαστείτε καθεμία από τις σελίδες σας.

Γενικές οδηγίες:

- Πατάτε στο όνομα της σελίδας που θέλετε να επεξεργαστείτε από το μενού πλοήγησης που
υπάρχει μέσα σε κάθε σελίδα. Βεβαιωθείτε ότι είστε στη σελίδα που
επιθυμείτε!!
- Για να αλλάξετε στοιχεία που υπάρχουν ήδη από το ‘θέμα’, πατάτε πάνω
στο στοιχείο αυτό και είτε το διαγράφετε (με το x στην πάνω δεξιά γωνία
του στοιχείου), είτε το τροποποιείτε σύμφωνα με τις διαθέσιμες επιλογές
που διατίθενται.
- Εισάγετε αντικείμενα στις σελίδες στο Weebly με drag & drop από την
εργαλειοθήκη στοιχείων (elements) που υπάρχει αριστερά, μέσα στη
σελίδα, στο κατάλληλο σημείο.
- Όταν έχετε εισάγει ένα πλαίσιο κειμένου και γράφετε μέσα σε αυτό,
εμφανίζεται πάνω μια γραμμή εργαλείων για τη μορφοποίηση του κειμένου,
την εισαγωγή υπερσυνδέσμων, κλπ.
- Τα στοιχεία που έχουν επισήμανση έναν κίτρινο κεραυνό, δεν είναι
διαθέσιμα στη δωρεάν έκδοση του Weebly.

10. Επεξεργαστείτε καθεμία από τις σελίδες του ιστότοπού σας και πειραματιστείτε με τα διαθέσιμα
στοιχεία (elements) που μπορείτε να εισάγετε…

Δημοσίευση του ιστότοπου

11. Δημοσιεύστε τον ιστότοπό σας (κουμπί Publish πάνω δεξιά)!

Μοιραστείτε τον µε την οµάδα!

(αντιγράψτε τη διεύθυνσή του και επικολλήστε την στο chat του TEAMS)

Μ. Μουντρίδου [19-11-2022] 5/5