ΕΣΔ200 Δημιουργία Περιεχομένου ΙI Δημοσίευση στο Διαδίκτυο Περιεχόμενα - Βιβλιογραφία Ενότητας Περιεχόμενα Εισαγωγή Δημοσίευση μιας ταινίας στο παγκόσμιο ιστό Βασικά στοιχεία HTML Τεχνικές δημιουργίας υπερσυνδέσμων (hyperlinks) Χρήση Style Sheets Παραδείγματα Βιβλιογραφία Adobe Creative Team [2007]: Κεφάλαιο 10 Green [2007]: Chapter 6 Kerman [2007]: Chapter 19 1
Εισαγωγή Οι ταινίες σχεδιοκίνησης που δημιουργούμε μπορούν να αναπαραχθούν και χρησιμοποιηθούν αυτόνομα: Το μόνο που χρειάζεται είναι ένα πρόγραμμα αναπαραγωγής (player π.χ. Flash Player) Στις περισσότερες περιπτώσεις όμως οι ταινίες σχεδιοκίνησης (animation χρησιμοποιούνται σε ιστοσελίδες) Οι περισσότεροι Web browsers (π.χ. Internet Explorer, Mozilla, Opera κ.λπ) έχουν ενσωματωμένα προγράμματα αναπαραγωγής (plug-in players) και έτσι οι ταινίες οι οποίες εμφανίζονται σε ιστοσελίδες μπορούν να αναπαραχθούν Η σύνδεση αρχείων σχεδιοκίνησης (.swf) σε μια ιστοσελίδα γίνεται με παρόμοιο τρόπο με αυτό που συνδέουμε εικόνες και αρχεία ήχου: Η διαδικασία απαιτεί μια μικρή εμπειρία σε προγραμματισμό ιστοσελίδων και στι γλώσσα HTML. Το πρόγραμμα Flash μας δίνει τη δυνατότητα να δημιουργήσουμε ιστοσελίδεςστιςοποίεςναπεριέχονταιοιταινίεςμαςχωρίςναγνωρίζουμε HTML Δημοσίευση μιας ταινίας στον παγκόσμιο ιστό Η δημιουργίας μιας ιστοσελίδας για ένα αρχείο Flash επιτυγχάνεται: Με χρήση του menu File => Publish Ηχρήσητουmenu File => Publish Preview επιτρέπει την προεπισκόπιση της ταινίας που έχουμε δημιουργήσει Με τις πάραπάνω εντολές δημιουργούνται στο τρέχοντα κατάλογο εργασίας (δηλαδή εκεί που βρίσκεται το αρχείο.fla): Η ταινία μας σε μορφή.swf Ένα αρχείο html μεόνομαίδιαμεαυτότηςταινίας Ένα αρχείο με κώδικα Javascript με όνομα AC_RunActiveContent.js Αν τοποθετήσουμε τα πιο πάνω αρχεία σε ένα Web server τότε έχουμε δημιουργήσει μια ιστοσελίδα η οποία είναι προσβάσιμη από όποιον είναι συνδεδμένος στο Διαδίκτυο και διαθέτει Web browser: 2
Παράδειγμα Στο παράδειγμα αυτό θα δημιουργήσουμε μια ιστοσελίδα η οποία περιέχει μια ταινία Flash και θα την ανεβάσουμε σε ένα Web Server: 1. Δημιουργήστε ένα κενό κατάλογο (folder) στον υπολογιστή σας 2. Δημιουργήστε ένα απλό animation (ή χρησιμοποιήστε ένα που έχετε δημιουργήσει σε προηγούμενη άσκηση). Σώστετοστονκατάλογοπου δημιουργήσατε στο βήμα 1. Δώστε το όνομα testpubmovie.fla 3. Ρυθμίστε τις επιλογές δημοσίευσης (File => Publish Settings έτσι ώστε οι επιλογές Flash και HTML να είναι οι μοναδικές επιλεγμένες. 4. Εκτελέστε την εντολή File => Publish. Παρατηρήστε τα περιεχόμενα του καταλόγου που δημιουργήσατε στο βήμα 1. Δείτεποιααρχείαέχουν δημιουργηθεί. 5. Κάντε διπλό κλικ στο αρχείο html που έχει δημιουργηθεί (λογικά θα πρέπει να έχει το όνομα testpubmovie.html) 6. Για να δημοσιεύσετε την ταινία σας στο Διαδίκτυο χρειάζεται να ανεβάσετε (upload) τα αρχεία..html,.js και.swf σε ένα Web Server Βασικά στοιχεία HTML HTML: HyperText Markup Language Γλώσσα προγραμματισμού μέσω τις οποίας δημιουργούμε αρχεία κειμένου κατάλληλα για οποιαδήποτε Web browser. Οι εντολές οι οποίες περιέχονται σε ένα αρχείο html καθορίζουν τι εμφανίζεται στην ιστοσελίδα και πως εμφανίζεται Javascript Γλώσσα προγραμματισμού μέσω τις οποίας επεκτείνεται η λειτουργικότητας μιας ιστοσελίδας (για παράδειγμα η προσθήκη διαδραστικής συμπεριφοράς). Για την εκτέλεση αρχείων Flash μέσα από ιστοσελίδες χρειάζεται η χρήση της Javascript (είτε εσωτερικά στο αρχείο html είτε ως εξωτερικό αρχείο) Web server Υπολογιστής συνδεδεμένος στο Διαδίκτυο εξοπλισμένος με κατάλληλο λογισμικό το οποία επιτρέπει τη μετάδοση αρχείων html (μέσω του πρωτοκόλλου http) σε Web browsers 3
Παράδειγμα Στο παράδειγμα αυτό θα δούμε το περιεχόμενο ενός αρχείου html μέσω ενός προγράμματος επεξεργασίας κειμένου: Χρησιμοποιήστε το πρόγραμμα Notepad (ή κάποιο παρόμοιο) για να ανοίξετε το αρχείο testpubmovie.html που δημιουργήσατε στο προηγούμενο παράδειγμα Βρείτε σε ποιο σημείο του αρχείου δίνεται η εντολή για φόρτωση του αρχείου.swf Δοκιμάστε να αλλάξετε τη θέση ή το όνομα του αρχείου.swf και να ανοίξετε ξανά με ένα web browser την ιστοσελίδα Βρείτε τι πρέπει να τροποποιήσετε για να αλλάξετε το χρώμα του φόντου στην ιστοσελίδα Βρείτε τι πρέπει να τροποποιήσετε για να αλλάξετε τον τίτλο της ιστοσελίδας. Προσθέστε το όνομα σας στην αρχή της ιστοσελίδας Προσθέστε ένα υπερσύνδεσμο στην ιστοσελίδα που να οδηγεί στην ιστοσελίδα του πανεπιστημίου Τεχνικές δημιουργίας υπερσυνδέσμων Υπερσύνδεσμος (hypelink) είναι ένα κομμάτι κειμένου ή εικόνας ο οποίος όταν επιλεγεί οδηγεί σε μια νέα ιστοσελίδα Ηβασικήεντολή(tag) για τη δημιουργία υπερσυνδέσμων σε ιστοσελίδες είναι η href και το tag A: <Α href = http://www.cut.ac.cy>ιστοσελίδα ΤΕΠΑΚ</Α> Μπορούμε να φτιάξουμε μια ιστοσελίδα εξ ολοκλήρου στο Flash. Για τη δημιουγία υπερσυνδέσμων χρησιμοποιούμε την εντολή navigatetourl: Στα επόμενα παραδείγματα θα δημιουργήσουμε υπερυσνδέσμους μέσω του Flash 4
Παράδειγμα Ι Στοπαράδειγμααυτόθαδημιουργήσουμεστοπροηγούμενοαρχείο Flash ένα κουμπί το οποίο όταν το πατάμε θα μας οδηγεί στην ιστοσελίδα του ΤΕΠΑΚ: 1. Από το Components panel βρείτε ένα button (Window => Components => User Interface => button) 2. Αλλάξτε το label τουκουμπιούσε«goto CUT» και δώστε του instance name gobutton 3. Προσθέστε το καρέ 1 το εξής κομμάτι κώδικα (αφού ανοίξετε το panel Actions) gobutton.addeventlistener(mouseevent.click, gonow) function gonow (evt){ var url = "http:/wwww.cut.ac.cy" navigatetourl(new URLRequest(url)) } 4. Ελέγξτε την ταινία σας 5. Δημιουργήστε ιστοσελίδα και ελέγξτε το αποτέλεσμα Παράδειγμα ΙΙ Στο παράδειγμα αυτό θα δημιουργήσουμε ένα υπερσύνδεσμο σε κείμενο: 1. Στη προηγούμενη ταινία στο καρέ που είχατε βάλει το πλήκτρο γράψτε το κείμενο «Cyprus University of Technology» 2. Από τα Properties βεβαιωθείτε ότι το κείμενο είναι Static και στο πεδίο url (δίπλα από την αλυσίδα) εισάγεται τη διεύθυνση του υπερυσνδέσμου (http://www.cut.ac.cy) 3. Επιλέξτε File =>Publish Preview για να δείτε το αποτέλεσμα 5
Παράδειγμα ΙΙΙ Στο παράδειγμα αυτό θα δημιουργήσουμε ένα υπερσύνδεσμο σε δυναμικό κείμενο: 1. Στη προηγούμενη ταινία στο καρέ που είχατε βάλει το πλήκτρο γράψτε το κείμενο «Test text» (στην πραγματικότητα δεν έχει σημασία το κείμενο που θα γράψουμε διότι αυτό θα αλλάξει δυναμικά) 2. Από τα Properties μετατρέψτε το κείμενο σε Dynamic και δώστε instance name my_txt 3. Στο καρέ 1 του στρώματος Scripts προσθέστε την πιο κάτω γραμμή κώδικα: my_txt.htmltext = "This is <A href = 'http://www.cut.ac.cy'>the best department</a>." 4. Στο καρέ 1O του στρώματος Scripts προσθέστε την πιο κάτω γραμμή κώδικα: my_txt.htmltext = "This is <A href = 'http://www.cut.ac.cy'>another Option</A>. 5. Επιλέξτε File =>Publish Preview για να δείτε το αποτέλεσμα. Τι παρατηρείτε; Χρήση Style Sheets Το Flash μπορεί να υποστηρίξει ένα πεπερασμένο σύνολο από τις εντολές της html (μέσα από το πρόγραμμα) Με τη χρήση style sheets μπορούμε να επεκτείνουμε τις δυνατότητες αναπαράστασης: Τα style sheets ορίζουν ένα απλό τρόπο μορφοποίησης κειμένου αλλά και άλλων παραμέτρων (όπως πίνακες, φόντο ιστοσελίδας κλπ) μέσα σε μια ιστοσελίδα Το πλεονέκτημα της χρήσης style sheets είναι ότι μπορούμε να αλλάξουμε την εμφάνιση μιας ιστοσελίδας χωρίς να αλλάξουμε τίποτα από το περιεχόμενο της (αποτελούν στην ουσία κάτι ανάλογο με τον καθορισμό styles στο Word π.χ. καθορισμός επικεφαλίδων) Τα style sheets είναι αρχεία κειμένου με επέκταση.css. Μέσα στο html αρχείο ορίζεται πιο style sheet χρησιμοποιείται (δεν είναι απαραίτητο να χρησιμοποιείται κάποιο) 6