Παίζοντας με το Deep Zoom

Πέρσι τέτοιες μέρες ήθελα να φτιάξω ένα στατικό site γρήγορα και εύκολα. Οι σχέσεις μου με web design και web development δεν είναι οι καλύτερες, οπότε και αποφάσισα σήμερα να ξεκινήσω την αναδόμηση του site από πλευράς design και σκεφτόμουν τι μπορώ να προσθέσω ή να αλλάξω. Δύο πράγματα μπορούσα να αλλάξω. Το design και τη gallery φωτογραφιών που υπάρχει στο site. Έτσι σε αυτό το post θα σας δείξω, πως ένας developer μπορεί να προσθέσει μία πολύ όμορφη έκθεση φωτογραφιών στο site του. Χρησιμοποίησα το Deep Zoom Composer της Microsoft το οποίο χρησιμοποιεί την τεχνολογία silverlight. Μερικά από τα κυριότερα παραδείγματα του Deep  Zoom είναι τα παρακάτω, όπου όπως μπορείτε να δείτε, τα αποτελέσματα είναι εντυπωσιακά.

Vertigo :: Deep Zoom Obama :: Hard Rock Memorabilia

Βήμα 1

Κατεβάζουμε και εγκαθιστούμε τον Deep Zoom Composer από το site της Microsoft.

Βήμα 2

Φτιάχνουμε ένα νέο project και το ονομάζουμε όπως θέλουμε. Εγώ το ονόμασα pseudorofes από το ομώνυμο site στο οποίο θα το χρησιμοποιήσω.

Βήμα 3

Προσθέτουμε όσες φωτογραφίες θέλουμε από το πλήκτρο add image πάνω δεξιά και όταν λέμε “όσες θέλουμε” το εννοούμε ;) Όταν τελειώσουμε πατάμε το Compose στο μενού πάνω από την φωτογραφία.

Βήμα 4

Εδώ είναι το διασκεδαστικό κομμάτι. Έχετε στην κεντρική εικόνα, το περιβάλλον εργασίας και δεξιά τις φωτογραφίες. Με drag n drop και μερικές απλές κινήσεις μπορείτε να φτιάξετε ότι θέλετε, να μετασχηματίσετε τις φωτογραφίες όπως θέλετε και σε ότι μεγέθη χρειάζεστε. Μην ανησυχήσετε για την ευκρίνεια. Θα δείτε στο τέλος ότι όλες οι φωτογραφίες φαίνονται τέλεια όταν γίνεται zoom πάνω τους (that’s y και Deep Zoom). To περιβάλλον είναι ξεκούραστο, έχει στηλοθέτες και λοιπα βοηθήματα που κάνουν την τοποθέτηση φωτογραφιών πραγματικό παιχνίδι, σαν κολλάζ χωρίς κόλλα, ψαλίδια και χάρακες. Όταν τελειώσετε πατήστε το export.

Βήμα 5

Εδώ έχετε δύο επιλογές, να φορτώσετε το gallery σε ένα photozoom account ή να πάρετε τον κώδικα που θα γίνει generate και να τον χρησιμοποιήσετε όπως εσείς θέλετε. Διάλεξα να έχω τα images σε png. Επίσης διάλεξα να δω και το silverlight project και πάτησα export. Περιμένουμε μερική ώρα μέχρι να τελειώσει η επεξεργασία και μετά μπορούμε να συνεχίσουμε.

Βήμα 6

Έχοντας έτοιμα τα αρχεία του silverlight μπορούμε να τα χρησιμοποιήσουμε όπως θέλουμε. Φόρτωσα στον server μου όλα τα αρχεία και το μόνο που έκανα ήτα να taggaro το object μέσα στο html μου. Σε αυτό το σημείο χρησιμοποίησα το Microsoft Expression Web 2 (το οποίο είναι φανταστικό) και έγραψα απλά το παρακάτω:

Το πρόγραμμα είναι σε silverlight οπότε δεν σας ενδιαφέρει αν έχετε apache, iis, php, asp, firefox, IE etc etc. Είναι Silverlight το οποίο τρέχει στον client και αν δεν υπάρχει το redistributable απλά το κατεβάζει και το εγκαθιστά ο χρήστης. Το αποτέλεσμα ήταν πολύ ωραίο όπως μπορείτε να δείτε και μόνοι σας. Τώρα μένει το lifting για όλο το υπόλοιπο site :P:P:P hehehe…

Cheers