зеркало из https://github.com/mozilla/brackets.git
188 строки
16 KiB
HTML
188 строки
16 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|||
|
|
<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 ]:::::]
|
|||
|
|
[:::::[ ]:::::]
|
|||
|
|
[:::::[ ]:::::]
|
|||
|
|
[:::::[ ]:::::]
|
|||
|
|
[:::::[ ]:::::]
|
|||
|
|
[::::::[[[[[[[: :]]]]]]]::::::]
|
|||
|
|
[:::::::::::::: ::::::::::::::]
|
|||
|
|
[:::::::::::::: ::::::::::::::]
|
|||
|
|
[[[[[[[[[[[[[[[ ]]]]]]]]]]]]]]]
|
|||
|
|
|
|||
|
|
-->
|