Συγχρονισμός βίντεο με διαφάνειες Κατερίνα Ασπιώτη, Κωνσταντίνος Βίλλιος Κέντρο Διαχείρισης Δικτύου Τεχνολογικό Εκπαιδευτικό Ίδρυμα Μεσολογγίου
Συγχρονισμός βίντεο με διαφάνειες Εισαγωγή 1η Ενότητα: Συγχρονισμός κατά SMIL 2η Ενότητα: Συγχρονισμός κατά HTML+TIME 3η Ενότητα: Ανακοίνωση και διάθεση συγχρονισμένων παρουσιάσεων
Εισαγωγή Ορισμός Συγχρονισμού Διαφορές μεταξύ SMIL και HTML+TIME
Εισαγωγή Παράλληλη μετάδοση του βίντεο και των αντίστοιχων διαφανειών.
Διαφορές SMIL και HTML+TIME Μια παρουσίαση σε HTML+TIME μεταδίδεται κατευθείαν μέσα σε ιστοσελίδα ενώ σε SMIL μεταδίδεται μέσω ενός player. Μια παρουσίαση σε HTML+TIME μπορούμε να τη δημοσιεύσουμε μόνο σε ένα internet explorer, αντίθετα, μια παρουσίαση σε SMIL σε όλους τους web browser.
1η Ενότητα Συγχρονισμός κατα SMIL SMIL 2.0 Τεχνολογίες REAL και SMIL Παραδείγματα κατανόησης της SMIL 2.0 Πρότυπο template SMOX EDITOR
SMIL 2.0 Είναι γλώσσα προγραμματισμού για συγχρονισμό multimedia αρχείων. Δημιουργήθηκε από το “World Wide Web Consortium και τα αρχικά της σημαίνουν “Synchronized Multimedia Intergraded Language” και προφέρεται “smile”. http://www.w3.org/
Πλεονεκτήματα της SMIL 2.0 Δωρεάν διάθεση του κώδικα Χρήση clips τοποθετημένων σε διαφορετικούς servers. Συνδυασμός διαφορετικών clip. Συγχρονισμός και έλεγχος μιας παρουσίασης. Προσθήκη διαφάνειας στα clips. Δημιουργία αλληλεπιδραστικών παρουσιάσεων. Σύνδεση σε ιστοσελίδες Προσθήκη ειδικών εφέ. Δημιουργία προσαρμοσμένων παρουσιάσεων.
Βασικές έννοιες Element : Binary ετικέτες και Unary : Tags, Attributes, Values: <tag attribute= “value”/> Element : <img src=“ ”… begin=“ ”/> Binary ετικέτες και Unary : <body> </body> <img src=“ ”… begin=“ ”/>
Δομή smil αρχείου <smil xmlns = “http://www.w3.org/2001/SMIL20/Language”> <head> <layout> … </layout> <meta … /> <transition… /> </head> <body> <ref src… /> … <animate …/> <area …/> </body> </smil>
Ορισμός περιεχομένου Για να εισάγουμε το περιεχόμενο μας μέσα στο αρχείο, θα πρέπει να το ορίσουμε σε ένα από τα παρακάτω tags, ανάλογα με τον τύπο τους: <animation/> <audio/> <brush/> <img/> <ref/> <text/> <textstream/> <video/>
Ομαδοποίηση υλικού Όταν εισάγουμε τα clips, πρέπει να τα ομαδοποιήσουμε σε μια από τις παρακάτω κατηγορίες: Sequence: ομαδοποιούμε τα clips μέσα σε <seq> και </seq> tags, ώστε να μεταδίδονται σε σειρά. Parallel: τα clips τοποθετούνται εντός των tags <par> και </par>, με σκοπό την παράλληλη αναπαραγωγή τους. Exclusive: Ένα exclusive group δημιουργείται ανάμεσα στα <excl> και </excl> tags. Όπου τα clips μεταδίδονται ένα κάθε φορά, ύστερα από ενέργεια του χρήστη.
Μετάδοση μετα-πληροφορίας Έχουμε τη δυνατότητα να μεταδώσουμε τους εξής τύπους πληροφορίας Title Author copyright Abstract Η πληροφορία μπορεί να αφορά: Ολόκληρη την παρουσίαση: <meta name=”title” content=”introduction to SMIL”/> Ένα clip ή μια ομάδα από clips: <video src=”clip1.rm” title=”timing attributes”/>
Τοποθέτηση των clips στην παρουσίαση χρησιμοποιήσουμε τα <layout> και</layout>tags στην περιοχή της κεφαλίδας. Μέσα στα tags προσθέτουμε: <root-layout/> tag. <region/> tag. tag για subregion <top-layout/> tag <regPoint> tag
Συγχρονισμός περιεχομένου Βασικός συγχρονισμός Μας δίνει τη δυνατότητα να καθορίσουμε χρονικά χαρακτηριστικά για ένα clip.Κάποια βασικά attribute για το συγχρονικό περιεχομένων είναι τα εξής: begin, end, dur: clipBegin, clipEnd min, max Endsync repeatCount και repeatDur fill, erase, fillDefault Η SMIL παρέχει 2 μεθόδους για να καθορίσει μια χρονική τιμή, τη “shorthand ” μέθοδος και τη “normal play time” μέθοδος
Συγχρονισμός περιεχομένου Προηγμένος συγχρονισμός Τα προηγμένα χαρακτηριστικά συγχρονισμού προωθούν τη δημιουργία Αλληλεπιδραστικών παρουσιάσεων επεκτείνουν τις δυνατότητες των “begin” και “end”. Για να προσθέσουμε αλληλεπίδραση μεταξύ των clips, πρέπει καθορίσουμε: Ένα event. <element_tag1 id="ID" .../> Δύο element <element_tag2 begin| end ="ID.event" .../> Διακρίνουμε δύο κατηγορίες γεγονότων: Scheduled Interactive
Προσθήκη εφέ Transition Είναι εφέ που αυτά αφορούν τον τρόπο που κάποια οντότητα εμφανίζεται ή εξαφανίζεται σε / από μια περιοχή. Χωρίζονται σε 5 οικογένειες: Edge wipe Iris wipe Clock Wipe Matrix Wipe Fade, push, slide
Προσθήκη εφέ Για να χρησιμοποιήσουμε ένα transition εφέ απαιτείται: να το δηλώσουμε σε ένα <transition/> tag στο τμήμα <head> </head> του αρχείου μας, συμπεριλαμβάνοντας τρία attribute: να συμπεριλάβουμε ένα attribute (transIn, transOut) μέσα σε ένα tag ορισμού περιεχομένου, ώστε να συνδέσουμε το εφέ με το clip: <transition id="fade1" type="fade" subtype="crossfade"/> <img src="..." transIn /transOut="fade1 " />
Προσθήκη εφέ Animation Είναι εφέ που εφαρμόζονται σε ένα clip, μια περιοχή, ή ακόμα και σε ολόκληρο το παράθυρο της παρουσίασης, οποιαδήποτε χρονική στιγμή. Μπορούμε να προσθέσουμε ένα animation στην παρουσίαση μας με τη χρήση τεσσάρων animation tags, εντός του body, ενός smil αρχείου: <animate/> tag <animateColor/> tag <animateMotion/> tag <set/> tag Τα attributes “targetElement” και “attributeName”, είναι απαιτούμενα σε στα παραπάνω tags.
Υπερσύνδεση Η SMIL μας δίνει την δυνατότητα να ορίσουμε συνδέσμους με τη χρήση των tags : <a> και <area>
Διαφορές smil 1.0 και smil 2.0 Η smil 1.0, αντίθετα με τη smil 2.0, δεν υποστηρίζει τα attributes bottom και right Η smil 2.0 δίνει τη δυνατότητα προσθήκης “transition” εφέ, κάτι που δεν παρουσιάζεται στη smil 1.0 Οι παρουσιάσεις σε smil 2.0 δεν παίζουν σε players παλιότερης έκδοσης του 8. Αντίθετα οι παρουσιάσεις σε smil 1.0 υποστηρίζονται από όλες τις εκδόσεις του real player αλλά και από τον QuickTime Player. Επιπλέον οι δύο εκδόσεις διαφέρουν και στην σύνταξη κάποιων elements και attributes.
Τεχνολογίες REAL Helix™ Server RealProducer Plus Helix™ Proxy RealVideo realAudio: RealText RealPix RealPlayer
Παραδείγματα κατανόησης της smil 2.0 Παράδειγμα μετάδοσης μετα-πληροφορίας Παράδειγμα προσθήκης εφέ Παράδειγμα χρήσης προηγμένων χαρακτηριστικών συγχρονισμού
Πρότυπο Template Απαιτούμενο υλικό και λογισμικό Δημοσίευση http://mc.gunet.gr/templates/smil/
Απαιτούμενο υλικό και λογισμικό Ένα text editor. To λογισμικό RealPlayer Το αρχείο με το video του ομιλητή. Την παρουσίαση σε PowerPoint. Το αρχεία του προτύπου. Ένα πρόγραμμα για την εξαγωγή των διαφανειών
Περιγραφή της λειτουργικότητας του template
SMOX EDITOR
ΤΙ ΕΙΝΑΙ ΤΟ SMOX EDITOR; Το smox editor είναι ένα λογισμικό το οποίο μέσα από ένα περιβάλλον ανάπτυξης smil δίνει σε σχεδιαστές και προγραμματιστές τη δυνατότητα να συγχρονίσουν το υλικό τους με τρόπο γρήγορο και αποτελεσματικό. Το smox σημαίνει “XML Directed Multimedia Studio”. Πράγματι ολόκληρο το λογισμικό smox βασίζεται στις τεχνολογίες XML. Το smox είναι προϊόν της manalee.
Πλεονεκτήματα του SMOX Εύκολη εγκατάσταση Εύχρηστο περιβάλλον Ευελιξία Διαθεσιμότητα του περιεχομένου σε όλους On-demand streaming Εξοικονόμηση χρόνου και χρήματος Δυνατότητα χρήσης σε διάφορες μορφές
Μειονεκτήματα του smox Είναι ένα ακριβό προϊόν Δεν υποστηρίζει ελληνικά χρειάζεται προσοχή, όταν καθορίζουμε το path(δεν πρέπει να περιέχει κενά) Χρειάζεται εξοικείωση με τη σύνταξη και τη χρήση της γλώσσας smil
2η Ενότητα Συγχρονισμός κατα HTML+TIME Η τεχνολογία HTML+TIME Πρότυπο Template Microsoft Producer SMOX EDITOR
HTML plus TIME http://www.w3.org/TR/NOTE-HTMLplusTIME
HTML γλώσσα + Επεκτάσεις χρονισμού HTML plus TIME HTML plus TIME ή HTML+TIME (HyperText Markup Language + Timed Interactive Multimedia Extensions) HTML γλώσσα + Επεκτάσεις χρονισμού
Extending SMIL into the Web Browser HTML plus TIME Extending SMIL into the Web Browser to create multimedia-rich media, interactive presentations H HTML+TIME 2.0 προήλθε από την HTML+TIME 1.0
Το Συντακτικό της HTML+TIME <html xmlns:t ="urn:schemas-microsoft-com:time" > <head> <style> .time { behavior: url(#default#time2) } </style> <title>your title</title> <?IMPORT namespace="t" implementation="#default#time2"> </head> <body> <!-- Replace this line with your content --> </body> </html>
Το Συντακτικό της HTML+TIME ΣΗΜΑΝΤΙΚΟ: Κάθε ετικέτα που ανοίγουμε, θα πρέπει απαραίτητα να την κλείνουμε. π.χ. <body>…</body>, <font>…</font>, Όποια ετικέτα "ανοίγει" πρώτη, πρέπει να "κλείνει" τελευταία.
Το Συντακτικό της HTML+TIME Σύνδεσμοι <A HREF="images/car1.jpg"> κείμενο/path εικόνας </A> <a href="http://www.teimes.gr" target="_blank">...</Α> <a href="http://www.gunet.gr" target="_blank"> <img src="gunet/car3.gif"> </Α>
Το Συντακτικό της HTML+TIME Background - Φόντο <BODY background=“gunet/image.gif"> , <BODY bgcolor="#000000">
Το Συντακτικό της HTML+TIME Πληροφοριακές ετικέτες (meta tags) <meta name="description" content="Department of Applied Informatics in Management & Finance of Technological Education Institute is located in Messologhi, Hellas, and specializes in Informatics and Economics Courses and Training." > , <meta name="generator" content="Villios Konstantinos"/> , <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7">
Το Συντακτικό της HTML+TIME Πίνακες <table border="1" width="300" height="20"> <tr> <td>TEI Μεσολογγίου</td> <td>ΕΚΠΑ</td> </tr> <td>ΚΕ.Δ.Δ.</td> <td>Κ.Λ.Δ.Δ.</td> </table>
Το Συντακτικό της HTML+TIME Άλλες ετικέτες <BR> - έναρξη νέας γραμμής (αυτή η ετικέτα δεν κλείνει..!) , <b>...</b> - έντονη γραφή , <i>...</i> - πλάγια γραφή , <u>...</u> - υπογραμμισμένο κείμενο
Το Συντακτικό της HTML+TIME Βασικές εντολές χρονισμού (ΤΙΜΕ) begin="18" — begin 18 seconds after parent. begin="5;10;15;20" — begin at 5, 10, 15, and 20 seconds after parent. begin="theButton.click" — begin when the element with the ID "theButton" is clicked. begin="0;theButton.click" — begin at 0 and when the element with the ID "theButton" is clicked. dur="10" dur="indefinite"
Το Συντακτικό της HTML+TIME Βασικές εντολές χρονισμού (ΤΙΜΕ) begin – έναρξη dur – διάρκεια end – τερματισμός repeatCount – επανάληψη διάρκειας repeatDur - επανάληψη διάρκειας Εάν dur="5" repeatCount="10" , τότε ο χρόνος διάρκειας του αντικειμένου με τις εντολές αυτές, θα είναι 10 φορές το 5, άρα 50 δευτερόλεπτα και Εάν dur="5" repeatDur="12.5" , τότε ο χρόνος επανάληψης της διάρκειας θα είναι το αποτέλεσμα της πράξης 12.5/5=2.5 , οπότε η διάρκεια που θα έχει κάποιο αντικείμενο με τις εντολές αυτές θα είναι, 2.5 φορές το 5, άρα η διάρκεια του αντικειμένου τελικά θα είναι 12.5 δευτερόλεπτα.
Το Συντακτικό της HTML+TIME Βασικές εντολές χρονισμού (ΤΙΜΕ) <t:par> — timed children run in parallel. <t:seq> — timed children run in sequence, one after another; only one child can be active at a time. <t:excl> — timed children run exclusively, in any order; the exclusive time container automatically stops all other children when one child is activated; as in a sequence, only one child can be active at a time.
Το Συντακτικό της HTML+TIME Βασικές εντολές χρονισμού (ΤΙΜΕ) Ετικέτες για Media αρχεία <t:media> <t:video> <t:audio> <t:img> <t:animation> <t:ref>
Παραδείγματα κατανόησης της τεχνολογίας http://www.teimes.gr/noc/html+time/
Πρότυπο Template HTML+TIME Κατεβάστε το από τα έγγραφα του μαθήματος στο e-Class του GuNet.
Πρότυπο Template HTML+TIME Χρονισμός βίντεο Χρονισμός διαφανειών/εικόνων Μετατροπή των διαφανειών της παρουσίασης σε εικόνες
Microsoft Producer http://www.microsoft.com/windows/windowsmedia/technologies/producer.aspx
Microsoft Producer Υποστηριζόμενοι τύποι αρχείων Video files: .asf, .avi, .m1v, .mp2, .mpe, .mpeg, .mpg, .mpv2, .wm, .wmv, Audio files: .aif, .aifc, .aiff .asf, .au, .mp2, .mp3, .mpa, .snd, .wav, .wma, Still image files: .bmp, .dib, .emf, .gif, .jfif, .jpe, .jpeg, .jpg, .png, .tif, .tiff, .wmf, PowerPoint slides: .ppt και .pps, HTML: .htm και .html
Smox Editor http://www.smoxeditor.com
Smox Editor Κώδικας HTML+TIME Εξαγωγή παρουσίασης σε HTML+TIME
Ανακοίνωση και διάθεση συγχρονισμένων παρουσιάσεων 3η Ενότητα Ανακοίνωση και διάθεση συγχρονισμένων παρουσιάσεων VoD servers Πλατφόρμες ασύγχρονης τηλε-εκπαίδευσης
Video on Demand servers Media Servers HTTP Servers
Video on Demand servers Media Servers Servers Εταιρία Πλατφόρμες Πρωτόκολλα Αρχεία Τιμή Helix Server RealNetworks Windows, Linux, Solaris MMS, HTTP, RTSP RealAudio, RealVideo, Windows Media, QuickTime, MP3, MPEG-4, 3GPP,AAC+ 1600€ (περίπου) - 25 users και 4000€ (περίπου) - 250 Users Windows Media Services Microsoft Windows Windows Media, MP3 Συμπεριλαμβάνετε στα Windows Server 2003 Darwin Streaming Server Apple Linux, Mac, Windows, Solaris RTP, RTSP QuickTime, MPEG-4, 3GPP Open Source
Video on Demand servers HTTP Servers Servers Εταιρία Πλατφόρμες Πρωτόκολλα Αρχεία Τιμή Apache The Apache software Fountasion Windows, Linux, Unix HTTP, HTTPS Htm, Html, Php, jpg, gif, wmv κ.α. Open Source Internet Information Services Microsoft Windows Συμπεριλαμβάνετε στα Windows Server 2003
Πλατφόρμες ασύγχρονης τηλε-εκπαίδευσης Πλατφόρμες ασύγχρονης τηλε-εκπαίδευσης http://eclass.gunet.gr http://www.claroline.net http://moodle.com
Πλατφόρμες ασύγχρονης τηλε-εκπαίδευσης Πλατφόρμες ασύγχρονης τηλε-εκπαίδευσης Δυνατότητες ανακοίνωσης των συγχρονισμένων παρουσιάσεων πλατφόρμα E-Class , πλατφόρμα Claroline , πλατφόρμα Moodle
Ερωτήσεις / Απορίες
Ανοικτή συζήτηση
Σας ρωτάμε.. ..μας απαντάτε!
Σας ρωτάμε..μας απαντάτε! HTML+TIME vs SMIL SMOX EDITOR vs MS PRODUCER Χρήση ποιας τεχνολογίας;
Ανοικτή συζήτηση για συγχρονισμό κατά SMIL
Ανοικτή συζήτηση για συγχρονισμό κατά HTML+TIME
Τέλος Ευχαριστούμε που μας παρακολουθήσατε!! Κωνσταντίνος Βίλλιος kvillios@teimes.gr Κατερίνα Ασπιώτη aspkat@teimes.gr