Υπάρχουν πολλοί διαφορετικοί τρόποι δημιουργίας διαφανειών για παρουσίαση στο Linux. Μπορείτε να χρησιμοποιήσετε το OpenOffice, το LibreOffice ή ακόμα και το Microsoft Office (μέσω του Wine). Η ολοκληρωμένη παρουσίασή σας θα είναι είτε αρχείο .odp (μορφή OpenDocument) είτε αρχείο .ppt (μορφή PowerPoint), το οποίο χρησιμοποιείτε μέσω των σουιτών που αναφέρθηκαν παραπάνω (ή μιας εφαρμογής θεατή) για να δώσετε την παρουσίασή σας. Χωρίς το σωστό λογισμικό που έχει εγκατασταθεί, η παρουσίαση δεν μπορεί να προβληθεί. Δεν θα ήταν υπέροχο αν μπορούσατε να δημιουργήσετε μια παρουσίαση που εκτελείται σε ένα πρόγραμμα περιήγησης ιστού, μια παρουσίαση που δημιουργήθηκε χρησιμοποιώντας HTML, Javascript και CSS; Χάρη στο impress.js, μπορείτε!

Το impress.js είναι ένα ισχυρό πλαίσιο παρουσίασης CSS και Javascript. Παρέχει όλες τις βιβλιοθήκες και τα αρχεία CSS που απαιτούνται για τη δημιουργία σύνθετων και οπτικά εμπνευσμένων παρουσιάσεων χρησιμοποιώντας HTML. Αλλά μια προειδοποίηση προτού συνεχίσουμε, χρησιμοποιώντας το impress.js στην ακατέργαστη μορφή του είναι όλα σχετικά με τη δημιουργία αρχείων χρησιμοποιώντας επεξεργαστές κειμένων και τη χειρογράφηση του HTML. Δεν υπάρχει φανταχτερό γραφικό περιβάλλον εδώ, χωρίς WYSIWYG.

Σημείωση : Ενώ το εκπαιδευτικό πρόγραμμα που παρουσιάζεται εδώ γίνεται σε πλατφόρμα Linux, τα βήματα είναι τα ίδια ανεξάρτητα από την πλατφόρμα λειτουργικού συστήματος που χρησιμοποιείτε. Το Impress.js είναι ένα σενάριο που βασίζεται στον ιστό και είναι συμβατό με πολλαπλές πλατφόρμες.

Για να ξεκινήσετε, κατεβάστε το αρχείο impress.js από το github. Ο πιο απλός τρόπος είναι να εκτελέσετε την ακόλουθη εντολή από τη γραμμή εντολών:

 wget https://github.com/bartaz/impress.js/archive/master.zip

Και αποσυμπιέστε:

 unzip master.zip

Μέσα στον φάκελο "impress.js-master" υπάρχουν δύο υποφάκελοι - CSS και JS, που περιέχουν τα αρχεία CSS και Javascript impress.js αντίστοιχα. Πραγματικά δεν χρειάζεται να ψάχνετε στο φάκελο Javascript, ωστόσο ο φάκελος CSS περιέχει το demo CSS αρχείο που ίσως θέλετε να τροποποιήσετε για τις δικές σας παρουσιάσεις. Θα βρείτε επίσης ένα παράδειγμα εμφάνισης impress.js στο αρχείο index.html. Χρησιμοποιώντας το Nautilus, ανοίξτε το φάκελο "impress.js-master" και κάντε διπλό κλικ στο index.html. Αυτό θα ανοίξει το προεπιλεγμένο πρόγραμμα περιήγησης ιστού (ελπίζουμε, είτε τον Firefox είτε το Chrome) και θα ξεκινήσει η παρουσίαση.

Δείτε πώς μπορείτε να δημιουργήσετε μια απλή παρουσίαση βασισμένη στο παράδειγμα του αρχείου CSS ("css / impress-demo.css") που παρέχεται με το impress.js. Δημιουργήστε ένα αρχείο HTML χρησιμοποιώντας έναν επεξεργαστή κειμένου. Ίσως θελήσετε να χρησιμοποιήσετε ένα πρόγραμμα επεξεργασίας κειμένου όπως το gEdit ή μπορείτε να το δημιουργήσετε χρησιμοποιώντας nano στη γραμμή εντολών όπως αυτή:

 nano demo1.html

Εισαγάγετε τον ακόλουθο κώδικα στο αρχείο και, στη συνέχεια, αποθηκεύστε και κλείστε (CTRL-X).

 Όλα για το impress.js Τα πάντα για το impress.js impress.js είναι ένα ισχυρό πλαίσιο παρουσίασης CSS και Javascript. Όλα για το impress.js Παρέχει όλες τις βιβλιοθήκες και τα αρχεία CSS που απαιτούνται για τη δημιουργία σύνθετων και οπτικά εμπνευσμένων παρουσιάσεων χρησιμοποιώντας HTML Όλα για το impress.js Μάθετε περισσότερα στο http://bartaz.github.io/impress.js impress () init ().

Όλα τα αρχεία HTML χωρίζονται σε τμήματα που αρχίζουν με μια ετικέτα ανοίγματος (π.χ.) και κλείνουν με την ίδια ετικέτα αλλά με μια πρόσθετη κάθετο (π.χ.). Μέσα στην ενότητα "" η ετικέτα καθορίζει ποιο αρχείο CSS θα πρέπει να χρησιμοποιηθεί (π.χ. css / impress - demo.css). Καθώς προχωράτε περισσότερο με το impress.js, θα χρειαστεί να δημιουργήσετε το δικό σας αρχείο CSS.

Στο τμήμα, υπάρχει μια ενότητα με την ένδειξη "εντυπωσιάστε". Εκεί το impress.js αναμένει να βρει τις διαφάνειες. Κάθε διαφάνεια ονομάζεται "βήμα" και πρέπει να χρησιμοποιήσει την κλάση "βήμα". Στο παραπάνω παράδειγμα, υπάρχουν τρεις διαφάνειες, καθεμία από τις οποίες χαρακτηρίζεται από ένα με την κατηγορία "step slide".

Κάθε διαφάνεια έχει ένα χαρακτηριστικό δεδομένων x και δεδομένων-y το οποίο καθορίζει τη θέση των διαφανειών. Η τιμή y παραμένει η ίδια για τις τρεις διαφάνειες, αλλά αλλάζει η τιμή x. Ξεκινά με -1000 και μετά μετακινείται στο 0 και τελικά στο 1000. Το αποτέλεσμα είναι ότι οι διαφάνειες θα κινούνται από τα αριστερά προς τα δεξιά καθώς η παρουσίαση εξελίσσεται. Αλλάζοντας τις τιμές x και y μπορείτε να πάρετε τις διαφάνειες σε μετάβαση σε οποιαδήποτε κατεύθυνση θέλετε.

Στο τέλος του αρχείου HTML υπάρχουν δύο γραμμές που φορτώνουν το σενάριο impress.js και αρχικοποιούν τη βιβλιοθήκη impress.js (π.χ. impress () .init).

Για να δοκιμάσετε το αρχείο, κάντε διπλό κλικ στο demo1.html από το Nautilus.

Οι μεταβάσεις impress.js μπορούν επίσης να περιλαμβάνουν περιστροφή. Προσθέστε αυτήν τη διαφάνεια στην παρουσίασή σας:

 Τα πάντα για τον / την impress.js Περιστροφή!

Το χαρακτηριστικό περιστροφής δεδομένων λέει στο impress.js να περιστρέψει το διάδρομο προβολής κατά 90 μοίρες κατά τη διάρκεια της μετάβασης. Η τιμή είναι απόλυτη, οπότε μια άλλη διαφάνεια με την τιμή 90 δεν θα περιστραφεί εάν η προηγούμενη διαφάνεια είχε περιστροφή δεδομένων 90. Δοκιμάστε τη νέα παρουσίαση στο πρόγραμμα περιήγησης ιστού.

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

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

 Μεγέθυνση, και αυτό δεν μοιάζει με διαφάνεια

Υπάρχουν μερικά πράγματα που αξίζει να σημειώσουμε για αυτή την τελευταία διαφάνεια. Πρώτα παραλείπει την κλάση "διαφάνεια". Αυτό σημαίνει ότι η διαφάνεια θα παρουσιαστεί χωρίς το λευκό φόντο όπως ορίζεται στο παράδειγμα του αρχείου CSS. Δεύτερον, σημειώστε τις τιμές της περιστροφής δεδομένων και της κλίμακας δεδομένων. Το χαρακτηριστικό περιστροφής δεδομένων μεταφέρει τον καμβά πίσω σε 0 μοίρες (από την περιστροφή 90 μοίρες στην προηγούμενη διαφάνεια). Το χαρακτηριστικό κλίμακας δεδομένων κάνει το impress.js να πραγματοποιήσει ζουμ κατά τη διάρκεια της μετάβασης. Για να δείτε τι φαίνεται, δοκιμάστε την παρουσίαση στο πρόγραμμα περιήγησής σας.

Τώρα που έχετε μάθει μερικές απλές διαφάνειες, δοκιμάστε να διαβάσετε μέσω index.html και "css / impress-demo.css" για να δείτε πώς κατασκευάζεται το demo. Το αρχείο index.html έχει άφθονα σχόλια για να σας καθοδηγήσει στα διάφορα στοιχεία και κατηγορίες.

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