Δημιουργία Χρονολογίου Γεγονότων με ανοικτά δεδομένα PDF Free Download

Name: Δημιουργία Χρονολογίου Γεγονότων με ανοικτά δεδομένα PDF
Author: Jonathan Deleon

1 / 55

0 views•55 pages

Δημιουργία Χρονολογίου Γεγονότων με ανοικτά δεδομένα PDF Free Download

Δημιουργία Χρονολογίου Γεγονότων με ανοικτά δεδομένα PDF free Download. Think more deeply and widely.

ΕΘΝΙΚΟ ΚΑΙ ΚΑΠΟΔΙΣΤΡΙΑΚΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΑΘΗΝΩΝ

ΣΧΟΛΗ ΘΕΤΙΚΩΝ ΕΠΙΣΤΗΜΩΝ

ΤΜΗΜΑ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΤΗΛΕΠΙΚΟΙΝΩΝΙΩΝ

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

Δημιουργία Χρονολογίου Γεγονότων με ανοικτά δεδομένα

Στέφανος - Σ - Πάνης

Επιβλέπων:

Δημήτρης Βαρουτάς, Επίκουρος Καθηγητής

ΑΘΗΝΑ

ΙΟΥΛΙΟΣ 2017

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

Δημιουργία Χρονολογίου Γεγονότων με ανοικτά δεδομένα

Στέφανος Σ. Πάνης

Α.Μ.: 1115199801196

ΕΠΙΒΛΕΠΩΝ:

Δημήτρης Βαρουτάς, Επίκουρος Καθηγητής

ΠΕΡΙΛΗΨΗ

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

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

μια ανάλυση των εργαλείων σχεδίασης ιστοσελίδων όπως τα HTML5, CSS, JavaScript

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

χρονολογίων δεδομένων στον ιστό. Ιδιαίτερη προσοχή δίνεται στο εργαλείο TimelineJS,

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

TimelineJS.

ΘΕΜΑΤΙΚΗ ΠΕΡΙΟΧΗ: Δημιουργία Χρονολογίου Γεγονότων με ανοικτά δεδομένα

ABSTRACT

In the context of this diploma thesis, the field of developing event timelines with open

data on web pages has been studied. Initially, web design tools such as HTML5, CSS,

JavaScript are analyzed, and some of the most widespread web-based tools for

Timelines are presented. Particular attention is paid to the TimelineJS tool, its

capabilities and how it is used. Finally, an TimelineJS implementation is presented.

SUBJECT AREA: Create an Event Timeline with Open Data

Αυτή η προσπάθεια αφιερώνεται στην οικογένειά μου.

ΕΥΧΑΡΙΣΤΙΕΣ

Για τη διεκπεραίωση της παρούσας Πτυχιακής Εργασίας θα ήθελα να ευχαριστήσω τον

επιβλέποντα Επίκουρο Καθηγητή κ. Δημήτρη Βαρουτά, τον ΕΔΙΠ κ. Δημήτριο Κατσιάνη

και όσους μου στάθηκαν και υποστήριξαν στο διάστημα αυτό.

ΠΕΡΙΕΧΟΜΕΝΑ

ΠΡΟΛΟΓΟΣ .................................................................................................................. 12

1. HTML5 ................................................................................................................... 13

1.1 Μια εισαγωγή στην HTML ............................................................................................................... 13

1.2 Καινούργια στοιχεία της HTML5 .................................................................................................... 13

2. ΓΛΩΣΣΑ ΜΟΡΦΟΠΟΙΗΣΗΣ CSS .......................................................................... 16

2.1 Η CSS ................................................................................................................................................ 16

2.2 CSS κανόνες ..................................................................................................................................... 16

2.3 Τρόποι εισαγωγής CSS .................................................................................................................. 16

3. Η ΓΛΩΣΣΑ JAVASCRIPT ...................................................................................... 18

3.1 Μια εισαγωγή στην γλώσσα JavaScript ....................................................................................... 18

3.2 Γράφοντας σε JavaScript ............................................................................................................... 18

3.2.1 Το αντικείμενο Array .................................................................................................................. 19

3.2.2 Το αντικείμενο String ................................................................................................................. 19

3.2.3 Το αντικείμενο Math .................................................................................................................. 20

3.2.4 Το αντικείμενο Date ................................................................................................................... 20

3.2.5 Το αντικείμενο Window ............................................................................................................. 21

3.2.6 Το αντικείμενο Navigator ........................................................................................................... 21

3.2.7 Δημιουργία Αντικειμένου ........................................................................................................... 22

3.2.8 Τροποποίηση Αντικειμένου ....................................................................................................... 22

4. ΕΡΓΑΛΕΙΑ ΔΗΜΙΟΥΡΓΙΑΣ ΧΡΟΝΟΛΟΓΙΩΝ ........................................................ 23

4.1 Εισαγωγή στα εργαλεία δημιουργίας χρονολογίων .................................................................... 23

4.2 Timeline.JS ....................................................................................................................................... 23

4.3 StoryMap.JS ..................................................................................................................................... 23

4.4 TimeMapper ...................................................................................................................................... 24

4.5 TimelineSetter .................................................................................................................................. 25

5. ΤΟ ΕΡΓΑΛΕΙΟ TIMELINE.JS ................................................................................ 27

5.1 Χρήση – Επιλογές ............................................................................................................................ 27

5.2 Τύποι Πολυμέσων ........................................................................................................................... 27

5.3 Χρήση με JSON ................................................................................................................................ 29

5.4 CSS επιλογές ................................................................................................................................... 31

5.5 Timeline.JS με JavaScript ............................................................................................................... 33

6. ΜΙΑ ΕΦΑΡΜΟΓΗ ΜΕ ΤΟ TIMELINE.JS ................................................................ 36

6.1 Εισαγωγή .......................................................................................................................................... 36

6.2 Η δομή της εφαρμογής .................................................................................................................... 36

6.3 Μορφοποίηση με CSS ..................................................................................................................... 38

6.4 Λειτουργικότητα με JavaScript ....................................................................................................... 39

6.5 Ενσωμάτωση του Timeline.JS ....................................................................................................... 40

ΠΙΝΑΚΑΣ ΟΡΟΛΟΓΙΑΣ ................................................................................................ 42

ΣΥΝΤΜΗΣΕΙΣ – ΑΡΚΤΙΚΟΛΕΞΑ – ΑΚΡΩΝΥΜΙΑ ........................................................ 43

ΠΑΡΑΡΤΗΜΑ Ι .............................................................................................................. 44

ΑΝΑΦΟΡΕΣ .................................................................................................................. 55

ΚΑΤΑΛΟΓΟΣ ΣΧΗΜΑΤΩΝ

Σχήμα 1: Δομή της ιστοσελίδας ..................................................................................... 38

ΚΑΤΑΛΟΓΟΣ ΕΙΚΟΝΩΝ

Εικόνα 1: Η ζωή του Nelson Mandela από το Times.com με Timeline.JS ..................... 23

Εικόνα 2: Το ταξίδι της Aryas στο Westeros από το Knight Lab με StoryMap.JS .......... 24

Εικόνα 3: Medieval Philosophers από την ofkn Labs με TimeMapper ........................... 25

Εικόνα 4: Arab Awakening από το PBS.org με το TimelineSetter ................................. 26

Εικόνα 5: Η ιστοσελίδα .................................................................................................. 41

ΚΑΤΑΛΟΓΟΣ ΠΙΝΑΚΩΝ

Πίνακας 1: Νέα Σημασιολογικα / Δομικά Στοιχεία .......................................................... 13

Πίνακας 2: Νέα Στοιχεία Φόρμας ................................................................................... 14

Πίνακας 3: Νέοι Τύποι Εισόδου ..................................................................................... 14

Πίνακας 4: Νέα Σύνταξη Ιδιοτήτων ................................................................................ 15

Πίνακας 5: HTML5 Γραφικά ........................................................................................... 15

Πίνακας 6: Νέα Στοιχεία Πολυμέσων ............................................................................. 15

Πίνακας 7: Μέθοδοι Αντικειμένων Array ........................................................................ 19

Πίνακας 8: Μέθοδοι Αντικειμένων String ....................................................................... 19

Πίνακας 9: Σταθερές Αντικειμένου Math ........................................................................ 20

Πίνακας 10: Μέθοδοι Αντικειμένου Math........................................................................ 20

Πίνακας 11: Μέθοδοι Αντικειμένου Date ........................................................................ 21

Πίνακας 12: Χειριστές Συμβάντων ................................................................................. 22

Πίνακας 13: Τύποι Πολυμέσων ...................................................................................... 28

Πίνακας 14: Ιδιότητες Αντικειμένου JSON ..................................................................... 29

Πίνακας 15: Ιδιότητες Αντικειμένων Slide ...................................................................... 29

Πίνακας 16: Ιδιότητες Αντικειμένων Era ......................................................................... 30

Πίνακας 17: Ιδιότητες Αντικειμένων Date ....................................................................... 30

Πίνακας 18: Ιδιότητες Αντικειμένων Text ....................................................................... 31

Πίνακας 19: Ιδιότητες Αντικειμένων Media ..................................................................... 31

Πίνακας 20: Επιλογές Διαφάνειας .................................................................................. 32

Πίνακας 21: Επιλογές Timenav ..................................................................................... 32

ΠΡΟΛΟΓΟΣ

Η παρούσα πτυχιακή εργασία εκπονήθηκε στα πλαίσια του προπτυχιακού

προγράμματος σπουδών του τμήματος Πληροφορικής & Τηλεπικοινωνιών της Σχολής

Θετικών Επιστημών του Εθνικού και Καποδιστριακού Πανεπιστημίου Αθηνών.

Αθήνα, Ιούλιος 2017

Στέφανος Σ. Πάνης

Δημιουργία Χρονολογίου με ανοικτά δεδομένα

1. HTML5

1.1 Μια εισαγωγή στην HTML

Το HTML (HyperText Markup Language) είναι μια γλώσσα σήμανσης που

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

κείμενο, εικόνες και άλλο υλικό σε οπτικές ή ακουστικές ιστοσελίδες. Τα

προκαθορισμένα χαρακτηριστικά για κάθε στοιχείο σήμανσης HTML ορίζονται στο

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

βελτιωθούν από την πρόσθετη χρήση του CSS από τον σχεδιαστή ιστοσελίδων. Πολλά

από τα στοιχεία κειμένου περιέχονται στην τεχνική έκθεση ISO του TR 9537 για την

χρήση SGML, η οποία με τη σειρά της καλύπτει τα χαρακτηριστικά γνωρίσματα των

πρώιμων γλωσσών μορφοποίησης κειμένου. H έννοια της γενικευμένης σήμανσης

βασίζεται σε στοιχεία (ένθετα σημειωμένα εύρη με χαρακτηριστικά) και όχι απλά

αποτελέσματα εκτύπωσης, με τον διαχωρισμό της δομής και της σήμανσης. Το HTML

μετακινήθηκε προοδευτικά προς αυτή την κατεύθυνση με το CSS [1].

Η HTML είναι το ακρωνύμιο των λέξεων HyperText Markup Language, δηλ. Γλώσσα

Χαρακτηρισμού Υπερ-Κειμένου. Η HTML ορίζει ένα σύνολο κοινών στυλ για τις Web

σελίδες, όπως τίτλοι (titles), επικεφαλίδες (headings), παράγραφοι (paragraphs), λίστες

(lists) και πίνακες (tables). Ορίζει επίσης εμφάνιση χαρακτήρων, όπως η έντονη γραφή

(bold) και οι ενότητες κώδικα (code).

Κάθε στοιχείο έχει όνομα και περιέχεται μέσα στα σύμβολα <>, που ονομάζονται

ετικέτες (tags). Όταν γράφουμε μια ιστοσελίδα με την HTML, στην ουσία δίνουμε τίτλους

στα διάφορα στοιχεία της σελίδας με αυτά τα tags [2].

Η δομή ενός αρχείου HTML είναι:

<HTML>

<HEAD>

<TITLE> Ο τίτλος </TITLE>

</HEAD>

<BODY>τα περιεχόμενα της σελίδας</BODY>

<HTML>

1.2 Καινούργια στοιχεία της HTML5

Η HTML5 εισάγει μια σειρά από νέα στοιχεία και καινοτομίες απλοποιώντας πολλές

διεργασίες που πριν ήταν αρκετά πολύπλοκες να γίνουν. Ενσωματώνει αρκετά στοιχεία

της Javascript μέσα σε ένα μόλις tag και απαλλάσσει τους σχεδιαστές από παλαιότερες

τεχνολογίες που αποσύρονται (πχ AdobeFlash).

Για τη βασική δομή των σελίδων η HTML5 χρησιμοποιεί νέα tags, όπως αυτά που

φαίνονται στους παρακάτω πίνακες [3]:

Πίνακας 1: Νέα Σημασιολογικα / Δομικά Στοιχεία

Tag

Περιγραφή

Ορίζει ένα άρθρο σε ένα έγγραφο

<aside>

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

<bdi>

Απομονώνει ένα μέρος του κειμένου που μπορεί να μορφοποιηθεί σε

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

Ορίζει επιπλέον λεπτομέρειες που ο χρήστης να δει ή να αποκρύψει

Σ.Πάνης 13

Δημιουργία Χρονολογίου με ανοικτά δεδομένα

Ορίζει ένα παράθυρο ή πλαίσιο διαλόγου

Ορίζει μια λεζάντα για ένα στοιχείο <figure>

Ορίζει αυτοτελές περιεχόμενο

Ορίζει ένα υποσέλιδο για ένα έγγραφο ή μια ενότητα

Ορίζει μια κεφαλίδα για ένα έγγραφο ή μια ενότητα

<main>

Ορίζει το κύριο περιεχόμενο ενός εγγράφου

<mark>

Ορίζει το κείμενο που έχει επισημανθεί

Ορίζει ένα στοιχείο εντολής / μενού το οποίο ο χρήστης μπορεί να

επικαλείται από ένα αναδυόμενο μενού

<meter>

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

<nav>

Ορίζει συνδέσμους πλοήγησης

Αντιπροσωπεύει την πρόοδο μιας εργασίας

<rp>

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

υποστηρίζουν ruby σχολιασμούς

<rt>

Ορίζει μια εξήγηση / προφορά των χαρακτήρων (για την τυπογραφία

της Ανατολικής Ασίας)

<ruby>

Ορίζει έναν ruby σχολιασμό ( για την τυπογραφία της Ανατολικής

Ασίας)

Ορίζει μια ενότητα σε ένα έγγραφο

Ορίζει μια ορατή επικεφαλίδα για ένα στοιχείο <details>

<time>

Ορίζει μια ημερομηνία / ώρα

<wbr>

Ορίζει μια πιθανή διακοπή γραμμής

Πίνακας 2: Νέα Στοιχεία Φόρμας

Tag

Περιγραφή

Καθορίζει μια λίστα προκαθορισμένων επιλογών για στοιχεία ελέγχου

εισόδου

Ορίζει ένα πεδίο γεννήτριας ζεύγους κλειδιών ( για φόρμες)

Ορίζει το αποτέλεσμα ενός υπολογισμού

Πίνακας 3: Νέοι Τύποι Εισόδου

Νέοι τύποι εισόδου

Νέα χαρακτηριστικά εισαγωγής

• color

• date

• datetime

• datetime-local

• email

• month

• number

• range

• search

• tel

• time

• url

• week

• autocomplete

• autofocus

• form

• formaction

• formenctype

• formmethod

• formtarget

• height and width

• list

• min and max

• multiple

• pattern (regexp)

• placeholder

• required

• step

Σ.Πάνης 14

Δημιουργία Χρονολογίου με ανοικτά δεδομένα

Πίνακας 4: Νέα Σύνταξη Ιδιοτήτων

Τύπος

Παράδειγμα

Empty

Unquoted

Double-quoted

Single-quoted

Πίνακας 5: HTML5 Γραφικά

Tag

Περιγραφή

Σχεδίαση γραφικών, μέσω scripting (συνήθως JavaScript)

<svg>

Σχεδίαση κλιμακωτών διανυσματικών γραφικών (scalable vector

graphics)

Πίνακας 6: Νέα Στοιχεία Πολυμέσων

Tag

Περιγραφή

<audio>

Ορίζει περιεχόμενο ήχου

<embed>

Ορίζει ένα container για μια εξωτερική (μη-HTML) εφαρμογή

Ορίζει πολλαπλούς πόρους πολυμέσων για στοιχεία μέσων (<video> και

<audio>)

<track>

Ορίζει κομμάτια κειμένου για στοιχεία μέσων (<video> και <audio>)

<video>

Ορίζει βίντεο ή ταινία

Σ.Πάνης 15

Δημιουργία Χρονολογίου με ανοικτά δεδομένα

2. Γλώσσα μορφοποίησης CSS

2.1 Η CSS

Η CSS (Cascading Style Sheets) ανήκει στην κατηγορία γλωσσών φύλλων στιλ και

χρησιμοποιείται για την τροποποίηση της εμφάνισης μια ιστοσελίδας. Η CSS ελέγχει και

διαμορφώνει χρώματα, στοίχιση, γραμματοσειρές, σχήματα και μεγέθη. Για μια

καλοσχεδιασμένη ιστοσελίδα η χρήση της CSS κρίνεται αναγκαία. Για ένα HTML

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

συγκρουόμενες. Η CSS επιλύει τέτοιου είδους συγκρούσεις καθορίζοντας μια σειρά

προτεραιότητας σε αυτές τις δηλώσεις [4].

2.2 CSS κανόνες

Ένας κανόνας CSS αποτελείτε απο δύο μέρη: τον επιλογέα (selector) ο οποίος αφορά

τι θα μορφοποιηθεί και τις ιδιότητες (properties) οι οποίες αναφέρουν πώς θα

μορφοποιηθεί.

Οπότε η σύνταξη είναι:

επιλογέας

{

ιδιότητα1:τιμή1;

ιδιότητα2:τιμή2;

...

}

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

Η παρουσία τους είναι έξω από τα πλαίσια της πτυχιακής.

2.3 Τρόποι εισαγωγής CSS

Μπορούμε να εισάγουμε CSS σε μια ιστοσελίδα με τρεις τρόπους. Οι τρόποι σε

φθίνουσα σειρά προτεραιότητας, είναι:

• Inline CSS: Για να μορφοποιηθεί ένα στοιχείο μόνο και δεν χρειάζεται το είδος της

μορφοποίησης σε άλλο στοιχείο του site, μπορεί να δηλωθεί CSS property μέσα

στο attribute style, το οποίο διαθέτει σχεδόν κάθε στοιχείο html. Για παράδειγμα,

για να εμφανιστεί μια παράγραφος με μπλε χρώμα, μπορεί να γραφτεί:

<p style="color:blue;"> παράγραφος </p>

Αν κάποια από τις ιδιότητες του attribute style συγκρούεται με άλλον κανόνα

CSS, ο πλοηγός θα εφαρμόσει το attribute style ως προτεραιότητα για το

στοιχείο αυτό.

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

(page) και όχι για όλον τον ιστότοπο (website). Για να γίνει αυτό χωρίς ξεχωριστό

αρχείο CSS μόνο για την συγκεκριμένη σελίδα, εισάγονται εντός των tags

<head>...</head> της σελίδας οι κανόνες CSS μέσα σε <style> tags. Για

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

έχουμε στο head:

Σ.Πάνης 16

Δημιουργία Χρονολογίου με ανοικτά δεδομένα

body

{

color:blue;

}

</style>

• Εξωτερικό αρχείο CSS: Η πιο ορθή χρήση του CSS είναι η χρήση εξωτερικού

αρχείο CSS. Γράφονται οι κανόνες CSS σε ένα αρχείο με επέκταση css (πχ.

main.css) και στο head κάθε σελίδας ορίζεται <link href="main.css"

type="text/css"/>. Μπορούν να υπάρχουν πολλά αρχεία .css για την ίδια σελίδα,

αλλά προτεραιότητα έχει το τελευταίο που έχει οριστεί.

Σ.Πάνης 17

Δημιουργία Χρονολογίου με ανοικτά δεδομένα

3. Η Γλώσσα JavaScript

3.1 Μια εισαγωγή στην γλώσσα JavaScript

Η γλώσσα προγραμματισμού JavaScript δημιουργήθηκε αρχικά από τον Brendan Eich

της εταιρείας Netscape με την επωνυμία Mocha. Αργότερα, Mocha μετονομάστηκε σε

LiveScript, και τελικά σε JavaScript, κυρίως επειδή η ανάπτυξή της επηρεάστηκε

περισσότερο από τη γλώσσα προγραμματισμού Java. LiveScript ήταν το επίσημο

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

εκδόσεις με το πρόγραμμα περιήγησης στο Web, Netscape Navigator εκδοχή 2.0 τον

Σεπτέμβριο του 1995. LiveScript μετονομάστηκε σε JavaScript σε μια κοινή ανακοίνωση

με την εταιρεία Sun Microsystems στις 4 Δεκεμβρίου, 1995.

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

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

Αρχικά χρησιμοποιήθηκε για προγραμματισμό από την πλευρά του πελάτη (client), που

ήταν ο φυλλομετρητής (browser) του χρήστη, και χαρακτηρίστηκε σαν client-side

γλώσσα προγραμματισμού. Αυτό σημαίνει ότι η επεξεργασία του κώδικα Javascript και

η παραγωγή του τελικού περιεχομένου HTML δεν πραγματοποιείται στο διακομιστή,

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

στατικές σελίδες HTML. Αντίθετα, άλλες γλώσσες όπως η PHP (PHP: Hypertext

Preprocessor) εκτελούνται στο διακομιστή (server) [5].

3.2 Γράφοντας σε JavaScript

Ο κώδικας Javascript μιας σελίδας περικλείεται από τις ετικέτες της HTML <script

type="text/javascript"> και </script>. Για παράδειγμα, ο ακόλουθος κώδικας Javascript

εμφανίζει ένα πλαίσιο διαλόγου με το κείμενο "Γεια σου, κόσμε!":

<html>

<body>

alert('Γεια σου, κόσμε!');

</script>

</body>

</html>

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

διαχωριστούν μεταξύ τους με το χαρακτήρα του ελληνικού ερωτηματικού ';' (semicolon).

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

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

Μια άλλη βασική εντολή, η window.prompt("μήνυμα προς το χρήστη"), ζητάει από το

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

χρησιμοποιηθούν σαν κείμενo:

var FIRSTvariable = window.prompt("PLEASE FILL IN YOUR NAME")

alert("Your name is " + FIRSTvariable + ".")

</script>

Υπάρχουν δύο τρόποι εισαγωγής της javascript σε html. Ο πρώτος (Internal) είναι να

εισάγουμε εσωτερικά στο html αρχείο τον κώδικα javascript και ο δεύτερος (External),

Σ.Πάνης 18

Δημιουργία Χρονολογίου με ανοικτά δεδομένα

να γραφτεί ο κώδικας javascript σε ξεχωριστό αρχείο(.js) και να προσπελαθεί απο το

αρχείο html με μία αναφορά σε αυτό.

Ακολουθούν τα βασικά αντικείμενα της Javascript και τα χειριστήρια συμβάντων, τα

οποία παίζουν σημαντικό ρόλο στην κατανόηση και δημιουργία μιας διαδραστικής

εφαρμογής [6].

3.2.1 Το αντικείμενο Array

Με το αντικείμενο αυτό δημιουργούμε πίνακες (arrays) και δηλώνουμε το μέγεθος του

πίνακα ( πλήθος στοιχείων):

Pinakas = new Array(10);

Η αρίθμηση ξεκινάει από το 0 και για να προσπελάσουμε ένα συγκεκριμένο στοιχείο

μέσα στον πίνακα:

Stoixeio1 = Pinakas[0];

Για να βρούμε το μέγεθος του πίνακα:

MegethosPinaka = Pinakas.length;

Πίνακας 7: Μέθοδοι Αντικειμένων Array

Μέθοδος

Περιγραφή

join()

Ενώνει όλα τα στοιχεία ενός πίνακα σε μια συμβολοσειρά

reverse()

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

sort()

Ταξινομεί τα στοιχεία ενός πίνακα

3.2.2 Το αντικείμενο String

Με το αντικείμενο αυτό δημιουργούμε συμβολοσειρές :

text = “Μια συμβολοσειρά παράδειγμα”;

text= new String(“συμβολοσειρά παράδειγμα”);

Για να βρούμε το μήκος μιας συμβολοσειράς:

MikosText = text.length;

Πίνακας 8: Μέθοδοι Αντικειμένων String

Μέθοδος

Περιγραφή

substring()

Επιστρέφει ένα μέρος της συμβολοσειράς

substr()

Επιστρέφει ένα μέρος της συμβολοσειράς

toUpperCase()

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

toLowerCase()

Μετατρέπει την συμβολοσειρά σε όλα πεζά γράμματα

indexOf()

Ελέγχει αν ένα κομμάτι κειμένου βρίσκεται ή όχι σε μια

συμβολοσειρά, ξεκινώντας από την αρχή της

lastIndexOf()

Ελέγχει αν ένα κομμάτι κειμένου βρίσκεται ή όχι σε μια

συμβολοσειρά, ξεκινώντας από το τέλος της

link()

Δημιουργεί ένα σύνδεσμο (link) με το κείμενο μιας συμβολοσειράς

anchor()

Δημιουργεί ένα σύνδεσμο (link) τύπου άγκυρας (anchor) με το

κείμενο μιας συμβολοσειράς

Σ.Πάνης 19

Δημιουργία Χρονολογίου με ανοικτά δεδομένα

big()

Αυξάνει το μέγεθος του κειμένου

blink()

Κάνει το κείμενο να αναβοσβήνει

bold()

Κάνει το κείμενο έντονο

italics()

Κάνει το κείμενο πλάγια γραφή

small()

Μειώνει το μέγεθος του κειμένου

strike()

Κάνει το κείμενο διακριτή διαγραφή

sub()

Μετατρέπει το κείμενο σε μορφή δείκτη

sup()

Μετατρέπει το κείμενο σε μορφή εκθέτη

3.2.3 Το αντικείμενο Math

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

σταθερές και μεθόδους:

Πίνακας 9: Σταθερές Αντικειμένου Math

Σταθερά

Επιστρέφει

Math.E

Επιστρέφει τον αριθμό e

Math.LN2

Επιστρέφει τον φυσικό λογάριθμο του 2

Math.LN10

Επιστρέφει τον φυσικό λογάριθμο του 10

Math.LOG2E

Επιστρέφει τον λογάριθμο του e με βάση το 2

Math.LOG10E

Επιστρέφει τον λογάριθμο του e με βάση το 10

Math.PI

Επιστρέφει τον αριθμό π

Math.SQRT1_2

Επιστρέφει την τετραγωνική ρίζα του ½

Math.SQRT2

Επιστρέφει την τετραγωνική ρίζα του 2

Πίνακας 10: Μέθοδοι Αντικειμένου Math

Μέθοδος

Περιγραφή

Math.acos()

Υπολογίζει το τόξο σε ακτίνια με βάσει του συνημιτόνου

Math.asin()

Υπολογίζει το τόξο σε ακτίνια με βάσει του ημιτόνου

Math.atan()

Υπολογίζει το τόξο σε ακτίνια με βάσει της εφαπτομένης

Math.cos()

Υπολογίζει το συνημίτονο ενός αριθμού σε ακτίνια

Math.sin()

Υπολογίζει το ημίτονο ενός αριθμού σε ακτίνια

Math.tan()

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

Math.exp()

Επιστρέφει τον αριθμό e υψωμένο σε μια δύναμη

Math.log()

Επιστρέφει τον νεπέριο φυσικό ενός αριθμού

Math.max()

Επιστρέφει τον μεγαλύτερο από δύο αριθμούς

Math.min()

Επιστρέφει τον μικρότερο από δύο αριθμούς

Math.abs()

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

Math.cell()

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

Math.floor()

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

Math.pow()

Υπολογίζει τη δύναμη ενός αριθμού υψωμένου σε έναν άλλον

αριθμό

Math.round()

Στρογγυλοποιεί έναν αριθμό στον πλησιέστερο του ακέραιο

Math.sqrt()

Υπολογίζει την τετραγωνική ρίζα ενός αριθμού

Math.random()

Επιστρέφει έναν τυχαίο αριθμό στο διάστημα [0.1]

3.2.4 Το αντικείμενο Date

Με το αντικείμενο Date χειριζόμαστε ημερομηνίες και ώρες:

Σ.Πάνης 20

Δημιουργία Χρονολογίου με ανοικτά δεδομένα

Πίνακας 11: Μέθοδοι Αντικειμένου Date

Μέθοδος

Περιγραφή

setDate()

Ορίζει την ημέρα του μήνα

setMonth()

Ορίζει τον μήνα (όπου Ιανουάριος = 0)

setYear()

Ορίζει το έτος

setFullYear()

Ορίζει το έτος με μια 4ψήφια τιμή

setTime()

Ορίζει ολόκληρη την ώρα

setHours()

Ορίζει την ώρα

setMinutes()

Ορίζει τα λεπτά

setSeconds()

Ορίζει τα δευτερόλεπτα

getDate()

Επιστρέφει την τρέχουσα ημέρα

getMonth()

Επιστρέφει τον τρέχοντα μήνα

getYear()

Επιστρέφει το τρέχον έτος

getTime()

Επιστρέφει την ολόκληρη τρέχουσα ώρα

getHours()

Επιστρέφει την ώρα

getMinutes()

Επιστρέφει τα λεπτά

getSeconds()

Επιστρέφει τα δευτερόλεπτα

getTimeZoneOffset()

Επιστρέφει την διαφορά της τοπικής ζώνης ώρας από την ώρα

GMT

toGMTString()

Επιστρέφει την ώρα σε string με βάση την μορφή GMT

toLocalString()

Επιστρέφει την τοπική ώρα σε string

parse()

Μετατρέπει ένα string σε αντικείμενο ημερομηνίας

UTC()

Μετατρέπει μια ημερομηνία σε μορφή ώρας UTC

3.2.5 Το αντικείμενο Window

Με το αντικείμενο Window έχουμε πρόσβαση στο παράθυρο του φυλλομετρητή. Όταν

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

πλαίσια (frames), υπάρχουν περισσότερα από ένα αντικείμενα window και πρέπει να

δοθούν ονόματα σε κάθε ένα.

Τοποθεσία:

• self: Το τρέχον παράθυρο.

• top: Το παράθυρο που βρίσκεται στην κορυφή και περιέχει όλα τα άλλα

παράθυρα.

• parent: Το παράθυρο που περιέχει άλλα παράθυρα.

• frames[]: Ένας πίνακας που περιέχει όλα τα πλαίσια μιας ιστοσελίδας.

Το αντικείμενο Window διαθέτει τα εξής τρία αντικείμενα παιδιά:

Αντικείμενα Παιδιά:

• location: Η θέση URL του HTML εγγράφου που εμφανίζεται μέσα στο παράθυρο

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

• history: Περιέχει μια λίστα από τα URL’s που έχουν επισκεφθεί.

• document: Το τρέχον έγγραφο ιστοσελίδας.

3.2.6 Το αντικείμενο Navigator

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

φυλλομετρητή:

Σ.Πάνης 21

Δημιουργία Χρονολογίου με ανοικτά δεδομένα

• appCodeName : Είναι το όνομα του κωδικού του φυλλομετρητή.

• appName : Είναι το πλήρες όνομα του φυλλομετρητή.

• appVersion : Είναι ο αριθμός της έκδοσης του φυλλομετρητή.

3.2.7 Δημιουργία Αντικειμένου

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

• new: Δημιουργεί ένα νέο αντικείμενο.

• this: Αναφορά σε τρέχον αντικείμενο.

• with: Ορίζει προεπιλεγμένο ένα αντικείμενο σε μια ομάδα εντολών.

Συνάρτηση δημιουργίας αντικειμένου (constructor):

Function FullName (fistname, lastname){

this.fistname = firstname;

this.lastname = lastname;

}

Δημιουργία στιγμιότυπου (instance) αντικειμένου:

John1 = new Fullname(“John”,”Johnson”);

3.2.8 Τροποποίηση Αντικειμένου

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

στις καταχωρήσεις στα στοιχεία των φορμών. Έχουμε τους εξής χειριστές συμβάντων

(event handlers) για τις ενέργειες αυτές:

Πίνακας 12: Χειριστές Συμβάντων

Χειριστής συμβάντων

Περιγραφή

onBlur

Το συμβάν αυτό λαμβάνει χώρα όταν χάνεται η εστίαση

από ένα αντικείμενο

onChange

Το συμβαν αυτό λαμβάνει χώρα όταν τροποποιείται το

περιεχόμενο ενός αντικειμένου

onClick

Το συμβάν αυτό λαμβάνει χώρα όταν γίνει κλικ με το

ποντίκι σε ένα αντικειμενο

onFocus

Το συμβάν αυτό λαμβάνει χώρα όταν κάνουμε εστίαση

μέσα σε ένα πεδίο φόρμας

onLoad

Το συμβάν αυτό λαμβάνει χώρα όταν τελειώσει το

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

onMouseOver

Το συμβάν αυτό λαμβάνει χώρα όταν ο δείκτης του

ποντικιού τοποθετείται πάνω από ένα σύνδεσμο

onSelect

Το συμβάν αυτό λαμβάνει χώρα όταν γίνει επιλογή ενός

κειμένου

onSubmit

Το συμβάν αυτό λαμβάνει χώρα όταν κάνουμε κλικ με το

ποντίκι σε ένα πλήκτρο υποβολής

onUnload

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

από μια ιστοσελίδα

Σ.Πάνης 22

Δημιουργία Χρονολογίου με ανοικτά δεδομένα

4. Εργαλεία Δημιουργίας Χρονολογίων

4.1 Εισαγωγή στα εργαλεία δημιουργίας χρονολογίων

Υπάρχουν δεκάδες εργαλεία δημιουργίας χρονολογίου (timeline) στο διαδίκτυο, αλλά τα

επόμενα τέσσερα ξεχωρίζουν για την απλότητα και την κομψότητα τους. Δύο από αυτά

τα εργαλεία δημιουργούν παραδοσιακά χρονολόγια (Timeline.JS, TimelineSetter), ενώ

τα άλλα δύο χρησιμοποιούνται για τη σύνδεση ιστοριών με χάρτες (StoryMap.JS,

TimeMapper) [7].

4.2 Timeline.JS

Ο Zach Wise του Knight Lab δημιούργησε το Timeline.JS ως έναν εύκολο τρόπο

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

πιο ευέλικτα εργαλεία δημιουργίας χρονολογίων στο διαδίκτυο. Το Timeline.JS έχει

χρησιμοποιηθεί από το περιοδικό Le Monde, Time Magazine και πολλές άλλες

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

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

αναλυτικά στο επόμενο κεφάλαιο [8].

Εικόνα 1: Η ζωή του Nelson Mandela από το Times.com με Timeline.JS

4.3 StoryMap.JS

Ενώ το Timeline.JS του Knight Lab διευκολύνει την αφήγηση των ιστοριών που

εκτυλίσσονται χρονικά, το StoryMap.JS διευκολύνει την αφήγηση ιστοριών που

εκτείνονται χρονικά αλλά και σε διαφορετικές τοποθεσίες. Με το StoryMap μπορείτε να

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

διαδραστικό χάρτη.

Το StoryMapJS είναι ένα εργαλείο που επιτρέπει στους δημοσιογράφους να σχεδιάζουν

αφηγήσεις στις οποίες η τοποθεσία αποτελεί βασικό στοιχείο της ιστορίας. Φανταστείτε,

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

ή το ταξίδι ενός μετανάστη σε μια νέα χώρα.

Το πιο σημαντικό στοιχείο του StoryMapJS είναι ένας χάρτης που σας επιτρέπει να

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

Σ.Πάνης 23

Δημιουργία Χρονολογίου με ανοικτά δεδομένα

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

με πλούσια μέσα ενημέρωσης από το Flickr, το YouTube, το Vimeo , Twitter, Wikipedia

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

Το εργαλείο είναι δωρεάν και ανοιχτό σε οποιονδήποτε έχει λογαριασμό Google.

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

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

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

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

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

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

Το StoryMapJS είναι επί του παρόντος σε έκδοση beta, αλλά έχει αναπτυχθεί από

αρκετούς ειδησεογραφικούς οργανισμούς σε όλο τον κόσμο - το Milwaukee Journal

Sentinel, το Boston.com και το The Times.

Όπως το Timeline.JS, το StoryMap.JS περιλαμβάνει τόσο εύχρηστα όσο και προηγμένα

χαρακτηριστικά δημιουργίας. Σε αντίθεση με το Timeline.JS, το StoryMap.JS παρέχει

μια εύχρηστη διεπαφή ιστού για τη δημιουργία ιστοριών - δεν χρειάζεται να

δημιουργήσετε το δικό σας υπολογιστικό φύλλο (spreadsheet).

Το StoryMapJS έχει άδεια χρήσης βάσει του Mozilla Public License 2.0 [9].

Εικόνα 2: Το ταξίδι της Aryas στο Westeros από το Knight Lab με StoryMap.JS

4.4 TimeMapper

Το TimeMapper πρόκειται για την εφεύρεση του OFKN Labs, χτισμένη πάνω από το

Timeline.JS και προσθέτοντας νέα χαρακτηριστικά. Η πιο χρήσιμη προσθήκη του

TimeMapper στο Timeline.JS είναι η ενσωματωμένη υποστήριξή του σε timemaps,

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

Η χρήση του TimeMapper είναι παρόμοια με τη χρήση του Timeline.JS.

Το TimeMapper είναι ένα έργο ανοιχτού κώδικα των Open Knowledge Foundation Labs.

Είναι δυνατή χάρη σε μια σειρά από εξαρτήματα ανοιχτής πηγής, όπως το TimelineJS,

το ReclineJS, το Leaflet, το Backbone και το Bootstrap [10].

Σ.Πάνης 24

Δημιουργία Χρονολογίου με ανοικτά δεδομένα

Εικόνα 3: Medieval Philosophers από την ofkn Labs με TimeMapper

4.5 TimelineSetter

Το TimelineSetter είναι ένα εργαλείο γραμμής εντολών δημιουργίας χρονολογίων,

γραμμένο από την ProPublica για το newsroom. Εφημερίδες όπως οι LA Times και

Huffington Post χρησιμοποίησαν το TimelineSetter για να δημιουργήσουν όμορφα

διαδραστικά χρονολόγια.

Το TimelineSetter μετατρέπει ειδικά μορφοποιημένα αρχεία CSV σε περιεχόμενο ιστού

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

περιεχομένου. Τα χρονολόγια του TimelineSetter μπορούν να τροποποιειθούν

προσαρμόζοντας την έξοδο CSS και JavaScript της εντολής.

Απαιτεί τη χρήση ενός κελύφους για την τροποποίηση των στατικών αρχείων CSV. Το

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

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

γραμμής (σε αντίθεση με τον διακομιστή Web που εμφανίζει το χρονολόγιο). Το έργο

χωρίζεται σε δύο μέρη: ένα πακέτο Ruby (μαζί με ένα εκτελέσιμο) για τη δημιουργία των

πόρων, και το HTML, CSS και JavaScript για το ίδιο το χρονολόγιο. Το TimelineSetter

θα δημιουργήσει μια μοναδική σελίδα HTML που θα ενσωματώνει ένα αντικείμενο

JSON με τα δεδομένα σας. Το CSS και το JavaScript είναι πανομοιότυπα για κάθε

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

απλά να τα τοποθετήσετε όταν αναπτύσσετε ένα χρονολόγιο ή (με την επιλογή minified)

να τα συσκευάσετε με την HTML σας και να τα επικολλήσετε στο CMS σας όλα με τη

μία.

Το TimelineSetter βασίζεται στο TableFu, καθώς και στις βιβλιοθήκες JavaScript

Underscore και jQuery. Όλα αυτά είτε εγκαθίστανται μαζί με το TableSetter είτε είναι

συσκευασμένα με τον πηγαίο κώδικα. Ενώ σε λειτουργικά βασισμένα σε Unix/Linux έχει

υποστήριξη, τα Windows λειτουργικά δεν έχουν. Σταμάτησε να αναπτύσσεται το 2013

[11].

Σ.Πάνης 25

Δημιουργία Χρονολογίου με ανοικτά δεδομένα

Εικόνα 4: Arab Awakening από το PBS.org με το TimelineSetter

Σ.Πάνης 26

Δημιουργία Χρονολογίου με ανοικτά δεδομένα

5. Το εργαλείο Timeline.JS

Το TimelineJS είναι ένα εργαλείο ανοιχτού κώδικα που επιτρέπει σε οποιονδήποτε να

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

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

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

τους JSON για να δημιουργήσουν προσαρμοσμένες εγκαταστάσεις, διατηρώντας

ταυτόχρονα τη βασική λειτουργικότητα του TimelineJS.

Το TimelineJS μπορεί να τραβήξει μέσα από διάφορες πηγές. Twitter, Flickr, YouTube,

Vimeo, Vine, Dailymotion, Χάρτες Google, Βικιπαίδεια, SoundCloud, Cloud Document

και πολλά άλλα!

Το TimelineJS κυκλοφορεί υπό την Κοινόχρηστη Άδεια Mozilla (MPL), έκδοση 2.0. Αυτό

σημαίνει ότι το TimelineJS είναι ελεύθερο να "χρησιμοποιηθεί, να αναπαραχθεί, να

διατεθεί, να τροποποιηθεί, να προβληθεί, να εκτελεσθεί, να διανεμηθεί" ή να

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

το TimelineJS.

5.1 Χρήση – Επιλογές

TimelineJS λειτουργεί σε κάθε τοποθεσία ή ιστολόγιο σε τέσσερα εύκολα βήματα:

1. Δημιουργήστε ένα νέο υπολογιστικό φύλλο Google χρησιμοποιώντας το

πρότυπο:

https://docs.google.com/spreadsheets/d/1pHBvXN7nmGkiG8uQSUB82eNlnL8x

Hu6kydzH_-eguHQ/copy . Θα χρειαστεί να αντιγράψετε το πρότυπο σε ένα

λογαριασμό στο Google Drive. Εισάγετε τις ημερομηνίες, το κείμενο και τα links

με τα μέσα, μέσα στις κατάλληλες στήλες. Μην αλλάζετε τις κεφαλίδες στηλών,

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

φύλλο.

2. Δημοσιεύστε στο Web το υπολογιστικό φύλλο Google: Στις επιλογές αρχείων

του Google Drive, για το αρχείο σας, επιλέξτε “Δημοσιεύστε στο Web” (“Publish

to the Web”). Στο επόμενο παράθυρο, κάντε κλικ στο μπλε κουμπί "δημοσίευση"

( “publish”). Όταν ρωτήθηκε: "Είστε σίγουροι ...;" (“Are you sure…?”) Κάντε κλικ

στο κουμπί OK. Τώρα, αντιγράψτε τη διεύθυνση URL που εμφανίζεται στο

κέντρο του παραθύρου. Θα το χρησιμοποιήσετε στο επόμενο βήμα.

3. Αντιγράψτε / επικολλήστε τη διεύθυνση URL του υπολογιστικού φύλλου στο

πλαίσιο που βρίσκεται στην ιστοσελίδα https://timeline.knightlab.com/#make

(Βήμα 3) για να δημιουργήσετε το χρονολόγιό σας. Στο σημείο αυτό μπορείτε να

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

γλώσσα εμφάνισης και για ποια θα είναι η αρχική διαφάνεια (slide).

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

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

πλαισίου για ενσωμάτωση σε δικιά σας σελίδα με iframe. Επίσης, δίνεται η

δυνατότητα προεπισκόπησης.

5.2 Τύποι Πολυμέσων

Στον παρακάτω πίνακα αναφέρονται οι τύποι πολυμέσων που υποστηρίζονται από το

Timeline.JS και ο τρόπος χρήσης τους:

Σ.Πάνης 27

Δημιουργία Χρονολογίου με ανοικτά δεδομένα

Πίνακας 13: Τύποι Πολυμέσων

Τύπος Μέσου

Τρόπος εισαγωγής

Εικόνα

Εάν η διεύθυνση URL σας τελειώνει σε jpg, gif, png ή jpeg, θα

χρησιμοποιηθεί ως πηγή για ετικέτα εικόνας(image tag). Θα πρέπει

επίσης να δουλεύει αν υπάρχει μια συμβολοσειρά ερωτήματος(query

string) μετά την επέκταση, ενδεχομένως προσδιορίζοντας δυναμικές

τιμές πλάτους και ύψους

Online βίντεο

Χρησιμοποιήστε τη διεύθυνση URL για τη σελίδα του βίντεο για

Vimeo, DailyMotion, Vine και YouTube. Το χρονολόγιο τιμά τις

παραμέτρους χρόνου εκκίνησης του Youtube

Αρχεία βίντεο

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

Το χρονολόγιο υποστηρίζει επί του παρόντος αρχεία .mp4

Αρχεία ήχου

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

Το χρονολόγιο υποστηρίζει αρχεία .mp3, .m4a και .wav

SoundCloud

Χρησιμοποιήστε τη διεύθυνση URL για τη σελίδα SoundCloud.

Spotify

Υποστηρίζει τη χρήση κομματιών, άλμπουμ και playlist χρηστών.

Χρησιμοποιήστε τη διεύθυνση URL που αποκτήσατε κάνοντας κλικ

στην επιλογή "Copy Spotify URL"

Twitter

Χρησιμοποιήστε τον κώδικα ενσωμάτωσης(embed code) του Twitter

ή τη διεύθυνση URL της σελίδας του tweet

Χάρτες Google

Χρησιμοποιήστε τη διεύθυνση URL για τη σελίδα των Χαρτών Google

(εκτός εάν χρησιμοποιείτε το Streetview, το οποίο απαιτεί τη

διεύθυνση URL ενσωμάτωσης που βρίσκεται στην ενότητα "Κοινή

χρήση"). Οι συντεταγμένες, τα αποτελέσματα αναζήτησης, οι

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

Google Plus

Χρησιμοποιήστε τη διεύθυνση URL για τη φωτογραφία Google Plus

που βρέθηκε κάνοντας δεξί κλικ (ή κλικ ελέγχου) της εικόνας και

επιλέγοντας "Αντιγραφή διεύθυνσης URL εικόνας"

Instagram

Χρησιμοποιήστε τη διεύθυνση URL της σελίδας της φωτογραφίας

Instagram

Flickr

Χρησιμοποιήστε τη διεύθυνση URL για τη σελίδα της φωτογραφίας

του Flickr. Ο σύντομος σύνδεσμος που παρέχεται στο μενού κοινής

χρήσης (π.χ. https://flic.kr/p/sv3VN6) θα λειτουργήσει επίσης

Imgur

Χρησιμοποιήστε τη διεύθυνση URL της σελίδας της φωτογραφίας

Imgur

DocumentClou

Χρησιμοποιήστε τη διεύθυνση URL της σελίδας του εγγράφου

DocumentCloud

Wikipedia

Χρησιμοποιήστε τη διεύθυνση URL της σελίδας του άρθρου της

Wikipedia

Storify

Χρησιμοποιήστε τη διεύθυνση URL του στοιχείου Storify

iframe

Αντί μιας διεύθυνσης URL, μπορείτε να χρησιμοποιήσετε τη σήμανση

τύπων μέσων που η Timeline JS δεν υποστηρίζει άμεσα

Blockquote

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

<blockquote> γύρω από το κείμενο που θέλετε να παραθέσετε

Wistia

Χρησιμοποιήστε τη διεύθυνση URL του βίντεο Wistia. Μπορείτε να το

βρείτε είτε στην καρτέλα "Κοινή χρήση κοινής χρήσης"(Social

Sharing) είτε "Ενσωμάτωση κώδικα"(Embed Code) του βίντεό σας

Embedly

Εάν το TimelineJS δεν αναγνωρίζει τη διεύθυνση URL του

πολυμέσου σας, θα προσπαθήσει να χρησιμοποιήσει το Embed.ly

για να βρει το καλύτερο δυνατό τρόπο να το αποδώσει στο

χρονολόγιό σας

Σ.Πάνης 28

Δημιουργία Χρονολογίου με ανοικτά δεδομένα

5.3 Χρήση με JSON

Κάθε χρονολόγιο χρειάζεται δεδομένα σχετικά με τα γεγονότα που πρόκειται να

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

φύλλο Google για το χρονολόγιο. Άλλη μια επιλογή είναι να γραφεί κώδικας για την

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

κατανοηθεί ο τρόπος μορφοποίησης των δεδομένων.

Η μορφή TimelineJS JSON αποτελείται από ένα μόνο αντικείμενο JSON με τις

ακόλουθες ιδιότητες:

Πίνακας 14: Ιδιότητες Αντικειμένου JSON

Όνομα

Απαιτείται;

Περιγραφή

events

Ναι

Μια λίστα JSON αντικειμένων “slide”

title

Όχι

Ένα αντικείμενο “slide”

eras

Όχι

Μια λίστα JSON αντικειμένων “era”

scale

Όχι

Είτε “human” είτε “cosmological”. Εάν δεν έχει καθοριστεί

κλίμακα, η προεπιλογή είναι “human”.H “cosmological”

απαιτείται για να χειριστεί τις ημερομηνίες στο πολύ

μακρινό παρελθόν ή το μέλλον

Τα αντικείμενα διαφάνειας (slide) είναι αντικείμενα JSON με τις ακόλουθες ιδιότητες:

Πίνακας 15: Ιδιότητες Αντικειμένων Slide

Όνομα

Απαιτείται;

Περιγραφή

start_date

Ναι(εκτός στην

διαφάνεια title)

Ένα αντικείμενο “date”

end_date

Όχι

Ένα αντικείμενο “date”

text

Όχι(αλλά

προτείνεται)

Ένα αντικείμενο “text”

media

Όχι

Ένα αντικείμενο “media”

group

Όχι

Οποιοδήποτε κείμενο. Εάν υπάρχει, το χρονολόγιο θα

οργανώσει συμβάντα με την ίδια τιμή, ώστε το “group”

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

σειρές, ξεχωριστά από συμβάντα σε άλλα “group”. Η

κοινή τιμή για τo “group” εμφανίζεται ως ετικέτα στο

αριστερό άκρο της πλοήγησης

display_date

Όχι

Μια συμβολοσειρά που θα χρησιμοποιηθεί όταν το

χρονολόγιο εμφανίζει την ημερομηνία για αυτό. Εάν

χρησιμοποιηθεί, οι τιμές display_date υπερέχουν τις

τιμές που έχουν οριστεί στην ημερομηνία έναρξης ή

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

θέλετε να ελέγξετε τον τρόπο που οι δύο ημερομηνίες

σχετίζονται μεταξύ τους

background

Όχι

Ένα αντικείμενο Javascript. Το αντικείμενο μπορεί να

έχει αυτές τις ιδιότητες:

url: η διεύθυνση URL που δείχνει μια εικόνα που θα

χρησιμοποιηθεί ως φόντο

Σ.Πάνης 29

Δημιουργία Χρονολογίου με ανοικτά δεδομένα

color: ένα χρώμα CSS, σε δεκαεξαδικό (π.χ. # 0f9bd1)

ή μια έγκυρη λέξη-κλειδί χρώματος CSS

autolink

Όχι

Μία τιμή boolean (true ή false). Οι προεπιλογή είναι

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

σαρώσει πεδία text και θα προσθέσει αυτόματα <a>

ετικέτες έτσι ώστε οι σύνδεσμοι και οι διευθύνσεις

ηλεκτρονικού ταχυδρομείου να είναι "clickable". Εάν

έχει οριστεί η τιμή "false", μπορείτε να εφαρμόσετε μη

αυτόματα τις ετικέτες στα κατάλληλα πεδία όταν

θέλετε συνδέσμους. Το Autolinking ισχύει για το πεδίο

text σε ένα αντικείμενο text και τα πεδία caption και

credit σε ένα αντικείμενο media

unique_id

Όχι

Μια τιμή συμβολοσειράς που είναι μοναδική μεταξύ

όλων των διαφανειών στο χρονολόγιό σας. Εάν δεν

έχει οριστεί, το TimelineJS θα κατασκευάσει ένα

αναγνωριστικό με βάση την επικεφαλίδα, αλλά αν

επεξεργαστείτε αργότερα τον τίτλο σας, το

αναγνωριστικό θα αλλάξει. Τα μοναδικά

αναγνωριστικά χρησιμοποιούνται όταν

χρησιμοποιείται η επιλογή hash_bookmark και μπορεί

επίσης να χρησιμοποιηθεί με τη μέθοδο

timeline.goToId () για να μετακινήσετε προγραμματικά

τη χρονική γραμμή σε μια συγκεκριμένη διαφάνεια

Τα αντικείμενα era είναι αντικείμενα JSON τα οποία χρησιμοποιούνται για την

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

δομή, είναι ουσιαστικά πολύ περιορισμένα αντικείμενα "slide".

Πίνακας 16: Ιδιότητες Αντικειμένων Era

Όνομα

Απαιτείται;

Περιγραφή

start_date

Ναι

Ένα αντικείμενο “date”

end_date

Ναι

Ένα αντικείμενο “date”

text

Όχι(αλλά προτείνεται)

Ένα αντικείμενο “text”

Τα αντικείμενα date είναι αντικείμενα JSON με τις ακόλουθες ιδιότητες:

Πίνακας 17: Ιδιότητες Αντικειμένων Date

Όνομα

Απαιτείται;

Περιγραφή

year

Ναι

Ενας αριθμός. Μην χρησιμοποιείτε κόμματα.

Π.Χ. χρόνια θα πρέπει να είναι αρνητικοί

αριθμοί. Μη χρησιμοποιείτε τα γράμματα

"BC", "BCE" ή οποιαδήποτε άλλα

month

Όχι

Ένας αριθμός από 1-12

day

Όχι

Ένας αριθμός

hour

Όχι

Ένας αριθμός από 0-24

minute

Όχι

Ένας αριθμός από 0-59

second

Όχι

Ένας αριθμός από 0-59

millisecond

Όχι

Ένας αριθμός

display_date

Όχι

Μια συμβολοσειρά για την παρουσίαση της

ημερομηνίας. Χρήσιμη αν η μορφοποίηση

ημερομηνίας του χρονολογίου δεν ταιριάζει

στις ανάγκες σας

Σ.Πάνης 30

Δημιουργία Χρονολογίου με ανοικτά δεδομένα

Τα αντικείμενα text είναι αντικείμενα JSON. Για κάθε διαφάνεια, τα αντικείμενα text είναι

προαιρετικά. Έχουν τις ακόλουθες ιδιότητες:

Πίνακας 18: Ιδιότητες Αντικειμένων Text

Όνομα

Απαιτείται;

Περιγραφή

headline

Όχι

Οποιοδήποτε κείμενο. Η σήμανση HTML είναι

εντάξει. Το κενό είναι επίσης εντάξει

text

Όχι

Οποιοδήποτε κείμενο. Η σήμανση HTML είναι

εντάξει. Το κενό είναι εντάξει. Δεν

χρησιμοποιείται για αντικείμενα era

Τα αντικείμενα media είναι αντικείμενα JSON. Για κάθε διαφάνεια, τα αντικείμενα media

είναι προαιρετικά. Έχουν τις ακόλουθες ιδιότητες:

Πίνακας 19: Ιδιότητες Αντικειμένων Media

Όνομα

Απαιτείται;

Περιγραφή

url

Ναι

Στις περισσότερες περιπτώσεις, μια διεύθυνση

URL

caption

Όχι

Οποιοδήποτε κείμενο. Η σήμανση HTML είναι

εντάξει

credit

Όχι

Οποιοδήποτε κείμενο. Η σήμανση HTML είναι

εντάξει

thumbnail

Όχι

Μια διεύθυνση URL για μια εικόνα που θα

χρησιμοποιηθεί στον δείκτη timenav για αυτό το

συμβάν. Αν παραλειφθεί, το χρονολόγιο θα

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

του μέσου. Δεν έχει σημασία για τις διαφάνειες

τίτλου, επειδή δεν έχουν δείκτη

alt

Όχι

Μια alt ετικέτα για την εικόνα σας. Αν δεν

παρέχεται, θα χρησιμοποιηθεί η caption, εάν

υπάρχει

title

Όχι

Ένας τίτλος για την εικόνα σας. Αν δεν παρέχεται,

θα χρησιμοποιηθεί η credit, εάν υπάρχει

5.4 CSS επιλογές

Αν θέλετε να αλλάξετε τον τρόπο που εμφανίζεται η TimelineJS, δεν υπάρχει τρόπος να

παρακάμψετε το CSS χρησιμοποιώντας την ενσωμάτωση iframe. Θα χρειαστεί να είστε

σε θέση να εμφανίσετε το Timeline σε javascript στη δική σας σελίδα. Στη συνέχεια, είτε

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

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

παρουσιάσεις του TimelineJS.

Αυτοί οι πίνακες παραθέτουν τις κύριες κατηγορίες CSS που χρησιμοποιεί το

TimelineJS. Ίσως να μπορείτε να τροποποιήσετε μερικά από αυτά. Ωστόσο, το

TimelineJS χρησιμοποιεί Less για προεπεξεργασία CSS, πράγμα που σημαίνει ότι

ορισμένοι από τους κανόνες CSS είναι πολύ συγκεκριμένοι.

Οι επιλογές διαφάνειας επηρεάζουν τις περιοχές μέσων και κειμένου των διαφανειών:

Σ.Πάνης 31

Δημιουργία Χρονολογίου με ανοικτά δεδομένα

Πίνακας 20: Επιλογές Διαφάνειας

Όνομα Κλάσης

Τύπος

Στοιχείου

Περιγραφή

tl-timeline

div

Προστίθεται στο αρχικό div που περιέχει το

χρονολόγιο. Περιέχει όλο το στοιχείο

tl-slider-

container-mask

div

Ένα περιτύλιγμα γύρω από τις διαφάνειες. Τα

χρώματα ή οι εικόνες φόντου μπορούν να ρυθμιστούν

εδώ

tl-slide

div

Κάθε πλήρες σύνολο αντικειμένων slide

tl-media-content-

container

div

Περιέχει τo media, το credit και το caption του

tl-media-content

div

Περιέχει το στοιχείο media. Χρησιμοποιήστε αυτό για

να προσθέσετε σύνορα, παραγεμίσματα και πολλά

άλλα

tl-credit

div

Το credit του στοιχείου media

tl-caption

div

Το caption του στοιχείου media

tl-text

div

Το κείμενο του slide και το επίθεμα. Προσθέστε εδώ

το χρώμα φόντου στο τμήμα κειμένου του slide

tl-text-content-

container

div

Το κείμενο του slide μείον το padding

tl-headline-date

Η ημερομηνία που εμφανίζεται πάνω από την

επικεφαλίδα του slide

tl-headline

Η επικεφαλίδα του slide. Τα slides τίτλου έχουν την

πρόσθετη κλάση .tl-headline-title. Σημειώστε ότι

πιθανόν θα χρειαστεί να χρησιμοποιήσετε τον

επιλογέα h2.tl-headline για να αλλάξετε την εμφάνιση

των τίτλων των slide

tl-text-content

div

Το κείμενο του slide, σε ετικέτες p

tl-slidenav-next ή

tl-slidenav-

div

Η πλοήγηση και το κείμενο για κίνηση προς τα

εμπρός και πίσω. Χρησιμοποιήστε τα μαζί με τους

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

πλοήγησης και το κείμενο

tl-slidenav-

icon::before

div

Εισάγει το βέλος πλοήγησης. Προστίθεται μπροστά

το .tl-slidenav-next ή .tl-slidenav-previous για να

καθορίσετε ποιο βέλος θα εμφανίσετε

tl-slidenav-title

div

Ο τίτλος της επόμενης / προηγούμενης διαφάνειας.

Προστίθεται μπροστά το .tl-slidenav-next ή .tl-

slidenav-previous για να καθορίσετε τον τίτλο που θα

εμφανιστεί

tl-slidenav-

description

div

Η περιγραφή της επόμενης / προηγούμενης

διαφάνειας. Εμφανίζεται στην αιώρηση. Προστίθεται

μπροστά το .tl-slidenav-next ή .tl-slidenav-previous

για να καθορίσετε ποια περιγραφή θα εμφανιστεί

Οι επιλογές Timenav επηρεάζουν το τμήμα του χρονολογίου που εμφανίζει τις

χρονολογικές σειρές:

Πίνακας 21: Επιλογές Timenav

Όνομα Κλάσης

Τύπος

Στοιχείου

Περιγραφή

tl-timenav

div

Το στοιχείο χρονικής γραμμής. Αλλάξτε εδώ το

χρώμα φόντου

Σ.Πάνης 32

Δημιουργία Χρονολογίου με ανοικτά δεδομένα

tl-menubar

div

Τα εικονίδια ζουμ

tl-timemarker

div

Όλα τα στοιχεία που απαρτίζουν τους δείκτες

(flags και lines) στο timenav. Ο δείκτης της

τρέχουσας διαφάνειας έχει επίσης την κλάση .tl-

timemarker-active

tl-timemarker-

content-container

div

Το flag του δείκτη. Μπορείτε να ορίσετε εδώ το

χρώμα φόντου και το χρώμα κειμένου του flag.

Όταν γράφετε style για αυτόν τον επιλογέα,

προφέρετε αυτόν τον επιλογέα με .tl-timemarker

(για slide’s εκτός από το τρέχον slide) ή .tl-

timemarker.tl-timemarker-active (για το τρέχον

slide)

tl-timemarker-

timespan

div

Το πλάτος του δείκτη. Αυτό εμφανίζει το

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

αν το συμβάν σας έχει ημερομηνία έναρξης και

λήξης. Όταν γράφετε style για αυτόν τον

επιλογέα, προφέρετε αυτόν τον επιλογέα με .tl-

timemarker (για slide’s εκτός από το τρέχον

slide) ή .tl-timemarker.tl-timemarker-active (για το

τρέχον slide)

tl-timemarker-

media-container

div

Το εικονίδιο ή η μικρογραφία που

αντιπροσωπεύει το μέσο στη σημαία του

χρονολογίου

tl-headline

Το κείμενο της σημαίας. Ρυθμίστε την οικογένεια

χρωμάτων και γραμματοσειρών εδώ. Σημειώστε

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

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

Αν θέλετε να αλλάξετε μόνο την επικεφαλίδα

στην πλοήγηση, χρησιμοποιήστε το .tl-

timemarker .tl-timemarker-content-container .tl-

timemarker-content .tl-timemarker-text h2.tl-

headline

tl-timeaxis

div

Η κλίμακα που αντιπροσωπεύει το χρονολόγιο

tl-timeaxis-

background

div

Η εμφάνιση του φόντου για την κλίμακα.

tl-timeaxis-

tick:before

div

Η γραμμή που σχεδιάζει τη κλίμακα. Ορίστε το

χρώμα φόντου για να αλλάξετε το χρώμα της

γραμμής. Πρόλογος με .tl-timeaxis-major για να

στοχεύσετε τα μεγάλα σημεία ή .tl-timeaxis-minor

για να στοχεύσετε τα μικρά σημεία

5.5 Timeline.JS με JavaScript

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

να την ενσωματώσετε σε άλλα μέρη της σελίδας σας, θα πρέπει να κατανοήσετε

κάποιες πιο τεχνικές λεπτομέρειες. Υπάρχουν τρία βασικά πράγματα που πρέπει να

συμπεριλάβετε στη σελίδα σας για να ενσωματώσετε ένα χρονολόγιο:

• Μια ετικέτα link που φορτώνει το CSS Timeline.

• Μια ετικέτα script που φορτώνει το javascript του Timeline.

• Μια δεύτερη ετικέτα script που δημιουργεί το χρονολόγιο.

Σ.Πάνης 33

Δημιουργία Χρονολογίου με ανοικτά δεδομένα

Και για περαιτέρω μορφοποίηση:

• Μια ετικέτα link για προσαρμοσμένες γραμματοσειρές.

• Μια ετικέτα link για να αντικαταστήσει μερικά από τα CSS του TimelineJS.

• Κωδικός Javascript για να διαβάσετε τα δεδομένα διαμόρφωσης από ένα

υπολογιστικό φύλλο Google.

href="https://cdn.knightlab.com/libs/timeline3/latest/css/timeline.css">

// The TL.Timeline constructor takes at least two arguments:

// the id of the Timeline container (no '#'), and

// the URL to your JSON data file or Google spreadsheet.

// the id must refer to an element "above" this code,

// and the element must have CSS styling to give it width and height

// optionally, a third argument with configuration options can be passed.

// See below for more about options.

timeline = new TL.Timeline('timeline-embed',

'https://docs.google.com/spreadsheets/d/1cWqQBZCkX9GpzFtxCWHoqFXCHg-

ylTVUWlnrdYMzKUI/pubhtml');

</script>

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

αυτήν τη διεύθυνση URL ως το δεύτερο όρισμα, ακριβώς σαν να φορτώνετε δεδομένα

από ένα υπολογιστικό φύλλο Google. Εάν αντ 'αυτού έχετε κάτι στη σελίδα σας που θα

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

επιχείρημα.

var timeline_json = make_the_json(); // you write this part

// two arguments: the id of the Timeline container (no '#')

// and the JSON object or an instance of TL.TimelineConfig created from

// a suitable JSON object

window.timeline = new TL.Timeline('timeline-embed', timeline_json);

</script>

Σ.Πάνης 34

Δημιουργία Χρονολογίου με ανοικτά δεδομένα

Το TL.Timeline προσφέρει μια προαιρετική τρίτη παράμετρο που μπορείτε να

χρησιμοποιήσετε για να περάσετε σε πρόσθετες επιλογές TimelineJS.

var additionalOptions = {

start_at_end: true,

default_bg_color: {r:0, g:0, b:0},

timenav_height: 250

}

timeline = new TL.Timeline('timeline-embed',

'https://docs.google.com/spreadsheets/d/1cWqQBZCkX9GpzFtxCWHoqFXCHg-

ylTVUWlnrdYMzKUI/pubhtml',

additionalOptions);

</script>

Το TimelineJS προσφέρει διάφορα προεπιλεγμένα σύνολα γραμματοσειρών. Όταν

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

χρησιμοποιείτε τη μέθοδο javascript, θα πρέπει να τις φορτώσετε μόνοι σας.

Για να τις συμπεριλάβετε, χρησιμοποιήστε τη σήμανση όπως αυτή, μια παραλλαγή στο

παραπάνω βήμα 1:

href="https://cdn.knightlab.com/libs/timeline3/latest/css/timeline.css">

href="https://cdn.knightlab.com/libs/timeline3/latest/css/fonts/font.abril-droidsans.css">

Σ.Πάνης 35

Δημιουργία Χρονολογίου με ανοικτά δεδομένα

6. Μια εφαρμογή με το Timeline.JS

6.1 Εισαγωγή

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

για την δημιουργία μιας ιστοσελίδας με χρονολόγιο. Στις επόμενες ενότητες θα δούμε

αναλυτικά πως δημιουργήθηκε η ιστοσελίδα «180 χρόνια ΕΚΠΑ» με αποσπάσματα από

τον κώδικα και μερικές εξηγήσεις.

6.2 Η δομή της εφαρμογής

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

σκελετό της σε HTML:

<!DOCTYPE html>

<head>

<title>180 Χρόνια ΕΚΠΑ</title>

</head>

<a href="#" class="navbar-brand"><img

src="images/UOA_Logo_small.png" class="img-responsive" alt="logo"></a>

</div>

<li><a href="#home" class="smoothScroll">ΑΡΧΙΚΗ</a></li>

<li><a href="#about" class="smoothScroll">ΠΛΗΡΟΦΟΡΙΕΣ</a></li>

<li><a href="#contact" class="smoothScroll">ΕΠΙΚΟΙΝΩΝΙΑ</a></li>

</ul>

</div>

Σ.Πάνης 36

Δημιουργία Χρονολογίου με ανοικτά δεδομένα

</div>

</section>

</div>

</div>

</div>

</footer>

</body>

</html>

Αυτή η δομή χωρίζει την ιστοσελίδα σε 5 τομείς, το header-navbar, home, about,

contact και footer, όπως φαίνεται στο παρακάτω σχήμα.

Σ.Πάνης 37

Δημιουργία Χρονολογίου με ανοικτά δεδομένα

Σχήμα 1: Δομή της ιστοσελίδας

• Στο header-navbar θα τοποθετηθεί το λογότυπο και οι επιλογές πλοήγησης για την

ιστοσελίδα.

• Στο home θα τοποθετηθεί το Timeline.JS στοιχείο που είναι και το κύριο στοιχείο

της εφαρμογής.

• Στο about θα τοποθετηθούν γενικές πληροφορίες για την ιστοσελίδα και τον σκοπό

της.

• Στο contact θα τοποθετηθούν πληροφορίες επικοινωνίας όπως διεύθυνση,

τηλέφωνο, email και χάρτης Google.

• Στο footer θα τοποθετηθεί μήνυμα πνευματικής ιδιοκτησίας.

6.3 Μορφοποίηση με CSS

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

CSS στην έκδοση 3 που δίνει περισσότερες επιλογές. Οι κανόνες μορφοποίησης

βρίσκονται σε ένα ξεχωριστό αρχείο, το style.css το οποίο απλά δηλώνετε στο html

αρχείο για ενσωμάτωση. Στην συνέχεια, θα δούμε ένα απόσπασμα του αρχείου αυτού

με μια μικρή ανάλυση για τον ορισμό των κανόνων του body, της γραμματοσειράς και το

σχήμα για τον τομέα contact.

Για το body:

body

{

background: #ffffff;

font-family: 'Raleway', sans-serif;

font-weight: 400;

Σ.Πάνης 38

Δημιουργία Χρονολογίου με ανοικτά δεδομένα

position: relative;

}

Το background:#ffffff; δηλώνει ότι το υπόβαθρο της ιστοσελίδας θα είναι λευκό.

Το font-family: 'Raleway', sans-serif; font-weight: 400; δηλώνει ποια γραμματοσειρά να

χρησιμοποιηθεί.

Το position: relative; δηλώνει το σύστημα αναφοράς τοποθέτησης ανάμεσα στα

διάφορα στοιχεία, εδώ “σχετικό”, δηλαδή σε σχέση με τα υπόλοιπα στοιχεία.

Για το contact:

#contact

{

background: url('../images/contact-bg.jpg');

background-size: cover;

}

#contact h3

{ font-weight: bold;

padding-bottom: 20px;

}

Το background και background-size , δηλώνουν αντίστοιχα, ότι ο τομέας contact θα έχει

ως υπόβαθρο της εικόνα contact-bg.jpg και η εικόνα θα καλύπτει όλη τη περιοχή του

τομέα.

Το font-weight: bold και padding-bottom: 20px , δηλώνουν αντίστοιχα, ότι στον τομέα

contact, ότι έχει την ετικέτα κειμένου h3, τα κείμενα θα εμφανίζονται σε έντονη γραφή

και με απόσταση από πιο κάτω στοιχεία 20 pixel.

6.4 Λειτουργικότητα με JavaScript

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

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

καλέσουμε το API του Google Maps για να εμφανίσουμε έναν διαδραστικό χάρτη, με

κέντρο την τοποθεσία που επιλέξαμε, στον τομέα contact της ιστοσελίδας μας.

var map = '';

var center;

function initialize() {

var mapOptions = {

zoom: 16,

center: new google.maps.LatLng(37.9683751,23.7664477),

scrollwheel: false

};

map= new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

google.maps.event.addDomListener(map, 'idle', function() {

calculateCenter();

Σ.Πάνης 39

Δημιουργία Χρονολογίου με ανοικτά δεδομένα

});

google.maps.event.addDomListener(window, 'resize', function() {

map.setCenter(center);

});

}

function calculateCenter() {

center = map.getCenter();

}

function loadGoogleMap(){

var script = document.createElement('script');

script.type = 'text/javascript';

script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +

'callback=initialize';

document.body.appendChild(script);

}

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

θέλουμε: center: new google.maps.LatLng(37.9683751,23.7664477) (Οι συντεταγμένες

του Τμήματος Πληροφορικής και Τηλεπικοινωνιών, ΕΚΠΑ), να μην έχει λειτουργικότητα

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

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

μας.

6.5 Ενσωμάτωση του Timeline.JS

Το κύριο στοιχείο της ιστοσελίδας μας, είναι το Timeline.JS και ίσως είναι και το πιο

εύκολο στην υλοποίηση. Ακολουθώντας τα βήματα που περιγράφονται στο κεφάλαιο

5.1, παίρνουμε από την ιστοσελίδα του Knight Labs τον κώδικα iframe:

<iframe

src='https://cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=1dnzE9jH

Dq2NX0MllbaDfnWMihHnOTwd27iBIvfi3wHg&font=Default&lang=en&initial_zoom=2&h

eight=700' width='100%' height='750' webkitallowfullscreen mozallowfullscreen

allowfullscreen frameborder='0'></iframe><hr>

και τον τοποθετούμε στον τομέα home του αρχείου html μας:

<iframe

src='https://cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=1dnzE9jH

Dq2NX0MllbaDfnWMihHnOTwd27iBIvfi3wHg&font=Default&lang=en&initial_zoom=2&h

eight=700' width='100%' height='750' webkitallowfullscreen mozallowfullscreen

allowfullscreen frameborder='0'></iframe><hr>

Σ.Πάνης 40

Δημιουργία Χρονολογίου με ανοικτά δεδομένα

</section>

Αυτό είναι όλο. Από εκεί και πέρα, είναι θέμα επεξεργασίας του υπολογιστικού φύλλου

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

θέλουμε να εμφανίσουμε στο χρονολόγιό μας. Το τελικό προϊόν:

Εικόνα 5: Η ιστοσελίδα

Σ.Πάνης 41

Δημιουργία Χρονολογίου με ανοικτά δεδομένα

ΠΙΝΑΚΑΣ ΟΡΟΛΟΓΙΑΣ

Ξενόγλωσσος όρος

Ελληνικός Όρος

Title

Tίτλος

Heading

Επικεφαλίδα

Paragraph

Παράγραφος

List

Λίστα

Table

Πίνακας

Bold

Έντονη γραφή

Code

Κώδικας

Tag

Ετικέτα

Selector

Επιλογέας

Property

Ιδιότητα

Website

Ιστότοπος

Page

Σελίδα

Browser

Φυλλομετρητής

Client

Πελάτης

Server

Διακομιστής

Array

Πίνακας

Frame

Πλαίσιο

Constructor

Συνάρτηση δημιουργίας αντικειμένου

Instance

Στιγμιότυπο

Event handler

Χειριστής συμβάντων

Spreadsheet

Υπολογιστικό φύλλο

Slide

Διαφάνεια

Timeline

Χρονολόγιο

Σ.Πάνης 42

Δημιουργία Χρονολογίου με ανοικτά δεδομένα

ΣΥΝΤΜΗΣΕΙΣ – ΑΡΚΤΙΚΟΛΕΞΑ – ΑΚΡΩΝΥΜΙΑ

HTML

HyperText markup Language

CSS

Cascading Style Sheets

ISO

International Organisation for Standardization

SGML

Standard Generalized Markup Language

HTML5

HyperText Markup Language Version 5

PHP

PHP: Hypertext Preprocessor

URL

Uniform Resource Locator

CMS

Content Management System

JSON

JavaScript Object Notation

Less

Large Scale Scrum

ΕΚΠΑ

Εθνικό και Καποδιστριακό Πανεπιστήµιο Αθηνών

CSV

Comma Separated Values

MPL

Mozilla Public License

OFKN Labs

Open Knowledge Foundation Labs

API

Application programming interface

Σ.Πάνης 43

Δημιουργία Χρονολογίου με ανοικτά δεδομένα

ΠΑΡΑΡΤΗΜΑ Ι

Το αρχείο index.html:

<!DOCTYPE html>

<head>

<title>180 Χρόνια ΕΚΠΑ</title>

rel='stylesheet' type='text/css'>

</head>

<button class="navbar-toggle" data-toggle="collapse" data-

target=".navbar-collapse">

</button>

<a href="#" class="navbar-brand"><img

src="images/UOA_Logo_small.png" class="img-responsive" alt="logo"></a>

</div>

<li><a href="#home"

class="smoothScroll">ΑΡΧΙΚΗ</a></li>

<li><a href="#about"

class="smoothScroll">ΠΛΗΡΟΦΟΡΙΕΣ</a></li>

Σ.Πάνης 44

Δημιουργία Χρονολογίου με ανοικτά δεδομένα

<li><a href="#contact"

class="smoothScroll">ΕΠΙΚΟΙΝΩΝΙΑ</a></li>

</ul>

</div>

<iframe

src='https://cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=1dnzE9jH

Dq2NX0MllbaDfnWMihHnOTwd27iBIvfi3wHg&font=Default&lang=en&initial_zoom=2&h

eight=700' width='100%' height='750' webkitallowfullscreen mozallowfullscreen

allowfullscreen frameborder='0'></iframe><hr>

</section>

<div class="col-md-6 col-sm-6 wow fadeInLeft" data-wow-

delay="0.9s">

<h3>180 Χρόνια ΕΚΠΑ</h3>

<h4>Ένα χρονολόγιο για το Εθνικό και Καποδιστριακό

Πανεπιστήμιο Αθηνών</h4>

<p>Το Χρονολόγιο δημιουργήθηκε με αφορμή τον

εορτασμό των 180 ετών λειτουργίας από την ίδρυση του Εθνικού Καποδιστριακού

Πανεπιστήμιου Αθηνών το 1837.</p>

<p>Παρουσιάζονται μερικά από τα πιο σημαντικά

ιστορικά, πολιτισμικά και πολιτικά γεγονότα κατά την περίοδο αυτή.</p>

</div>

<div class="col-md-6 col-sm-6 wow fadeInRight" data-wow-

delay="0.9s">

<img src="images/EKPAmuseum.jpg" alt="EKPA

Museum" style="width:100%;">

</div>

Σ.Πάνης 45

Δημιουργία Χρονολογίου με ανοικτά δεδομένα

<div class="col-md-3 col-sm-4 wow fadeInLeft" data-wow-

delay="0.6s">

<h2><strong>180 χρόνια ΕΚΠΑ</strong></h2>

<p>Για να επικοινωνήσετε μαζί μας:</p>

<p><li><a

href="https://www.facebook.com/dituoa" class="fa fa-facebook"></a>D.I.T.</li></p>

<p><li><a href="http://www.uoa.gr/" class="fa fa-

link"></a>Εθνικό και Καποδιστριακό Πανεπιστήμιο Αθηνών</li></p>

<p><li><a href="http://www.di.uoa.gr/" class="fa

fa-link"></a> Τμήμα Πληροφορικής και Τηλεπικοινωνιών</li></p>

<p><li><a href="http://cultech.di.uoa.gr" class="fa

fa-link"></a> Cultech</li></p>

</ul>

</div>

<div class="col-md-3 col-sm-4 wow fadeIn" data-wow-

delay="0.9s">

<h3>Διεύθυνση</h3>

ΕΘΝΙΚΟ ΚΑΙ ΚΑΠΟΔΙΣΤΡΙΑΚΟ ΠΑΝΕΠΙΣΤΗΜΙΟ

ΑΘΗΝΩΝ,

ΤΜΗΜΑ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ

ΤΗΛΕΠΙΚΟΙΝΩΝΙΩΝ,

ΠΑΝΕΠΙΣΤΗΜΙΟΥΠΟΛΗ, ΙΛΙΣΙΑ,

ΑΘΗΝΑ, 157 84</p>

<p><i class="fa fa-phone too-icon"></i> +30-210-

1234567</p>

hello180@email.gr</p>

</address>

</div>

<div class="col-md-6 col-sm-6 wow fadeIn" data-wow-

delay="0.9s">

<h3>Χάρτης</h3>

</div>

</div>

Σ.Πάνης 46

Δημιουργία Χρονολογίου με ανοικτά δεδομένα

href="http://www.uoa.gr" target="_parent">Εθνικό και Καποδιστριακό Πανεπιστήμιο

Αθηνών</a> ,

<a rel="nofollow" href="http://www.di.uoa.gr"

target="_parent">Τμήμα Πληροφορικής και Τηλεπικοινωνιών</a></p>

<!--disable designed by

<small>Designed by Stefanos Panis</small>

disable designed by -->

</div>

<!-- disable footer icons <div class="col-md-4 col-sm-5">

</ul>

</div> disable footer icons -->

</div>

</footer>

</body>

</html>

Σ.Πάνης 47

Δημιουργία Χρονολογίου με ανοικτά δεδομένα

Το αρχείο custom.css:

body

{

background: #ffffff;

font-family: 'Raleway', sans-serif;

font-weight: 400;

position: relative;

}

h2, h3, h4

{

font-weight: bold;

}

{

line-height: 26px;

}

/* start all section */

#about, #contact

{

padding-top: 100px;

padding-bottom: 100px;

position: relative;

}

/* end all section */

/* start nagivation */

.navbar-default

{

background: #fff;

border: none;

box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.08);

margin: 0 !important;

padding: 0;

}

.navbar-default .navbar-brand

{

padding-top: 4px;

padding-bottom: 60px;

}

.navbar-default .navbar-nav li a

{

font-size: 13px;

font-weight: bold;

line-height: 35px;

}

.navbar-default .navbar-nav li a:hover

{

color: #7FB9E3;

Σ.Πάνης 48

Δημιουργία Χρονολογίου με ανοικτά δεδομένα

}

.navbar-default .navbar-nav > .active > a,

.navbar-default .navbar-nav > .active > a:hover,

.navbar-default .navbar-nav > .active > a:focus {

color: #7FB9E3;

background-color: transparent;

}

.navbar-default .navbar-toggle

{

border: none;

padding-top: 16px;

}

.navbar-default .navbar-toggle .icon-bar

{

background: #7FB9E3;

border-color: transparent;

}

.navbar-default .navbar-toggle:hover,

.navbar-default .navbar-toggle:focus { background-color: transparent }

/* end navigation */

/* start home */

#home

{

padding-top: 65px;

}

/* end home */

/* start about */

#about h3

{

color: #7FB9E3;

font-size: 40px;

padding-bottom: 10px;

}

#about h4

{

padding-bottom: 10px;

}

#about .progress

{

border-radius: 4px;

background: #ffffff;

height: 6px;

}

#about .progress .progress-bar-danger

{

background: #7FB9E3;

}

Σ.Πάνης 49

Δημιουργία Χρονολογίου με ανοικτά δεδομένα

#about .text-top

{

padding-top: 50px;

}

#about span

{

display: block;

padding-bottom: 10px;

}

#about small

{

font-weight: bold;

padding-left: 200px;

}

/* end about */

/* start contact */

#contact

{

background: url('../images/contact-bg.jpg');

background-size: cover;

background-repeat: no-repeat;

color: #ffffff;

}

#contact h3

{

font-weight: bold;

padding-bottom: 20px;

}

#contact .fa

{

color: #7FB9E3;

font-size: 18px;

padding-bottom: 14px;

}

#contact .form-control

{

background: #f2f2f2;

border-radius: 4px;

box-shadow: none;

margin-bottom: 20px;

transition: all 0.4s ease-in-out;

}

#contact input

{

height: 50px;

}

#contact input[type="submit"]

{

color: #202020;

Σ.Πάνης 50

Δημιουργία Χρονολογίου με ανοικτά δεδομένα

font-weight: bold;

margin-bottom: 80px;

}

#contact input[type="submit"]:hover

{

background: #7FB9E3;

}

#contact .form-control::-moz-placeholder {

color: #666;

opacity: 1;

}

#contact .form-control:-ms-input-placeholder {

color: #666;

}

#contact .form-control::-webkit-input-placeholder {

color: #666;

}

/* end contact */

/* start google map */

#map-canvas

{

border: none;

width: 100%;

height: 320px;

}

/* end google map */

/* start footer */

footer

{

padding-top: 40px;

padding-bottom: 20px;

}

footer p

{

line-height: 12px;

}

footer .social-icon

{

top: 0px;

}

/* end footer */

.too-icon {

padding: 10px;

}

/* start social icon */

.social-icon

{

position: relative;

Σ.Πάνης 51

Δημιουργία Χρονολογίου με ανοικτά δεδομένα

padding: 0;

margin: 0;

top: 20px;

}

.social-icon li

{

display: inline-block;

list-style: none;

}

.social-icon li a

{

color: #333;

font-size: 13px;

text-decoration: none;

transition: all 0.4s ease-in-out;

width: 40px;

height: 40px;

line-height: 40px;

text-align: center;

}

.social-icon li a:hover

{

background: #f2f2f2;

}

/* end social icon */

Το αρχείο custom.js:

// google map

var map = '';

var center;

function initialize() {

var mapOptions = {

zoom: 16,

center: new google.maps.LatLng(37.9683751,23.7664477),

scrollwheel: false

};

map = new google.maps.Map(document.getElementById('map-canvas'),

mapOptions);

google.maps.event.addDomListener(map, 'idle', function() {

calculateCenter();

});

google.maps.event.addDomListener(window, 'resize', function() {

map.setCenter(center);

});

}

function calculateCenter() {

Σ.Πάνης 52

Δημιουργία Χρονολογίου με ανοικτά δεδομένα

center = map.getCenter();

}

function loadGoogleMap(){

var script = document.createElement('script');

script.type = 'text/javascript';

script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +

'callback=initialize';

document.body.appendChild(script);

}

// Flexslider

$(function(){

/* FlexSlider */

$('.flexslider').flexslider({

animation: "fade",

directionNav: false

});

new WOW().init();

loadGoogleMap();

});

// isotope

jQuery(document).ready(function($){

if ( $('.iso-box-wrapper').length > 0 ) {

var $container = $('.iso-box-wrapper'),

$imgs = $('.iso-box img');

$container.imagesLoaded(function () {

$container.isotope({

layoutMode: 'fitRows',

itemSelector: '.iso-box'

});

$imgs.load(function(){

$container.isotope('reLayout');

})

});

//filter items on button click

$('.filter-wrapper li a').click(function(){

var $this = $(this), filterValue = $this.attr('data-filter');

$container.isotope({

filter: filterValue,

Σ.Πάνης 53

Δημιουργία Χρονολογίου με ανοικτά δεδομένα

animationOptions: {

duration: 750,

easing: 'linear',

queue: false,

}

});

// don't proceed if already selected

if ( $this.hasClass('selected') ) {

return false;

}

var filter_wrapper = $this.closest('.filter-wrapper');

filter_wrapper.find('.selected').removeClass('selected');

$this.addClass('selected');

return false;

});

}

});

// Hide mobile menu after clicking on a link

$('.navbar-collapse a').click(function(){

$(".navbar-collapse").collapse('hide');

});

//jQuery for page scrolling feature - requires jQuery Easing plugin

$(function() {

$('.navbar-default a, a,').bind('click', function(event) {

var $anchor = $(this);

$('html, body').stop().animate({

scrollTop: $($anchor.attr('href')).offset().top - 68

}, 1000);

event.preventDefault();

});

Σ.Πάνης 54

Δημιουργία Χρονολογίου με ανοικτά δεδομένα

ΑΝΑΦΟΡΕΣ

[1] wikipedia.org, HTML5, June 2017; https://en.widipedia.org/wiki/HTML5 [Προσπελάστηκε 27/6/17]

[2] J.Duckett, HTML5 & CSS: Design and Build Web Sites, John Willey&Sons, 2011.

[3] w3schools.com, HTML5 New Elements; https://www.w3schools.com/html/html5_new_elements.asp

[Προσπελάστηκε 27/6/17]

[4] w3schools.com, CSS How To…; https://www.w3schools.com/css/css_howto.asp [Προσπελάστηκε

27/6/17]

[5] wikipedia.org, Javascript – History, July 2017; https://en.wikipedia.org/wiki/JavaScript#History

[Προσπελάστηκε 28/6/17]

[6] w3schools.com, JavaScript Objects; https://www.w3schools.com/js/js_objects.asp [Προσπελάστηκε

28/6/17]

[7] School of Data, Create timelines with open-source tools;

https://schoolofdata.org/handbook/courses/timeline-tools/ [Προσπελάστηκε 30/6/17]

[8] knight lab, Timeline JS, Easy-to-make, beautiful timelines; https://timeline.knightlab.com/

[Προσπελάστηκε 28/6/17]

[9] knight lab, StoryMap JS, Maps that tell stories; https://storymap.knightlab.com/ [Προσπελάστηκε

30/6/17]

[10] Open Knowledge Foundation Labs, Time Mapper, Elegant timelines and maps created in seconds;

http://timemapper.okfnlabs.org/ [Προσπελάστηκε 30/6/17]

[11] Propublica, TimelineSetter 0.3.2; http://propublica.github.io/timeline-setter/ [Προσπελάστηκε 30/6/17]

Σ.Πάνης 55

0 views·55 pages

Δημιουργία Χρονολογίου Γεγονότων με ανοικτά δεδομένα PDF Free Download

Δημιουργία Χρονολογίου Γεγονότων με ανοικτά δεδομένα PDF free Download. Think more deeply and widely.

Uploaded by Jonathan Deleon on 4/18/2026

/55

100%