Παρουσίαση εργαλείου Microsoft Silverlight Βερβέρης Παναγιώτης Α.Μ.888 Παπαθανασίου Αθανάσιος Α.Μ.958 1Παρουσίαση τεχνολογίας Silverlight
Τι είναι το Microsoft Silverlight: Το Microsoft Silverlight: Είναι ένα browser plug-in ικανό να δώσει καλύτερη αισθητική και ευχρηστία στο περιεχόμενο μίας σελίδας. Προσφέρει ένα δυναμικό γραφικό περιβάλλον στους χρήστες. Κάνει εύκολη την ενσωμάτωση βίντεο και ήχου. 2Παρουσίαση τεχνολογίας Silverlight
Πλεονεκτήματα του Silverlight Είναι συμβατό με πληθώρα browsers (Internet Explorer 6+, Firefox 1.5+ & 2 και Safari 2). Είναι συμβατό με Mac και στο άμεσο μέλλον και με Linux/Unix στο οποίο θα έχει την ονομασία Moonlight. Τώρα (χωρίς το Moonlight) το ποσοστό των χρηστών που μπορούν να επισκεφθούν αυτές τις σελίδες ξεπερνά το 90%. 3Παρουσίαση τεχνολογίας Silverlight
Πλεονεκτήματα του Silverlight Μπορεί να αναπαράγει διαδεδομένες μορφές αρχείων εικόνας και ήχου (VC-1, WMA και MP3) χωρίς να εξαρτάται από άλλα προγράμματα. Παρέχει μεγάλο βαθμό ευκολίας στους σχεδιαστές ιστοσελίδων μέσω δωρεάν σουίτας εφαρμογών της εταιρίας. Παρουσίαση τεχνολογίας Silverlight4
Πλεονεκτήματα του Silverlight Τα περιεχόμενα μιας εφαρμογής Silverlight «φαίνονται» σε μηχανές αναζήτησης, κάτι το οποίο είναι νέο για τα σημερινά δεδομένα καθώς η κυρίαρχη αντίστοιχη τεχνολογία σήμερα (Adobe Flash) δεν το υποστηρίζει. Αυτό, μέχρι σήμερα, απαιτούσε από τους web designers παραπάνω χρόνο για να επιτύχουν την ίδια λειτουργικότητα. Παρουσίαση τεχνολογίας Silverlight5
Σχεδιασμός Γραφικής διεπαφής Υποστηρίζει την χρήση δισδιάστατων διανυσματικών γραφικών, των “κλασικών” κουμπιών πλοήγησης/ελέγχου αλλά και την δημιουργία νέων, όπως επίσης και την δημιουργία και προβολή animations και storyboards. Τα παραπάνω στοιχεία ελέγχου σχεδιάζονται πολύ γρήγορα και εύκολα χρησιμοποιώντας την παρεχόμενη σουίτα εφαρμογών. Παρουσίαση τεχνολογίας Silverlight6
Σχεδιασμός Γραφικής διεπαφής Τέλος, παρέχεται η επιλογή στον σχεδιαστή να κάνει το περιεχόμενο της σελίδας του δυναμικό, προσφέροντας στον χρήστη την επιλογή διαμόρφωσης της προβαλλόμενης διεπαφής σύμφωνα με τις δικές του προτιμήσεις. Παρουσίαση τεχνολογίας Silverlight7
Πως λειτουργεί μια ιστοσελίδα με Silverlight Ένα από τα κυριότερα χαρακτηριστικά του Silverlight είναι ότι η γραφική διεπαφή χρήστη δημιουργείται από τον server χρησιμοποιώντας την XAML (eXtensible Application Markup Language), και αφού γίνει αυτό μπορεί να φορτωθεί αυτόματα στον χρήστη. Προφανώς αυτή η διεπαφή μπορεί να είναι δυναμική ανάλογα με την είσοδο του χρήστη και τα στοιχεία του server. Παρουσίαση τεχνολογίας Silverlight8
Δομή απλής σελίδας Silverlight 1.0 Παρακάτω αναφέρονται τα τέσσερα αρχεία που απαιτούνται για κάθε σελίδα με Silverlight περιεχόμενο. Στην έκδοση 1.0 υποστηρίζεται μόνο η γλώσσα JavaScript για event handlers στην έκδοση 1.1 alpha υποστηρίζονται και οι C#, Visual Basic και η IronPython Αυτά είναι τα Default.html, Silverlight.js, Page.xaml και Page.xaml.js Παρουσίαση τεχνολογίας Silverlight9
Default.html H default.html είναι η σελίδα η οποία θα φιλοξενήσει το Silverlight plug-in. Ακολουθεί ο HTML κώδικας, στο tag: ….silverlightHost { height: 480px; width: 640px; } Παρουσίαση τεχνολογίας Silverlight10
Default.html Στο tag: createSilverlight(); Η createSilverlight(); Είναι η συνάρτηση που θα δημιουργήσει την γραφική διεπαφή που χρησιμοποιεί την τεχνολογία Silverlight. Παρουσίαση τεχνολογίας Silverlight11
Default.html Στο tag: function createSilverlight() { var scene = new HelloSilverlight.Scene(); Sys.Silverlight.createObjectEx( { source: “Page.xaml”, parentElement: document.getElementById( “SilverlightControlHost”), id: “SilverlightControl”, properties: { width: “100%”, height: “100%”, version: “0.9” }, events: { onLoad: Sys.Silverlight.createDelegate( scene, scene.handleLoad) } } ); } ενδεικτικός κώδικας, παραλείπονται πολλά για ευκρίνεια. Παρουσίαση τεχνολογίας Silverlight12
Silverlight.js Το αρχείο αυτό δημιουργείται αυτόματα από την εφαρμογή και είναι υπεύθυνο για τον έλεγχο συμβατότητας browser - Silverlight plug-in, όπως επίσης και για τον εντοπισμό της ύπαρξής του ή μη στον browser του χρήστη. Εάν δεν είναι εγκατεστημένο, εμφανίζεται link στο ενεργό παράθυρο του χρήστη για να το κατεβάσει και να το εγκαταστήσει. Παρουσίαση τεχνολογίας Silverlight13
Page.xaml Στο αρχείο αυτό περιγράφεται ο σχεδιασμός των γραφικών της διεπαφής σε γλώσσα XAML. Ο κώδικας μπορεί να υλοποιηθεί είτε μέσω του Microsoft Expression Blend που αυτοματοποιεί σε μεγάλο βαθμό την διαδικασία είτε γράφοντας την XAML από το Microsoft Visual Studio (Web Developer) Παρουσίαση τεχνολογίας Silverlight14
Page.xaml.js Είναι το αρχείο που περιέχει τον JavaScript κώδικα χειρισμού των γεγονότων που μπορεί να καλέσει ο χρήστης από την γραφική διεπαφή. Ενίοτε το page.xaml.js δεν υπάρχει και ο κώδικας είναι σε ειδικό μέρος της page.xaml Παρουσίαση τεχνολογίας Silverlight15
Τέλος παρουσίασης Ευχαριστούμε για τον χρόνο σας. Παρουσίαση τεχνολογίας Silverlight16