Εγχειρίδιο Σύνταξης Βικικειμένου
για την πλατφόρμα Open eClass

«Άρχισε να γράφεις σε 10 λεπτά!»

Μαυρίδης Φίλιππος

25 Οκτωβρίου 2021

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

  1. Απλή μορφοποίηση
    1. Απλό κείμενο
    2. Κείμενο σε εισαγωγικά
    3. Μορφοποίηση κειμένου
    4. Χρώμα κειμένου
    5. Κεφαλίδες
    6. Οριζόντια γραμμή
    7. Άδεια γραμμή
  2. Παραθέσεις και λίστες
    1. Παράθεση λόγου
    2. Παράθεση κειμένου
    3. Λίστες
  3. Σελίδες και υπερσύνδεσμοι
    1. Σελίδα
    2. Σύνδεσμος
    3. Εικόνα
  4. Πίνακες
  5. Προχωρημένες δυνατότητες
    1. Άγκυρες
  6. Πηγές
  7. Άδεια χρήσης


1. Απλή μορφοποίηση

1a. Απλό κείμενο

Για το απλό κείμενο δε χρειάζεται να ειπωθούν πολλά. Μορφοποιείται αυτόματα σε παραγράφους. Για να αλλάξετε παράγραφο πρέπει να αφήσετε μια άδεια γραμμή.

Ένα σημείο ενδιαφέροντος είναι ότι καλό είναι να αποφεύγετε την άσκοπη χρήση των χαρακτήρων [ και ] και των συνδυασμών χαρακτήρων (( και )) και {{ και }}, γιατί το σύστημα μπορεί να εκλάβει οτιδήποτε βρίσκεται ανάμεσά τους ως σύνδεσμο, κείμενο σε εισαγωγικά ή εικόνα, αντίστοιχα.

1b. Κείμενο σε εισαγωγικά

Για να εμφανίσετε ένα κείμενο σε εισαγωγικά (ως σχόλιο), θα πρέπει να το περικλείσετε ανάμεσα στους χαρακτήρες {{ και }}.

Παράδειγμα

Κώδικας Ο Νίκος είπε {{καλημέρα}}.
Αποτέλεσμα Ο Νίκος είπε “καλημέρα”.

1c. Μορφοποίηση κειμένου

Ας εξετάσουμε την "κλασική" μορφοποίηση που μπορεί να υφίσταται ένα κείμενο, το πασίγνωστο τρίο των bold, italic και underline. Σε αυτά θα προστεθεί η μορφοποίηση του σβησμένου κειμένου (strikethrough).

Βέβαια, όλα τα παραπάνω μπορούν εύκολα να συνδυαστούν, αν βάζετε τις μορφοποιήσεις τη μία μέσα στην άλλη (σαν μια ματριόσκα). Π.χ.:

Κώδικας '''--''__Τι έχω κάνει εδώ πέρα!?__''--'''
Αποτέλεσμα Τι έχω κάνει εδώ πέρα!?

1d. Χρώμα κειμένου

Ναι! Μπορείτε να ορίσετε το χρώμα του κειμένου, περικλείοντάς το ανάμεσα σε δυο ζεύγη σλας (//). Το προεπιλεγμένο χρώμα είναι το μαύρο (το χρώμα του κανονικού κειμένου είναι σκούρο γκρι, οπότε ξεχωρίζει λίγο το μαύρο). Μπορείτε να ορίσετε το χρώμα που θέλετε βάζοντας ως πρώτη λέξη το κοινό όνομα στα αγγλικά (ή τον δεκαεξαδικό κωδικό) του χρώματος που να ακολουθείται από μία κάθετο (|).

Παράδειγμα

Κώδικας Μπλε: // blue | Πίσω απ’ το χαμόγελό σου ακολουθούνε τύψεις //
Επίσης μπλε: // #0000FF | την ενοχή σου δεν μπορείς να την καλύψεις //
Αποτέλεσμα
Μπλε: Πίσω απ’ το χαμόγελό σου ακολουθούνε τύψεις
Επίσης μπλε: την ενοχή σου δεν μπορείς να την καλύψεις

1e. Κεφαλίδες

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

Πώς ξεκινάει η γραμμήΕπίπεδο κεφαλίδας
!!!!

Κεφαλίδα 1

!!!

Κεφαλίδα 2

!!

Κεφαλίδα 3

!

Κεφαλίδα 4

Παράδειγμα

Κώδικας !!!! Το ωραίο wikiγραπτό μου
!!! Εισαγωγή
Καλοκαιρινές διακοπές για πάντα!
Αποτέλεσμα

Το ωραίο wikiγραπτό μου

Εισαγωγή

Καλοκαιρινές διακοπές για πάντα!

1f. Οριζόντια γραμμή

Για να δημιουργήσετε μια οριζόντια γραμμή πρέπει να βάλετε τέσσερις παύλες ---- σε μια γραμμή από μόνες τους.

Κώδικας

Έλα Απόλλωνα έλα
Πάρε την λύρα μ’ ακούς
Και παίξε μόνο για μένα

----

Παίξε, παίξε του Αιγαίου τα μπλουζ

----
Αποτέλεσμα

Έλα Απόλλωνα έλα
Πάρε την λύρα μ’ ακούς
Και παίξε μόνο για μένα


Παίξε, παίξε του Αιγαίου τα μπλουζ


1g. Άδεια γραμμή

Ομολογουμένως το σύστημα wiki είναι αρκετά έξυπνο (ή τουλάχιστον έτσι το παίζει). Για αυτό και παραλείπει τις επιπλέον άδειες γραμμές που βρίσκει στο κείμενο, ακόμη κι αν όντως χρειάζεστε μια άδεια γραμμή σε κάποιο σημείο.

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

Κώδικας Τσικαμπούμ,


και όλα γυρίζουν

%%%
στο κεφάλι μου
Αποτέλεσμα

Τσικαμπούμ,

και όλα γυρίζουν


στο κεφάλι μου

2. Παραθέσεις

2a. Παράθεση λόγου

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

Κώδικας > Ἐν οἶδα ὡς οὐδὲν οἶδα (Σωκράτης)

> Scooby-dooby-doo! (Scooby-Doo)
Αποτέλεσμα
Ἐν οἶδα ὡς οὐδὲν οἶδα (Σωκράτης)

Scooby-dooby-doo! (Scooby-Doo)

2b. Παράθεση κειμένου

Για να παραθέσετε μεγάλο κείμενο (ή κώδικα προγράμματος) προτείνεται η χρήση ειδικής παράθεσης: το μόνο που πρέπει να κάνετε είναι να ξεκινήσετε κάθε γραμμή με ένα κενό ( ).

Κώδικας Ρεφραίν
 Γύρνα πίσω ή έστω τηλεφώνα
 Πες μου πως υπάρχει ελπίδα ακόμα
 Είναι η μοναξιά βαρύ φορτίο
 Μόνος τη σηκώνω εγώ για δύο
Αποτέλεσμα Ρεφραίν
Γύρνα πίσω ή έστω τηλεφώνα
Πες μου πως υπάρχει ελπίδα ακόμα
Είναι η μοναξιά βαρύ φορτίο
Μόνος τη σηκώνω εγώ για δύο

2c. Λίστες

Υπάρχουν δύο ειδών λίστες:

Κώδικας !!! Αριθμημένη λίστα
# Ένα
# Δύο
# Τρία

!!! Λίστα με bullets
* Ένα
* Δύο
* Τρία
Αποτέλεσμα

Αριθμημένη λίστα

  1. Ένα
  2. Δύο
  3. Τρία

Λίστα με bullets

3. Σελίδες και υπερσύνδεσμοι

3a. Σελίδα

Για να δημιουργήσετε σύνδεσμο προς μια σελίδα wiki, περικλείετε το όνομα της σελίδας ανάμεσα σε αγκύλες ([ και ]). Η σελίδα δεν είναι απαραίτητο να υπάρχει από πριν. Μάλιστα, αυτός είναι ο μόνος τρόπος για να δημιουργήσετε μια νέα σελίδα wiki. Μόλις κάνετε κλικ πάνω στον σύνδεσμο μιας ανύπαρκτης σελίδας, θα σας δοθεί η δυνατότητα να τη δημιουργήσετε και να γράψετε κάτι.

Κώδικας Το [σύμπαν] είναι μεγάλο. Πολύ μεγάλο.
Αποτέλεσμα Το σύμπαν είναι μεγάλο. Πολύ μεγάλο.

Αυτό είναι όλο.

3b. Σύνδεσμος

Οι εξωτερικοί σύνδεσμοι δημιουργούνται με τον ίδιο τρόπο όπως και οι σύνδεσμοι wiki, με τη διαφορά ότι ανάμεσα στις αγκύλες μπαίνει η διεύθυνση (URL) της σελίδας.

Κώδικας Πάντειο Πανεπιστήμιο [https://www.panteion.gr]
Αποτέλεσμα Πάντειο Πανεπιστήμιο https://www.panteion.gr

Μπορείτε να ορίσετε το κείμενο που θα εμφανίζεται στο σύνδεσμο. Για να το κάνετε αυτό, χρησιμοποιήστε την εξής εκτεταμένη σύνταξη:

Κώδικας Πάντειο Πανεπιστήμιο: [η ιστοσελίδα μας|https://www.panteion.gr]
Αποτέλεσμα Πάντειο Πανεπιστήμιο: η ιστοσελίδα μας

3c. Εικόνα

Το σύστημα wiki του open eClass επιτρέπει να χρησιμοποιείτε εικόνες, ωστόσο αυτές θα πρέπει να βρίσκονται στο Διαδίκτυο ώστε να έχουν δική τους διεύθυνση URL (π.χ. https://mavridisf.github.io/openeclass-wiki-manual/spaceisbig.jpg).

Για να εισαγάγετε μια εικόνα, περικλείστε το URL της μέσα σε διπλή παρένθεση ((( και ))).

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

  1. Πηγαίνουμε σε κάποια ιστοσελίδα που μετατρέπει τις εικόνες σε κώδικα base64 (π.χ., εδώ).
  2. Ανεβάζουμε την εικόνα που θέλουμε να χρησιμοποιήσουμε.
  3. Αντιγράφουμε τον κώδικα base64. Ο κώδικας αυτός ξεκινάει πάντα κάπως έτσι:
    Κώδικας data:image/κάτι;base64
  4. Τον χρησιμοποιούμε στη θέση της διεύθυνσης URL της εικόνας (ανάμεσα στα (( και ))).

4. Πίνακες

Ακολουθεί ίσως το πιο δύσκολο κομμάτι του εγχειριδίου...

Κυρίες και κύριοι, υποδεχτείτε...

(κρότοι τυμπάνων)

(άκρα του τάφου σιωπή, ακούγονται μόνο οι μισοί που λυποθυμούν)

...τους βικιπίνακες!

(άκρα του τάφου σιωπή, έχουν λιποθυμήσει κι όλοι οι υπόλοιποι)


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

Κώδικας
{|
||! Όνομα κομματιού    ||! Ερμηνευτής          ||! Στίχοι       ||! Μουσική                 ||
|| Αν μια μέρα σε χάσω || Πασχάλης             || Σέβη Τηλιακού || Rossi-Belfiore-Inglesias ||
|| Είπα μια μέρα       || Πασχάλης             || Σέβη Τηλιακού || Γιώργος Νιάρχος          ||
|| Παραδώσου λοιπόν    || Πασχάλης             || Πασχάλης      || Στέλιος Βλαβιανός        ||
|| Το κορίτσι του Μάη  || Πασχάλης & Olympians || Σέβη Τηλιακού || Robbie Van Leeuwen       ||
|}
			
Αποτέλεσμα
Όνομα κομματιούΕρμηνευτήςΣτίχοιΜουσική
Αν μια μέρα σε χάσωΠασχάλης Σέβη ΤηλιακούRossi-Belfiore-Inglesias
Είπα μια μέρα Πασχάλης Σέβη ΤηλιακούΓιώργος Νιάρχος
Παραδώσου λοιπόν Πασχάλης Πασχάλης Στέλιος Βλαβιανός
Το κορίτσι του Μάη Πασχάλης & OlympiansΣέβη ΤηλιακούRobbie Van Leeuwen

Παρατηρούμε ότι ένας πίνακας αρχίζει πάντα με τη γραμμή {| και τελειώνει, αντίστοιχα, με τη γραμμή |}. Οι γραμμές ανάμεσα στην αρχή και το τέλος είναι οι σειρές του πίνακα. Ξεκινούν και τελειώνουν με δύο καθέτους (||). Με τους ίδιους χαρακτήρες διαχωρίζονται μεταξύ τους και οι στήλες της κάθε γραμμής:

Κώδικας
{|
|| Γραμμή 1, Στήλη 1 || Γραμμή 1, Στήλη 2 || Γραμμή 1, Στήλη 3 ||
|| Γραμμή 1, Στήλη 2 || Γραμμή 2, Στήλη 2 || Γραμμή 2, Στήλη 3 ||
|| Γραμμή 1, Στήλη 3 || Γραμμή 3, Στήλη 2 || Γραμμή 3, Στήλη 3 ||
|}
			

Συχνά σε έναν πίνακα η πρώτη γραμμή περιέχει τον τίτλο της κάθε στήλης. Είναι δυνατό να μαρκάρετε μια γραμμή ως τέτοια βάζοντας θαμαστικό (!) κολλητά στα δεξιά των καθέτων (||! Τίτλος).

Ο πίνακας που δημιουργείται δεν είναι και ιδιαίτερα αισθητικός και η εμφάνισή του δεν μπορεί να μεταβληθεί. Ωστόσο, είναι δυνατόν να εφαρμοστούν οι γνωστές μορφοποιήσεις στο κείμενο του πίνακα (bold, italic κ.ο.κ.).

5. Προχωρημένες δυνατότητες

Προσοχή, εδώ κατοικούνε δράκοι!

Διαβάστε αυτό το μέρος του εγχειριδίου μόνο όταν είστε σίγουρ@ ότι χρειάζεστε να μάθετε κάτι από εδώ.

5a. Άγκυρες

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

Η σύνταξη για την τοποθέτηση μιας άγκυρας είναι (χωρίς κενά) η εξής: ~hello~, όπου hello οποιοδήποτε όνομα θέλουμε να δώσουμε στην άγκυρα στα αγγλικά.

Για να φτιάξουμε υπερσύνδεσμο προς μια άγκυρα στην τρέχουσα σελίδα, φτιάχνουμε έναν σύνδεσμο όπου ως διεύθυνση ορίζουμε το όνομα της άγκυρας μετά από μια δίεση ([#hello]).

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

Κώδικας ! Περιεχόμενα
* [Μέρος Πρώτο|#part1]
* ...

%%%

~part1~
! Μέρος Πρώτο
μπλα μπλα μπλα
Αποτέλεσμα

Περιεχόμενα


Μέρος Πρώτο

μπλα μπλα μπλα

6. Πηγές

  1. GUNET (2021). Open eClass 3.12. Πηγαίος κώδικας που ανακτήθηκε στις 25 Οκτωβρίου 2021 από https://github.com/gunet/openeclass/blob/3.12.x/modules/wiki/lib/class.wiki2xhtmlrenderer.php

7. Άδεια χρήσης

Το παρόν έγγραφο διατίθεται υπό την ελεύθερη άδεια χρήσης GNU FDL 1.3 ή μεταγενέστερη. Copyright © 2021-2023 Μαυρίδης Φίλιππος

Το Open eClass είναι copyright © 2003-2023 Greek Universities Network - GUnet.