Anastasis 48 Report post Posted November 10, 2016 Το παρακάτω είναι ένα tip για το πως μπορούμε να βάλουμε έναν βαθμό προστασίας στις εικόνες μας, είναι σχετικά καλή προστασία, δηλαδή δεν θα μπορέσει ο καθένας να πάρει την εικόνα μας . Φυσικά να επισημάνω πως από την στιγμή που είναι online τίποτα δεν είναι ασφαλές, αλλα είμαστε υπεύθυνοι να αυξάνουμε το επίπεδο ασφαλειας σε ορισμένα θέματα. Λοιπόν για να μην τα πολυλογώ ας αρχίσουμε. Για αρχή φτιάχνουμε ένα gifaki 1x1 (width 1 και height 1) transparent. Για να γίνει αυτό ακολουθούμε τα παρακάτω βήματα. Ανοίγουμε το photoshop (εγώ αυτό δουλεύω, όχι ότι δεν μπορεί να γίνει και με αλλα προγράμματα επεξεργασίας εικόνας). Από το menu επιλέγουμε File -> New η πατάμε τον συνδυασμό Ctrl+N από το παράθυρο που μας βγαίνει βάζουμε την τιμή 1 στο Width και στο Heght και σιγουρευόμαστε πως η μονάδα μέτρησης είναι pixels και όχι κάτι άλλο. Στο Background Contents επιλέγουμε την τιμή Transparent από το drop down menu. Τέλος πατάμε OK Τώρα έχουμε στο stage μας μια εικόνα μεγέθους 1 x 1 με διαφανες χρώμα. Το επόμενο βήμα μας είναι να την αποθηκεύσουμε, επιλέγουμε από το menu File -> Save for Web η πατάμε τον συνδυασμό Alt+Shift+Ctrl+S. Στο παράθυρο που μας βγαίνει ελέγχουμε αν είναι τσεκαρισμένο το Transparency (φυσιολογικά πρέπει να είναι). Αφού κάναμε τον έλεγχο πατάμε Save και το σώζουμε σε ένα φάκελο της επιλογής μας με όνομα της επιλογής μας, εγώ χρησιμοποίησα το κοινό όνομα, spacer.gif Αυτά για το gifaki πάμε τώρα για το επόμενο στάδιο. Λοιπόν ας μιλήσουμε τώρα σε (X)HTML & CSS Βάζουμε το σκαρί της σελίδας μας. Εγώ δουλεύω σε XHTML 1.0 Strict σε οποιον δεν αρέσει μπορεί να το αλλάξει ότι βολεύει τον καθένα δεν πειράζει καθόλου το συγκεκριμένο "trick" δεν απαιτεί κάποιο validation ούτος η άλλος. Οποτε αρχικά έχουμε το παρακάτω.. κώδικας: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <title>Protecting images</title> </head> <body> <div> </div> </body> </html> Σημείωση: αν αλλάξετε το DTD από XHTML Strict σε απλή html αλλάξτε και το content από application/xhtml+xml σε text/html, αν πάλι αλλάξετε το DTD από Strict σε κάποιο άλλο XHTML DTD φροντίστε να είναι τουλάχιστον well formed η σελίδα σας αν όχι και valid γιατί θα σας χτυπήσει λόγο του application/xhtml+xml Στην συνεχεια φτιάχνουμε ένα CSS αρχείο και το αποθηκεύουμε με όνομα images.css. Για αρχή βάζουμε τον παρακάτω κώδικα μέσα.. κώδικας: img.foobar { background-image: url(../images/foobar.jpg); background-repeat: no-repeat; width: 100px; height: 100px; } Στο background-image βάζουμε το relative path προς την εικόνα. Στο background-repeat βάζουμε το value no-repeat για να μην επαναλαμβάνεται η εικόνα, μπορούμε να το αλλάξουμε αν θέλουμε να επαναλαμβάνεται όμως, ότι θέλουμε ανάλογα με την περίσταση! Στο width και στο height βάζουμε το width και το height της εικόνας αντίστοιχα. Θα μπορούσαμε να κάνουμε πολλά κολπάκια πάντως! Αλλάζοντας το width και το height σε 3 pixels παραπάνω πχ προσθέτοντας και ένα border: 1πχ solid #333333 (αυτό δηλώνει ένα πινακα γραμμικό με χρώμα 333333, είναι ένα ανοικτό μαύρο που m' αρέσει πολύ και το χρησιμοποιώ συχνά) τέλος θα προσθέταμε και ένα background-position: center center; για να κάτσει ακριβώς την μέση η εικόνα μας, το background-position property βοηθάει στο να καθορίζεις την θέση του background στο αντικείμενο, παίρνει τιμές x και y με βάση τον άξονα το x ορίζει την οριζόντια θέση και το y την κάθετη οποτε βάζουμε το value center center χωρίς κόμμα και αυτό αυτόματα κεντράρετε στην μέση, και το αποτέλεσμα θα ήταν ένα πολύ ωραίο image με ένα περίγραμμα για να μην είναι ξεκάρφωτο στην σελίδα μας Όμως δεν τελειώνει εδώ! θα μπορούσαμε να το "αναπατυξουμε" πολύ παραπάνω! χρησιμοποιώντας το pseudo class :hover θα μπορούσαμε να κάνουμε πολλά πράματα, από το ποιο απλό, όπως το να αλλάζεις το border color έως και να κάνουμε switch την εικόνα με μια άλλη αλλάζοντας το background-image* σε άλλο value και αλλα πολλά!! Εμείς ας κρατήσουμε το απλό για το παράδειγμα μας μιας και τα αλλα αποτελούν από μονα τους επιπλέον τεχνικές Οποτε προσθέτουμε και το παρακάτω στο css μας κώδικας: img.foobar:hover { border: 1px solid #f9f9f9; } Άφησα το πάχος του border 1πχ και γραμμικό και άλλαξα το χρώμα του σε #f9f9f9 το οποιο είναι ένα πολύ ανοικτό γκριζάκι, προς το άσπρο ποιο πολύ, άλλο ένα χρώμα που μου αρέσει πολύ και το χρησιμοποιώ αρκετά για backgroung color! Ωραία! τώρα που έχουμε το css μας έτοιμο πάμε να το βάλουμε στην (X)HTML σελίδα μας. Κάτω από το title element προσθέτουμε το παρακάτω link element κώδικας: <link href="css/images.css" type="text/css" rel="stylesheet" /> Πολύ ωραία! τώρα που προσθέσαμε το css μας είμαστε πλέον έτοιμοι να προσθέσουμε και το image μας! Οποτε προσθέτουμε το image μας με τον παρακάτω κώδικα τον οποιον βάζουμε μέσα στο div element που έχουμε μέσα στο body της σελίδας μας.. κώδικας: <img src="images/spacer.gif" class="foobar" alt="My protected image!" /> Στο attribute src βάζουμε το path για το spacer.gif, η όπως το έχει ονομάσει ο καθ' ένας, που φτιάξαμε προηγούμενος. Στο attribute class βάζουμε το class που φτιάξαμε, στην προκειμενη περίπτωση έχουμε μονο το class με όνομα foobar, θα μπορούσαμε να έχουμε πολλά classes, όσες εικόνες θα θέλαμε να χρησιμοποιήσουμε με αυτόν τον τρόπο θα τις είχαμε σε διαφορετική class για την κάθε μια! Οποτε εμείς βάλαμε την class foobar μιας και είναι η μονη που έχουμε. Μιας και θέλω να είμαι valid πρόσθετο πάντα το alt attribute. Δεν είναι το θέμα μας αλλα θα το αναφέρω. Είναι καλο να προσθέτουμε αυτό το attribute πάντως, χρησιμεύει στο να περιγραφει στον χρηστη περί τίνος πρόκειται να δείξει η εικόνα, ο χρηστος το βλέπει όταν πάει το mouse από πάνω από την εικόνα και το κρατάει για μερικά ms. Επίσης χρησιμεύει στο να αναφέρει στον χρηστη μια περιγραφή σε περίπτωση που είναι πολύ μεγάλη η εικόνα και αργεί να φορτώσει η αν δεν βρίσκει το path προς την εικόνα δείχνει την περιγραφή μονο. Λοιπόν! αυτό ήταν το όλο θέμα περί της τεχνικής αυτής, το πως μου ήρθε.. αστείο, το είδα σε όνειρο! Τώρα φυσιολογικά θα πρέπει να έχετε το παρακάτω Ένα αρχείο gif μεγέθους 1x1 διαφανες Ένα αρχείο css με όνομα images.css και με περιεχόμενο κώδικας: img.foobar { background-image: url(../images/foobar.jpg); background-repeat: no-repeat; width: 103px; height: 103px; border: 1px solid #333333; background-position: center center; } img.foobar:hover { border: 1px solid #f9f9f9; } Και ένα αρχείο .html με όνομα της αρεσκείας σας και με περιεχόμενο κώδικας: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <title>Protecting images</title> <link href="css/images.css" type="text/css" rel="stylesheet" /> </head> <body> <div> <img src="images/spacer.gif" class="foobar" alt="My protected image!" /> </div> </body> </html> Demo here! Αυτά εκ μέρους μου προς το παρόν! Ελπίζω να σας φανεί χρήσιμο, προσωπικά δεν μου φάνηκε χρήσιμο κάπου προς το μιας και για μένα η ιδέα του internet είναι να είναι όλα ελευθερα για όλους και προσβάσιμα απ' όλους μιας και αποτελούν όλα μια πηγή πληροφοριών, αυτή είναι και η ιδέα του web 2 άλλωστε... Αν και ώρες ώρες θα πρέπει να προστατεύεις κάπως κάποια πράματα! Anyway! Ευχάριστο που το διαβάσατε! Cya next time! * Μιας και ανέφερα το sweep τον εικόνων με αυτόν τον τρόπο, με την αλλαγή δηλαδή στο value του background-image property στο :hover, ναπω πως έτσι δημιουργείται ένα flickering στο mouse over - :hover - δηλαδή δεν βλέπει τίποτα το χρηστης μέχρι να φορτώσει η εικόνα που έχουμε ορίσει στο:hover, για να apofgoume κάτι τέτοιο κάνουμε το εξής. Θα τα πω χοντρικά μιας και δεν είναι το θέμα μας. Έχουμε 2 εικόνες 100x100 η κάθε μια θα τις ενώσουμε οποτε θα πάρουμε μια εικόνα 200x100 όπου αριστερά θα έχει την normal εικόνα και δεξιά την :hover εικόνα. Στο normal class θα βάλουμε την εικόνακαι στο background-position θα βάλουμε τις τιμές: 0px 0px οποτε θα έχουμε αυτό με λίγα λόγια: background-position: 0px 0px; έπειτα στοhover θα αλλάξουμε το background-position: 0px 0px; σε background-position: -100πχ 0px; και φυσικά εννοείτε πως στο width δεν θα βάλουμε200πχ αλλα 100πχ. Αυτά, τα είπα αρκετά χοντρά αλλα εξήγησα τον λόγο, αν όμως κάποιος θέλει να το αναπτύξω και αυτό το θέμα.. just ask for it! PS: Ένα ακόμα tip που έδωσε ο Rapid-eraser είναι βάζοντας ένα mod μέσο .htaccess απαγορεύοντας direct link στις εικόνες. Με αυτό το τρόπο αυξάνουμε την προστασία ακόμα περισσότερο! Αλλα όπως είπαμε ξανά και ξανά τίποτα δεν έχει την απόλυτη ασφάλεια από την στιγμή που είναι online! 1 Quote Share this post Link to post Share on other sites
