Καλώς ορίσατε στο dotNETZone.gr - Σύνδεση | Εγγραφή | Βοήθεια
σε

 
Αρχική σελίδα Ιστολόγια Συζητήσεις Εκθέσεις Φωτογραφιών Αρχειοθήκες
dotNETZone.gr » Managed Code » Γενικά θέματα ανάπτυξης για τα... » Απ: Vista Gadget - Transparent Images Major Problem

Vista Gadget - Transparent Images Major Problem

Îåêßíçóå áðü ôï ìÝëïò Δημήτρης Γκανάτσιος. Τελευταία δημοσίευση από το μέλος KelMan στις 08-06-2007, 00:38. Υπάρχουν 4 απαντήσεις.
Ταξινόμηση Δημοσιεύσεων: Προηγούμενο Επόμενο

  •  07-06-2007, 22:49 32731

    Vista Gadget - Transparent Images Major Problem

    Καλησπέρα σας. Προσπαθώ να φτιάξω gadget με transparent γραφικά (είτε gif είτε png), εμφανίζονται σωστά άμα γίνουνε render από browser, αλλά όταν τα βάλω σε gadget και το εμφανίσω στην sidebar, τότε τα βλέπω με άσπρο background! Δοκίμασα να παίξω με το

    <g:background src="images/myimage.png" />

    το οποίο δουλεύει μεν (είτε για png είτε για gif) αλλά πάλι είναι απίστευτα δύσκολο να κατασκευάσω το HTML table με το layout, καθώς λόγω της φύσης του tag, δεν μπορώ να δω το background σε κάποιον editor, παρά μόνο όταν το εμφανίσω στην sidebar. Συν τοις άλλοις έχω και προβλήματα στο z-indexing, καθώς έχω δώσει στο background image z-index:-1 μέσω stylesheet, αλλά και πάλι τα περιεχόμενα των tables εμφανίζονται από κάτω του.

     Χρησιμοποιώ τα Photoshop και Imageready για επεξεργασία και slicing.

     

    Any help???

     

    edit: μόλις κατάφερα να βάλω ένα ολόκληρο image για background χρησιμοποιώντας το

    <body style="background-image:url(images/myimage.png)">

    αλλά και πάλι θα ήθελα να μπορώ να σχεδιάζω το layout από το imageready, ώστε να μπορώ να κάνω slicing και να επεξεργαστώ το gadget πιο εύκολα

    thxSmile

    Dimitris-Ilias Gkanatsios
    Developer Evangelist, Microsoft Hellas

    My Blog
    StudentGuru
    Twitter
    Facebook

  •  07-06-2007, 23:14 32733 σε απάντηση της 32731

    Απ: Vista Gadget - Transparent Images Major Problem

    Το background του gadget υποστηρίζει transparency αλλά όχι alpha blending. Αν θέλεις να είναι oval το σχήμα του gadget θα πρέπει να το φτιάξεις έτσι ώστε οι άκρες να μην "σβήνουν" προς το διαφανές. Πάντως, εγώ κατάφερα να μπορώ να φτιάχνω εύκολα το layout χρησιμοποιώντας CSS και absolute positioning και να κάνω preview το layout στον explorer (μέχρι να έρθει η ώρα να βάλω κώδικα τουλάχιστον γιατί μετά...). Αν θες, ρίξε μια ματιά στα Ελληνικά gadgets που έχει στο gallery να πάρεις ιδέες (πχ δες αυτό του In.gr και του Αθηνόραμα)

    Vir prudens non contra ventum mingit

  •  07-06-2007, 23:41 32734 σε απάντηση της 32733

    Απ: Vista Gadget - Transparent Images Major Problem

    KelMan:

    Το background του gadget υποστηρίζει transparency αλλά όχι alpha blending. Αν θέλεις να είναι oval το σχήμα του gadget θα πρέπει να το φτιάξεις έτσι ώστε οι άκρες να μην "σβήνουν" προς το διαφανές. Πάντως, εγώ κατάφερα να μπορώ να φτιάχνω εύκολα το layout χρησιμοποιώντας CSS και absolute positioning και να κάνω preview το layout στον explorer (μέχρι να έρθει η ώρα να βάλω κώδικα τουλάχιστον γιατί μετά...). Αν θες, ρίξε μια ματιά στα Ελληνικά gadgets που έχει στο gallery να πάρεις ιδέες (πχ δες αυτό του In.gr και του Αθηνόραμα)

    αν μπορείς να μου εξηγήσεις τη διαφορά μεταξύ του transparency και του alpha blending θα σου ήμουν ευγνώμωνSmile Το "να μην σβήνουν προς το διαφανές" ομολογώ πως δεν το κατάλαβα Sad

    Βρήκα έναν τρόπο για το layout. Αρχικά κάνω το slicing όπως θα το έκανα κανονικά, σώζω μόνο το HTML output, και μετά σβήνω τα slices και σώζω το png as usual. Το HTML το κάνω paste στο main file του gadget και βάζω για το table background το png που έσωσα. Α ρε μπακάλη ΜήτσοStick out tongue

    Το absolute positiong δεν μ'αρέσει γενικά και τόσο, σιχαίνομαι να μετράω pixelάκια. Btw, το Visual Studio δεν μου κάνει preview το table background image. Μήπως ξέρει κανείς γιατί;;;

    Τα έχω δει, τόσο του Αθηνοράματος, όσο και του in. Στο in, ο τύπος έχει ουσιαστικά ένα main background image στο Body, και από πάνω έχει χώσει ένα table όπου και βάζει τα tags. Αυτό πάω να κάνω, αλλά έστω ότι θέλω ανάλογα με ένα xml content που θα σκάει, να αλλάζω ένα μέρος του image που έχω για background. Και καταλήγω πάλι στο πρόβλημα που ανέφερα στο πρώτο post, ότι δηλαδή δεν παίζουνε τα transparent sliced PNGs Angry

    Dimitris-Ilias Gkanatsios
    Developer Evangelist, Microsoft Hellas

    My Blog
    StudentGuru
    Twitter
    Facebook

  •  07-06-2007, 23:44 32735 σε απάντηση της 32734

    Απ: Vista Gadget - Transparent Images Major Problem

    Να προσθέσω ότι πολλές φορές η sidebar cacheάρει images των gadgets, με συνέπεια να πρέπει να την κλείσεις και να την ξανανοίξεις. Και όχι, η cache της sidebar δεν έχει σχέση με τα Temporary Internet Files του IE (από όσο κατάλαβα, at least).
    Dimitris-Ilias Gkanatsios
    Developer Evangelist, Microsoft Hellas

    My Blog
    StudentGuru
    Twitter
    Facebook

  •  08-06-2007, 00:38 32737 σε απάντηση της 32734

    Απ: Vista Gadget - Transparent Images Major Problem

    Φαντάσου ότι έχουμε ένα image 20x20. Μέσα σε αυτό υπάρχει ένα τετράγωνο 5x5, χρώματος κόκκινου και η γύρω περιοχή είναι διαφανής. Εδώ δεν έχουμε alpha blending γιατί κάθε ένα pixel μπορεί να είναι ή κόκκινο ή transparent. Αν όμως εσωτερικά, αντί για τετράγωνο έχουμε κύκλο, με το alpha blending μπορούμε να εξομαλύνουμε το περίγραμμα (και να αποφύγουμε τα "σκαλάκια") βάζοντας τα pixels που είναι στο border του κύκλου να μερικώς διαφανή. Ας πούμε φαντάσου ένα δαχτυλίδι που έχει πλάτος τα τελευταία 3 pixels του κύκλου. Το εσώτερο θα έχει transparency 75%, το επόμενο 50% και το εξώτερο 25%. Δηλαδή τα pixels "σβήνουν" από κόκκινο προς το διαφανές (και όχι από κόκκινο προς κάποιο άλλο χρώμα) και έτσι το μάτι ξεγελιέται. Θα πρέπει λοιπόν να κάνεις διάφορες ρυθμίσεις στα εργαλεία του Photoshop όπως για παράδειγμα να μην έχουν feather. Αν ψάξεις τον όρο στο internet θα βρεις πολλά παραδείγματα. Δες αυτό και κάνε το αντίθετο Smile

    Ως προς το positioning, δεν είναι ανάγκη να φτιάξεις όλα τα divs με absolute positioning. Δεδομένου ότι δεν μιλάμε για μεγάλες σελίδες με πολλά elements αλλά για gadgets, το absolute positioning βοηθάει πάρα πολύ. Επίσης, δοκίμασε το Expression Web (μπορείς να βάλεις την trial) που έχει υπέροχη υποστήριξη CSS και θα σε διευκολύνει πολύ. Τέλος, άλλο ένα hint, βάλε το CSS styling σε εξωτερικό αρχείο και όχι inline για να ελέγχεις ποιό εύκολα τη διαδικασία.

    Vir prudens non contra ventum mingit
Προβολή Τροφοδοσίας RSS με μορφή XML
Με χρήση του Community Server (Commercial Edition), από την Telligent Systems