Παρουσίαση εργαλείου Microsoft Silverlight
Download
Report
Transcript Παρουσίαση εργαλείου Microsoft Silverlight
Παρουσίαση εργαλείου
Microsoft Silverlight
Βερβέρης Παναγιώτης Α.Μ.888
Παπαθανασίου Αθανάσιος Α.Μ.958
Παρουσίαση τεχνολογίας Silverlight
1
Τι είναι το Microsoft Silverlight:
Το Microsoft Silverlight:
• Είναι ένα browser plug-in ικανό να δώσει
καλύτερη αισθητική και ευχρηστία στο
περιεχόμενο μίας σελίδας.
• Προσφέρει ένα δυναμικό γραφικό περιβάλλον
στους χρήστες.
• Κάνει εύκολη την ενσωμάτωση βίντεο και
ήχου.
Παρουσίαση τεχνολογίας Silverlight
2
Πλεονεκτήματα του Silverlight
• Είναι συμβατό με πληθώρα browsers
(Internet Explorer 6+, Firefox 1.5+ & 2 και
Safari 2).
• Είναι συμβατό με Mac και στο άμεσο μέλλον
και με Linux/Unix στο οποίο θα έχει την
ονομασία Moonlight.
• Τώρα (χωρίς το Moonlight) το ποσοστό των
χρηστών που μπορούν να επισκεφθούν αυτές
τις σελίδες ξεπερνά το 90%.
Παρουσίαση τεχνολογίας Silverlight
3
Πλεονεκτήματα του Silverlight
• Μπορεί να αναπαράγει διαδεδομένες μορφές
αρχείων εικόνας και ήχου (VC-1, WMA και
MP3) χωρίς να εξαρτάται από άλλα
προγράμματα.
• Παρέχει μεγάλο βαθμό ευκολίας στους
σχεδιαστές ιστοσελίδων μέσω δωρεάν
σουίτας εφαρμογών της εταιρίας.
Παρουσίαση τεχνολογίας Silverlight
4
Πλεονεκτήματα του Silverlight
• Τα περιεχόμενα μιας εφαρμογής Silverlight
«φαίνονται» σε μηχανές αναζήτησης, κάτι το
οποίο είναι νέο για τα σημερινά δεδομένα
καθώς η κυρίαρχη αντίστοιχη τεχνολογία
σήμερα (Adobe Flash) δεν το υποστηρίζει.
Αυτό, μέχρι σήμερα, απαιτούσε από τους web
designers παραπάνω χρόνο για να επιτύχουν
την ίδια λειτουργικότητα.
Παρουσίαση τεχνολογίας Silverlight
5
Σχεδιασμός Γραφικής διεπαφής
Υποστηρίζει την χρήση δισδιάστατων
διανυσματικών γραφικών, των “κλασικών”
κουμπιών πλοήγησης/ελέγχου αλλά και την
δημιουργία νέων, όπως επίσης και την
δημιουργία και προβολή animations και
storyboards.
Τα παραπάνω στοιχεία ελέγχου σχεδιάζονται
πολύ γρήγορα και εύκολα χρησιμοποιώντας
την παρεχόμενη σουίτα εφαρμογών.
Παρουσίαση τεχνολογίας Silverlight
6
Σχεδιασμός Γραφικής διεπαφής
Τέλος, παρέχεται η επιλογή στον σχεδιαστή να
κάνει το περιεχόμενο της σελίδας του
δυναμικό, προσφέροντας στον χρήστη την
επιλογή διαμόρφωσης της προβαλλόμενης
διεπαφής σύμφωνα με τις δικές του
προτιμήσεις.
Παρουσίαση τεχνολογίας Silverlight
7
Πως λειτουργεί μια ιστοσελίδα με
Silverlight
Ένα από τα κυριότερα χαρακτηριστικά του
Silverlight είναι ότι η γραφική διεπαφή
χρήστη δημιουργείται από τον server
χρησιμοποιώντας την XAML (eXtensible
Application Markup Language), και αφού γίνει
αυτό μπορεί να φορτωθεί αυτόματα στον
χρήστη. Προφανώς αυτή η διεπαφή μπορεί
να είναι δυναμική ανάλογα με την είσοδο του
χρήστη και τα στοιχεία του server.
Παρουσίαση τεχνολογίας Silverlight
8
Δομή απλής σελίδας 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
Παρουσίαση τεχνολογίας Silverlight
9
Default.html
H default.html είναι η σελίδα η οποία θα φιλοξενήσει το Silverlight plug-in.
Ακολουθεί ο HTML κώδικας, στο tag:
<head>
…
<script type=”text/javascript” src=”Silverlight.js”> </script>
<script type=”text/javascript” src=”Default.html.js”></script>
<script type=”text/javascript” src=”Page.xaml.js”></script>
<style type=”text/css”> .silverlightHost {
height: 480px; width: 640px;
} </style>
</head>
Παρουσίαση τεχνολογίας Silverlight
10
Default.html
Στο tag:
<body>
<div id=”SilverlightControlHost” class=”silverlightHost”>
<script type=”text/javascript”>
createSilverlight();
</script>
</div>
</body>
Η createSilverlight(); Είναι η συνάρτηση που θα δημιουργήσει την
γραφική διεπαφή που χρησιμοποιεί την τεχνολογία Silverlight.
Παρουσίαση τεχνολογίας Silverlight
11
Default.html
Στο tag:
<script>
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) } }
);
}
ενδεικτικός κώδικας, παραλείπονται πολλά για ευκρίνεια.
Παρουσίαση τεχνολογίας Silverlight
12
Silverlight.js
Το αρχείο αυτό δημιουργείται αυτόματα από
την εφαρμογή και είναι υπεύθυνο για τον
έλεγχο συμβατότητας browser - Silverlight
plug-in, όπως επίσης και για τον εντοπισμό
της ύπαρξής του ή μη στον browser του
χρήστη. Εάν δεν είναι εγκατεστημένο,
εμφανίζεται link στο ενεργό παράθυρο του
χρήστη για να το κατεβάσει και να το
εγκαταστήσει.
Παρουσίαση τεχνολογίας Silverlight
13
Page.xaml
Στο αρχείο αυτό περιγράφεται ο σχεδιασμός
των γραφικών της διεπαφής σε γλώσσα
XAML. Ο κώδικας μπορεί να υλοποιηθεί είτε
μέσω του Microsoft Expression Blend που
αυτοματοποιεί σε μεγάλο βαθμό την
διαδικασία είτε γράφοντας την XAML από το
Microsoft Visual Studio (Web Developer)
Παρουσίαση τεχνολογίας Silverlight
14
Page.xaml.js
Είναι το αρχείο που περιέχει τον JavaScript
κώδικα χειρισμού των γεγονότων που μπορεί
να καλέσει ο χρήστης από την γραφική
διεπαφή.
Ενίοτε το page.xaml.js δεν υπάρχει και ο
κώδικας είναι σε ειδικό μέρος της page.xaml
Παρουσίαση τεχνολογίας Silverlight
15
Τέλος παρουσίασης
Ευχαριστούμε για τον χρόνο σας.
Παρουσίαση τεχνολογίας Silverlight
16