mirror of
https://github.com/adobe/brackets.git
synced 2024-11-20 18:02:54 +01:00
187 lines
16 KiB
HTML
187 lines
16 KiB
HTML
<!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 ]:::::]
|
||
[:::::[ ]:::::]
|
||
[:::::[ ]:::::]
|
||
[:::::[ ]:::::]
|
||
[:::::[ ]:::::]
|
||
[::::::[[[[[[[: :]]]]]]]::::::]
|
||
[:::::::::::::: ::::::::::::::]
|
||
[:::::::::::::: ::::::::::::::]
|
||
[[[[[[[[[[[[[[[ ]]]]]]]]]]]]]]]
|
||
|
||
--> |