<pagebreak>
====== Gimp - Άσκηση 9 - Εικόνες - Εύρεση και Επεξεργασία ======
//Δοκιμασμένο σε Gimp 2.8.14, εκτύπωση σε firefox//
  * Νέα : **Επεξεργασία διαστάσεων με Gimp**

----
   * Για να εισάγουμε εικόνες στο joomla θα περάσουμε από τα παρακάτω στάδια. **Εύρεση** εικόνων στο διαδίκτυο, **τροποποίηση διαστάσεων** εικόνων με Gimp, **μεταφόρτωση** (upload) μέσω joomla ή μέσω ftp και τέλος **εισαγωγή εικόνων** σε άρθρο στο joomla.

\\ 

**ΕΙΚΟΝΕΣ **

----

  - **ΕΥΡΕΣΗ ΕΙΚΟΝΩΝ** στο διαδίκτυο
    * Θα βρούμε εικόνες για να τοποθετήσουμε στα 2 άρθρα, **Κέρκυρα** και **Παρίσι**
    - Πηγαίνουμε στην αρχική διεύθυνση του google και κάνουμε κλικ στο **Εικόνες**. Κάνουμε αναζήτηση για **''Κέρκυρα''**. Στα αποτελέσματα της αναζήτησης, πατάμε στον σύνδεσμο **Εργαλεία Αναζήτησης** και αλλάζουμε το φίλτρο **Όλα τα μεγέθη** σε **Μεγάλες**. Αυτό θα μας επιστρέψει εικόνες μεγάλου μεγέθους. 
      - Κάνουμε δεξί κλικ πάνω σε κάποια που μας αρέσει και πηγαίνουμε **Προβολή Εικόνας**
    - Ενώ βλέπουμε την εικόνα στο μεγάλο της μέγεθος (καλύπτει όλο το παράθυρο), πατάμε **Αποθήκευση εικόνας ως** και αποθηκεύουμε μέσα στον φάκελο **''mathimata/html/joomla/eikones''** (αν δεν υπάρχει τον δημιουργούμε) με όνομα **''kerkyra1.jpg''**
    - Με όμοιο τρόπο βρίσκουμε και αποθηκεύουμε στον ίδιο φάκελο, τουλάχιστον άλλες 2 εικόνες ως **''kerkyra2.jpg''** και **''kerkyra3.jpg''**
    - Αφού βρήκαμε εικόνες από την Κέρκυρα, θα ψάξουμε και για εικόνες από το **Παρίσι** πάντα στο **Μεγάλο** μέγεθος. Με όμοιο τρόπο λοιπόν, βρίσκουμε 3 εικόνες για **Παρίσι** και αποθηκεύουμε στον ίδιο φάκελο ως **''paris1.jpg''**, **''paris2.jpg''** και **''paris3.jpg''**
  - **ΑΛΛΑΓΗ ΔΙΑΣΤΑΣΕΩΝ ΕΙΚΟΝΩΝ** μέσω **Gimp**
    * Οι εικόνες που βρήκαμε μπορεί να είναι αρκετά καλής ποιότητας αλλά είναι **υπερβολικά μεγάλες**, αφού ξεπερνούν σε ανάλυση (μέγεθος) όλο το παράθυρο του περιηγητή μας. Παράλληλα είναι **αρκετά μεγάλα ως αρχεία**, οπότε η ιστοσελίδα μας θα **καθυστερήσει** να εμφανιστεί στον επισκέπτη. Εμείς θα θέλαμε να τις εμφανίσουμε σε μικρότερο μέγεθος μαζί με κείμενο. Πάμε λοιπόν να τις επεξεργαστούμε με το Gimp.
    - Ξεκινάμε το **Gimp** και πηγαίνουμε **Αρχείο/Άνοιγμα**, βρίσκουμε την εικόνα **''kerkyra1.jpg''** και την φορτώνουμε.
    - Πηγαίνουμε **Εικόνα / Κλιμάκωση Εικόνας** και αλλάζουμε μόνο το **Πλάτος** σε **''400''**. Κάνουμε κλικ στο **Ύψος** (ή πατάμε ΤΑΒ) και παρατηρούμε ότι άλλαξε και αυτό. Αυτό συμβαίνει γιατί οι αναλογίες ύψους-πλάτους είναι **κλειδωμένες**. Αυτό φαίνεται και από την αλυσίδα δεξιά τους που είναι ενωμένη. Πατάμε στο κουμπί **Κλιμάκωση** για να ολοκληρώσουμε την αλλαγή.
    - Πηγαίνουμε **Προβολή / Εστίαση** και επιλέγουμε **1:1 (100%)**. Σε αυτό το μέγεθος θα εμφανιστεί η εικόνα μας.
    - Πηγαίνουμε **Αρχείο / Εξαγωγή ως**. **ΠΡΟΣΟΧΗ!** Αποθηκεύουμε με άλλο όνομα : **''kerkyra1-small.jpg''**. Θα κρατάμε δηλαδή και τις μεγάλες εικόνες και θα αποθηκεύουμε τις μικρές προσθέτοντας **''-small''**.
    - Πηγαίνουμε **Αρχείο / Κλείσιμο** και ξανά **Αρχείο / Άνοιγμα** και ψάχνουμε την επόμενη εικόνα **''kerkyra2.jpg''**. Όπως προηγουμένως αλλάζουμε το **Πλάτος** σε **''400''** και αποθηκεύουμε ως **''kerkyra2-small.jpg''**
    - Με όμοιο τρόπο δημιουργούμε τις : **''kerkyra3-small.jpg, paris1-small.jpg, paris2-small.jpg''** και **''paris3-small.jpg''**.
    - Έχουμε τροποποιήσει 6 εικόνες, σε μικρότερο **μέγεθος εμφάνισης**. Πάμε όμως να δούμε και τι αλλαγή έγινε στο **μέγεθος αρχείου**, που μας ενδιαφέρει ώστε η ιστοσελίδα μας να εμφανίζεται γρήγορα. Πηγαίνουμε από τον περιηγητή αρχείων στον φάκελο **''mathimata/joomla/eikones''** και πατάμε στην **Προβολή** ως **Λίστα** ή ως **Λεπτομέρειες** για να μας εμφανιστούν τα μεγέθη αρχείων.
    * Παρατηρούμε ότι τα μεγέθη των εικόνων με μικρές διαστάσεις (τα αρχεία **''-small''**) είναι τουλάχιστον 10 φορές **μικρότερα**. Αυτό σημαίνει ότι η ιστοσελίδα μας θα εμφανίζεται τουλάχιστον 10 φορές **πιο γρήγορα**. Είμαστε έτοιμοι να ανεβάσουμε τις φωτογραφίες μας στο site.


|{{:el:school:lessons:html:google_search_large_images.jpg?350|google : εύρεση μεγάλων εικόνων}}|{{:el:school:lessons:html:gimp_kerkyra1_400px.jpg?350|Gimp : kerkyra1.jpg - πλάτος 400px}}|

<pagebreak>