samples/el/Getting Started/index.html - master - githubmirror/brackets

samples/el/Getting Started/index.html
187 строк16 KB
valtlait
Sample projects: remove trailing whitespace end of non-empty lines, fix arrow
17 апр 2015, 17:28
17 апр 2015, 17:2814493d0
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>ΞΕΚΙΝΩΝΤΑΣ ΜΕ ΤΟ BRACKETS</title>
        <meta name="description" content="An interactive getting started guide for Brackets.">
        <link rel="stylesheet" href="main.css">
    </head>
    <body>

        <h1>ΞΕΚΙΝΩΝΤΑΣ ΜΕ ΤΟ BRACKETS</h1>
        <h2>Αυτός είναι ο οδηγός σας!</h2>
        
        <!--
            MADE WITH <3 AND JAVASCRIPT
        -->
        
        <p>
            Καλώς ήρθατε σε μια πρώιμη προεπισκόπηση του Brackets, ένας νέος επεξεργαστής κειμένου ανοιχτού-κώδικα για τη νέα γενιά του
            διαδικτύου. Είμαστε μεγάλοι οπαδοί των προτύπων και θέλουμε να φτιάξουμε καλύτερα εργαλεία για JavaScript, HTML και CSS
            και σχετικές ανοιχτές τεχνολογίες του διαδικτύου. Αυτό είναι το ταπεινό μας ξεκίνημα.
        </p>
        
        <!--
            WHAT IS BRACKETS?
        -->
        <p>
            <em>Το Brackets είναι ένας διαφορετικής μορφής επεξεργαστής κειμένου.</em>
            Μία αξιοσημείωτη διαφορά είναι ότι αυτός ο επεξεργαστής κειμένου είναι γραμμένος σε JavaScript, HTML και CSS.
            Αυτό σημαίνει ότι οι περισσότεροι από εσάς που χρησιμοποιούν το Brackets έχουν τις ικανότητες να τροποποιήσουν και να επεκτείνουν τον επεξεργαστή κειμένου.
            Στην πραγματικότητα, χρησιμοποιούμε το Brackets κάθε μέρα για να φτιάξουμε το Brackets. Επίσης, έχει και κάποιες μοναδικές λειτουργίες όπως η Γρήγορα Επεξεργασία,
            το Live Preview και άλλες που μπορεί να μην βρείτε σε άλλους επεξεργαστές.
            Για να μάθετε περισσότερα για το πως να χρησιμοποιήσετε αυτές τις λειτουργίες, συνεχίστε το διάβασμα.
        </p>
        
        
        <h2>Δοκιμάζουμε μερικά νέα πράγματα</h2>
        
        <!--
            THE RELATIONSHIP BETWEEN HTML, CSS AND JAVASCRIPT
        -->
        <h3>Γρήγορη Επεξεργασία για CSS και JavaScript</h3>
        <p>
            Όχι πια εναλλαγή μεταξύ των αρχείων και απόσπαση της προσοχής. Όταν επεξεργάζεστε HTML, χρησιμοποιήστε
            την συντόμευση <kbd>Cmd/Ctrl + E</kbd> για να ανοίξετε έναν γρήγορο ενσωματωμένο επεξεργαστή που εμφανίζει το σχετικό CSS κώδικα.
            Κάντε την αλλαγή στον κώδικα CSS, πατήστε <kbd>ESC</kbd> και είστε πίσω στην επεξεργασία HTML, ή απλά αφήστε τους
            CSS κανόνες ανοιχτούς και αυτοί θα γίνουν μέρος του επεξεργαστή HTML. Αν πατήσεις <kbd>ESC</kbd> έξω από
            έναν γρήγορο ενσωματωμένο επεξεργαστή, θα κρυφτούν όλα.
        </p>
        
        <samp>
            Θέλετε να το δείτε στην πράξη; Βάλε τον κέρσορα στο <!-- <samp> --> tag από πάνω και πάτησε
            <kbd>Cmd/Ctrl + E</kbd>. Πρέπει να δεις ένα γρήγορο ενσωματωμένο επεξεργαστή να εμφανίζετε από πάνω, που δείχνει τον κανόνα CSS
            που σχετίζετε με αυτό το tag. Η Γρήγορη Επεξεργασία λειτουργεί επίσης και για class και id ιδιότητες.

            Μπορείτε να δημιουργήσετε και νέους κανόνες με τον ίδιο τρόπο. Κάντε κλικ σε ένα από τα tags <!-- <p> --> από πάνω και πατήστε
            <kbd>Cmd/Ctrl + E</kbd>. Δεν υπάρχουν κανόνες για αυτό προς το παρόν, αλλά μπορείτε να πατήσετε το κουμπί Νέου Κανόνα
            για να εισάγετε έναν νέο κανόνα για το <!-- <p> -->.
        </samp>
        
        <a href="screenshots/quick-edit.png">
            <img alt="A screenshot showing CSS Quick Edit" src="screenshots/quick-edit.png" />
        </a>
        
        <p>
            Μπορείς να χρησιμοποιήσεις την ίδια συντόμευση για κώδικα JavaScript για να δεις το σώμα μιας συνάρτησης με
            το να τοποθετείς τον κέρσορα στο όνομα της συνάρτησης που καλείτε. Για τώρα οι γρήγοροι ενσωματωμένοι επεξεργαστές δεν μπορούν
            να γίνουν ένθετοι, άρα μπορείς να χρησιμοποιήσεις την Γρήγορη Επεξεργασία μόνο όταν ο κέρσορας είναι μέσα σε έναν «πλήρους μεγέθους» επεξεργαστή.
        </p>
        
        <!--
            LIVE PREVIEW
        -->
        <h3>Προεπισκόπηση αλλαγών HTML και CSS ζωντανά στον browser</h3>
        <p>
            Ξέρεις αυτό το «χορό save/reload» που κάνουμε τόσα χρόνια; Αυτό που κάνεις αλλαγές στον
            επεξεργαστή σου, πατάς αποθήκευση, γυρνάς στον browser και μετά κάνεις ανανέωση για να δεις επιτέλους το αποτέλεσμα;
            Με το Brackets, δεν χρειάζεται να κάνεις αυτόν τον χορό.
        </p>
        <p>
            Το Brackets θα ανοίξει μία <em>ζωντανή σύνδεση</em> στον τοπικό σου browser και θα στείλει τους ανανεωμένους κώδικες HTML και CSS καθώς εσύ
            πληκτρολογείς! Μπορεί ήδη να κάνεις κάτι τέτοιο με εργαλεία που βασίζονται στον browser, αλλά με το Brackets
            δεν υπάρχει ανάγκη να αντιγράφεις και να επικολλάς τον τελικό κώδικα πίσω στον επεξεργαστή. Ο κώδικας σου τρέχει στον
            browser, αλλά ζει στον επεξεργαστή σου!
        </p>
        
        <h3>Ζωντανή επισήμανση στοιχείων HTML και κανόνων CSS</h3>
        <p>
            Το Brackets κάνει εύκολο το να βλέπεις πως οι αλλαγές στους κώδικες HTML και CSS θα επηρεάσουν την σελίδα. Όταν ο κέρσορας
            είναι σε έναν κανόνα CSS, το Brackets θα επισημάνει όλα τα στοιχεία στον browser που επηρεάζονται. Παρόμοια, όταν επεξεργάζεστε
            ένα αρχείο HTML, το Brackets θα επισημάνει τα αντιστοιχούμενα στοιχεία HTML στον browser.
        </p>
        
        <samp>
            Αν έχεις εγκατεστημένο τον Google Chrome, μπορείς να το δοκιμάσεις μόνο σου. Κάνε κλικ στο εικονίδιο της αστραπής
            στην πάνω δεξιά γωνία του παραθύρου του Brackets ή πατήστε <kbd>Cmd/Ctrl + Alt + P</kbd>. Όταν
            το Live Preview ενεργοποιηθεί σε ένα έγγραφο HTML, όλα τα συνδεόμενα αρχεία CSS μπορούν να επεξεργασθούν σε πραγματικό χρόνο.
            Το εικονίδιο θα αλλάξει από γκρι σε χρυσό όταν το Brackets δημιουργήσει την σύνδεση με τον browser.
            
            Τώρα, τοποθέτησε τον κέρσορα του στο από πάνω <!-- <img> --> tag. Παρατηρήστε την μπλε επισήμανση που εμφανίζετε
            γύρω από την εικόνα στον Chrome. Έπειτα, χρησιμοποιήστε το <kbd>Cmd/Ctrl + E</kbd> για να ανοίξετε τους ορισμένους κανόνες CSS.
            Δοκιμάστε να αλλάξετε το μέγεθος του πλαισίου από 1px σε 10px ή αλλάξτε το χρώμα του φόντου
            από "dimgray" σε "hotpink". Αν έχετε το Brackets και τον browser σας να είναι δίπλα δίπλα, θα δείτε
            τις αλλαγές να συμβαίνουν στιγμιαία στον. Αμάτο, έτσι;
        </samp>
                
        <p class="note">
            Σήμερα, το Brackets υποστηρίζει το Live Preview μόνο για HTML και CSS. Όμως, στην τρέχουσα έκδοση, οι αλλαγές
            σε αρχεία JavaScript ανανεώνονται αυτόματα όταν κάνετε αποθήκευση. Προς το παρόν δουλεύουμε τη υποστήριξη του Live Preview
            για JavaScript. Επίσης, οι άμεσες προεπισκοπήσεις του Live Preview είναι δυνατές μόνο με τον Google Chrome, αλλά ελπίζουμε
            να φέρουμε αυτήν την λειτουργία σε όλους τους μεγάλους browser στο μέλλον.
        </p>
                
        <h3>Γρήγορη Προβολή</h3>
        <p>
            Για όσους από εμάς δεν απομνημονεύσει ακόμα τις αντιστοιχίες χρωμάτων για τις τιμές HEX ή RGB, το Brackets κάνει
            γρήγορο και εύκολο το να βλέπεις ακριβώς ποιο χρώμα χρησιμοποιείται. Είτε σε CSS είτε σε HTML, απλά περάστε το ποντίκι πάνω από
            τα τιμές του χρώματος ή τις διαβαθμίσεις χρώματος και το Brackets θα εμφανίσει μια προβολή αυτού του χρώματος ή της διαβάθμισης αυτόματα. Το
            ίδιο συμβαίνει και με τις εικόνες: απλά περάστε πάνω από τον σύνδεσμο της εικόνας στο Brackets και αυτό θα προβάλει μια
            μικρογραφία αυτής της εικόνας.
        </p>
        
        <samp>
            Για να δοκιμάσετε την Γρήγορη Προβολή από μόνος σας, βάλτε τον κέρσορα πάνω από το tag <!-- <body> --> στην κορυφή αυτού του
            αρχείου και πατήστε <kbd>Cmd/Ctrl + E</kbd> για να ανοίξετε έναν γρήγορο επεξεργαστή CSS. Τώρα απλά πηγαίνετε το βελάκι πάνω από οποιοδήποτε
            τιμή χρώματος μέσα στο αρχείο CSS. Επίσης, μπορείτε να το δείτε στη πράξη σε διαβαθμίσεις χρώματος με το ανοίξετε έναν γρήγορο επεξεργαστή CSS
            στο tag <!-- <html> --> και πηγαίνοντας το βελάκι πάνω από οποιαδήποτε τιμή χρώματος του φόντου. Για να χρησιμοποιήσετε την προβολή
            εικόνας, βάλτε τον κέρσορα πάνω από το screenshot που συμπεριλήφθηκε προηγουμένως σε αυτό το έγγραφο.
        </samp>

        <h3>Χρειάζεστε κάτι άλλο; Δοκιμάστε μία επέκταση!</h3>
        <p>
            Εκτός από όλα τα καλά που έχει το Brackets, η μεγάλη και αυξανόμενη κοινότητα των
            developers επεκτάσεων έχει φτιάξει πάνω από εκατό επεκτάσεις που προσθέτουν χρήσιμες λειτουργίες. Αν υπάρχει
            κάτι που χρειάζεστε και το Brackets δεν το προσφέρει, είναι πολύ πιθανό κάποιος να έχει φτιάξει μία επέκταση
            για αυτό. Για να περιηγηθήτε ή να ψάξετε τη λίστα των διαθέσιμων επεκτάσεων, πηγαίντε <strong>Αρχείο > Διαχειρηστής
            Επεκτάσεων</strong> και κάντε κλικ στην καρτέλα «Διαθέσιμες». Όταν βρείτε μια επέκταση που θέλετε, απλά κάντε κλικ
            στο κουμπί της εγκτάστασης δίπλα του.
        </p>
        
        <!--
            LET US KNOW WHAT YOU THINK
        -->
        <h2>Συμμετάσχετε</h2>
        <p>
            Το Brackets είναι ένα project ανοιχτού κώδικα. Web developers από όλον τον κόσμο συνεισφέρουν για να φτιάξουν
            έναν καλύτερο επεξεργαστή κώδικα. Πολλοί περισσότεροι φτιάχνουν επεκτάσεις που επεκτείνουν τις δυνατότητες του Brackets.
            Πείτε μας τι πιστεύετε, μοιραστείτε τις ιδέες σας ή συνεισφέρετε άμεσα στο
            project.
        </p>
        <ul>
            <li><a href="http://brackets.io">Brackets.io</a></li>
            <li><a href="http://blog.brackets.io">Brackets Team Blog</a></li>
            <li><a href="http://github.com/adobe/brackets">Brackets στο GitHub</a></li>
            <li><a href="https://github.com/adobe/brackets/wiki/Brackets-Extensions">Επεκτάσεις Brackets</a></li>
            <li><a href="http://github.com/adobe/brackets/wiki">Brackets Wiki</a></li>
            <li><a href="http://groups.google.com/group/brackets-dev">Brackets Developer Mailing List</a></li>
            <li><a href="https://twitter.com/#!/brackets">@Brackets στο Twitter</a></li>
            <li>Συνομιλήστε με τους προγραμματιστές του Brackets στο IRC κανάλι #brackets στο Freenode (κυρίως στα Αγγλικά)</li>
        </ul>

    </body>
</html>
<!--

    [[[[[[[[[[[[[[[      ]]]]]]]]]]]]]]]
    [::::::::::::::      ::::::::::::::]
    [::::::::::::::      ::::::::::::::]
    [::::::[[[[[[[:      :]]]]]]]::::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [:::::[     CODE THE WEB     ]:::::]
    [:::::[  http://brackets.io  ]:::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [::::::[[[[[[[:      :]]]]]]]::::::]
    [::::::::::::::      ::::::::::::::]
    [::::::::::::::      ::::::::::::::]
    [[[[[[[[[[[[[[[      ]]]]]]]]]]]]]]]

-->