diff options
Diffstat (limited to 'files/el')
87 files changed, 9770 insertions, 0 deletions
diff --git a/files/el/_redirects.txt b/files/el/_redirects.txt new file mode 100644 index 0000000000..78a11373f6 --- /dev/null +++ b/files/el/_redirects.txt @@ -0,0 +1,4 @@ +# FROM-URL TO-URL +/el/docs/Introduction /el/docs/Mozilla/Developer_guide/Introduction +/el/docs/MDN/Getting_started /el/docs/MDN/Contribute/Getting_started +/el/docs/en /en-US/ diff --git a/files/el/_wikihistory.json b/files/el/_wikihistory.json new file mode 100644 index 0000000000..ad7c7639a9 --- /dev/null +++ b/files/el/_wikihistory.json @@ -0,0 +1,362 @@ +{ + "Glossary": { + "modified": "2020-10-07T11:07:46.598Z", + "contributors": [ + "peterbe", + "SphinxKnight", + "wbamberg", + "Epameinondas-Soufleros", + "klez" + ] + }, + "Glossary/AJAX": { + "modified": "2019-03-23T22:21:36.224Z", + "contributors": [ + "dspentzos" + ] + }, + "Glossary/Abstraction": { + "modified": "2019-03-23T22:30:01.944Z", + "contributors": [ + "Epameinondas-Soufleros" + ] + }, + "Glossary/Computer_Programming": { + "modified": "2019-03-23T22:30:01.059Z", + "contributors": [ + "Epameinondas-Soufleros" + ] + }, + "Glossary/ECMA": { + "modified": "2019-03-23T22:30:01.699Z", + "contributors": [ + "Epameinondas-Soufleros" + ] + }, + "Glossary/Falsy": { + "modified": "2019-03-23T22:24:42.968Z", + "contributors": [ + "SpirosBaden" + ] + }, + "Glossary/HTML": { + "modified": "2019-03-23T22:30:01.581Z", + "contributors": [ + "Epameinondas-Soufleros" + ] + }, + "Glossary/Hoisting": { + "modified": "2019-03-23T22:08:53.838Z", + "contributors": [ + "mathiou", + "mplexus" + ] + }, + "Glossary/Java": { + "modified": "2019-03-23T22:09:04.953Z", + "contributors": [ + "mplexus" + ] + }, + "Glossary/Null": { + "modified": "2020-03-23T10:56:53.087Z", + "contributors": [ + "K.Gialouris" + ] + }, + "Glossary/ltr": { + "modified": "2019-03-23T22:16:47.243Z", + "contributors": [ + "ncdempelis" + ] + }, + "Glossary/Δείκτης": { + "modified": "2019-01-17T02:27:54.053Z", + "contributors": [ + "ValentinHacker" + ] + }, + "Glossary/Προσβασιμότητα": { + "modified": "2019-03-18T21:43:32.407Z", + "contributors": [ + "ValentinHacker" + ] + }, + "Learn": { + "modified": "2020-07-16T22:43:39.483Z", + "contributors": [ + "dspentzos", + "SphinxKnight", + "hermesorder", + "sideshowbarker" + ] + }, + "Learn/Common_questions": { + "modified": "2020-07-16T22:35:22.667Z", + "contributors": [ + "stephaniehobson" + ] + }, + "Learn/Common_questions/Πώς_δουλεύει_το_Διαδίκτυο": { + "modified": "2020-07-16T22:35:36.513Z", + "contributors": [ + "Amalchen" + ] + }, + "Learn/Common_questions/Σελίδες_τόποι_διακομιστές_και_μηχανές_αναζήτησης": { + "modified": "2020-07-16T22:35:39.520Z", + "contributors": [ + "Amalchen" + ] + }, + "Learn/Common_questions/Τι_είναι_οι_υπερσύνδεσμοι": { + "modified": "2020-07-16T22:35:42.895Z", + "contributors": [ + "Amalchen" + ] + }, + "Learn/Getting_started_with_the_web": { + "modified": "2020-07-16T22:33:50.911Z", + "contributors": [ + "c-vradis" + ] + }, + "Learn/HTML": { + "modified": "2020-07-16T22:22:16.075Z", + "contributors": [ + "Sheppy" + ] + }, + "Learn/HTML/Forms": { + "modified": "2020-07-16T22:20:55.179Z", + "contributors": [ + "Jeffrey_Yang" + ] + }, + "Learn/HTML/Forms/Επικύρωση_δεδομένων_φόρμας": { + "modified": "2020-07-16T22:21:48.424Z", + "contributors": [ + "stratis-vip" + ] + }, + "Learn/JavaScript": { + "modified": "2020-07-16T22:29:37.459Z", + "contributors": [ + "k33theod" + ] + }, + "Learn/JavaScript/Πρώτα_βήματα": { + "modified": "2020-07-16T22:29:49.269Z", + "contributors": [ + "kriminals" + ] + }, + "MDN": { + "modified": "2019-03-24T00:08:44.846Z", + "contributors": [ + "wbamberg", + "Jeremie", + "teoli", + "syssgx" + ] + }, + "MDN/About": { + "modified": "2019-09-10T08:52:06.488Z", + "contributors": [ + "SphinxKnight", + "wbamberg", + "dspentzos" + ] + }, + "MDN/Contribute": { + "modified": "2020-12-07T17:30:14.240Z", + "contributors": [ + "wbamberg", + "chrisdavidmills" + ] + }, + "MDN/Contribute/Getting_started": { + "modified": "2020-09-30T17:09:53.346Z", + "contributors": [ + "chrisdavidmills", + "kmavrikakis", + "wbamberg", + "dspentzos", + "ValentinHacker", + "Jeremie", + "jswisher", + "stayros" + ] + }, + "MDN/Contribute/Howto": { + "modified": "2020-12-07T19:29:58.398Z", + "contributors": [ + "wbamberg", + "Sheppy" + ] + }, + "MDN/Contribute/Howto/Dhmiourgia_logariasmou_MDN": { + "modified": "2019-01-17T03:15:07.858Z", + "contributors": [ + "wbamberg", + "dspentzos" + ] + }, + "MDN_at_ten": { + "modified": "2019-03-23T22:31:03.705Z", + "contributors": [ + "andreaschoukas" + ] + }, + "Mozilla": { + "modified": "2019-03-23T23:34:03.331Z", + "contributors": [ + "teoli", + "nikvourlos.gr", + "ethertank" + ] + }, + "Mozilla/Developer_guide": { + "modified": "2019-03-23T22:03:06.576Z", + "contributors": [ + "glasserc" + ] + }, + "Mozilla/Πρόσθετα": { + "modified": "2019-09-09T11:54:45.286Z", + "contributors": [ + "SphinxKnight", + "dspentzos" + ] + }, + "Web": { + "modified": "2019-03-23T23:26:04.468Z", + "contributors": [ + "ethertank" + ] + }, + "Web/API": { + "modified": "2019-03-23T23:19:20.206Z", + "contributors": [ + "teoli" + ] + }, + "Web/API/CanvasRenderingContext2D": { + "modified": "2019-03-23T22:18:55.663Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Web/API/CanvasRenderingContext2D/imageSmoothingEnabled": { + "modified": "2019-03-23T22:18:54.552Z", + "contributors": [ + "theodoros_1234" + ] + }, + "Web/API/Geolocation": { + "modified": "2019-03-23T22:59:10.619Z", + "contributors": [ + "fscholz" + ] + }, + "Web/API/Geolocation/getCurrentPosition": { + "modified": "2019-03-23T22:44:30.774Z", + "contributors": [ + "giatzo1702" + ] + }, + "Web/CSS": { + "modified": "2019-09-11T03:35:20.869Z", + "contributors": [ + "SphinxKnight", + "MariosPitsali", + "AlexKapellas" + ] + }, + "Web/HTML": { + "modified": "2020-12-07T19:30:03.073Z", + "contributors": [ + "SphinxKnight" + ] + }, + "Web/HTML/Element": { + "modified": "2020-12-06T23:30:01.351Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Web/HTML/Element/embed": { + "modified": "2020-12-05T05:47:59.307Z", + "contributors": [ + "chefkafantaris.gr" + ] + }, + "Web/JavaScript": { + "modified": "2020-04-15T17:15:42.022Z", + "contributors": [ + "tassosvallas", + "SphinxKnight", + "webfornet", + "masmanidis" + ] + }, + "Web/JavaScript/Reference": { + "modified": "2020-03-12T19:46:27.026Z", + "contributors": [ + "sideshowbarker" + ] + }, + "Web/JavaScript/Reference/Functions": { + "modified": "2020-10-15T22:02:48.163Z", + "contributors": [ + "utkarshbhatt12" + ] + }, + "Web/JavaScript/Reference/Functions/Προεπιλεγμένες_παράμετροι": { + "modified": "2020-10-15T22:02:41.992Z", + "contributors": [ + "mankal111" + ] + }, + "Web/JavaScript/Reference/Global_Objects": { + "modified": "2020-03-12T19:46:50.495Z", + "contributors": [ + "fscholz" + ] + }, + "Web/JavaScript/Reference/Operators": { + "modified": "2020-03-12T19:46:26.398Z", + "contributors": [ + "mathiou" + ] + }, + "Web/JavaScript/Reference/Operators/Comma_Operator": { + "modified": "2020-03-12T19:46:47.274Z", + "contributors": [ + "wheniturnintoamartian" + ] + }, + "Web/Tutorials": { + "modified": "2019-03-18T21:31:21.372Z", + "contributors": [ + "dspentzos" + ] + }, + "Εργαλεία": { + "modified": "2020-07-16T22:44:14.171Z", + "contributors": [ + "SphinxKnight", + "sotos", + "gremlin", + "sro", + "Simaioforos", + "dspentzos" + ] + }, + "Εργαλεία/about:debugging": { + "modified": "2020-07-16T22:36:32.137Z", + "contributors": [ + "minasloykas65" + ] + } +}
\ No newline at end of file diff --git a/files/el/archive/b2g_os/api/domapplication/index.html b/files/el/archive/b2g_os/api/domapplication/index.html new file mode 100644 index 0000000000..e85a3f80ae --- /dev/null +++ b/files/el/archive/b2g_os/api/domapplication/index.html @@ -0,0 +1,94 @@ +--- +title: Εφαρμογή +slug: Archive/B2G_OS/API/DOMApplication +translation_of: Archive/B2G_OS/API/DOMApplication +--- +<div> + {{non-standard_header()}}</div> +<p>Στο JavaScript API των Ανοιχτών εφαρμογών Ιστού, ένα αντικείμενο <code>App</code> είναι ένα αντικείμενο JavaScript που αντιπροσωπεύει μια εφαρμογή που έχει ή θα μπορούσε να έχει εγκατασταθεί στην αποθήκη της εφαρμογής του χρήστη.</p> +<h2 id="Properties">Properties</h2> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Name</th> + <th scope="col">Description</th> + <th scope="col">Type</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>manifest</code></td> + <td>The currently stored instance of the <a href="/en-US/docs/Web/Apps/Manifest">manifest</a> of the app.</td> + <td><code>object</code></td> + </tr> + <tr> + <td><code>manifestURL</code></td> + <td>Where the manifest was found.</td> + <td><code>string</code></td> + </tr> + <tr> + <td><code>origin</code></td> + <td>The origin of the app (protocol, host, and optional port number). For example: http://example.com</td> + <td><code>string</code></td> + </tr> + <tr> + <td><code>installOrigin</code></td> + <td>The origin of the site that triggered the installation of the app.</td> + <td><code>string</code></td> + </tr> + <tr> + <td><code>installTime</code></td> + <td>The time that the app was installed. This is generated using <code>Date().getTime()</code>, represented as the number of milliseconds since midnight of January 1st, 1970.</td> + <td><code>integer</code></td> + </tr> + <tr> + <td><code>receipts</code></td> + <td>An object containing an array of one or more receipts. Each receipt is a string. If there are no receipts, this is <code>null</code>.</td> + <td><code>object</code> or <code>null</code></td> + </tr> + </tbody> +</table> +<h2 id="Μέθοδοι">Μέθοδοι</h2> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Μέθοδος</th> + <th scope="col">Περιγραφή</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>launch()</code></td> + <td>Εκκινεί την εφαρμογή. Δεν επιστρέφει καμία τιμή.</td> + </tr> + <tr> + <td><code>checkForUpdate()</code></td> + <td style="vertical-align: top;"> + <p>Check to see if the app has been updated. Returns a <a href="/en-US/docs/Web/API/DOMRequest"><code>DOMRequest</code></a> object.</p> + <p>Για <a href="/en-US/docs/Web/Apps/Packaged_apps">συσκευασμένες εφαρμογές</a>: ελέγξτε για ενημερώσεις και επισημάνετέ το ως <em>downloadavailable</em> εάν χρειαστεί.</p> + <p>For hosted apps: check for updates on app manifest and application cache and update it if needed.</p> + </td> + </tr> + </tbody> +</table> +<h2 id="Παράδειγμα_αντικειμένου_Εφαρμογής">Παράδειγμα αντικειμένου Εφαρμογής</h2> +<pre class="brush: js">{ + manifest: { + name: "Add-on Builder", + default_locale: "en", + installs_allowed_from: [ + "https://apps-preview-dev.example.com/", + "https://apps-preview.example.com/" + ], + description: "Add-on Builder makes it easy to write, build and test Firefox extensions using common web technologies.", + version: "0.9.16.1", + developer: { + url: "https://builder.addons.mozilla.org/", + name: "Mozilla Flightdeck Team" + } + }, + origin: "https://builder-addons-dev.example.com", + installTime: 1321986882773, + installOrigin: "https://apps-preview-dev.example.com", + receipts: ["h0dHBzOi8v <em>(most of receipt removed here)</em> Tg2ODtkUp"] +}</pre> diff --git a/files/el/archive/b2g_os/api/index.html b/files/el/archive/b2g_os/api/index.html new file mode 100644 index 0000000000..4fcbdac757 --- /dev/null +++ b/files/el/archive/b2g_os/api/index.html @@ -0,0 +1,10 @@ +--- +title: B2G OS APIs +slug: Archive/B2G_OS/API +translation_of: Archive/B2G_OS/API +--- +<p>(el translation)</p> + +<p id="B2G_OS_uses_standard_Web_API's">List of B2G OS APIs</p> + +<p>{{APIListAlpha('/en-US/docs/Archive/B2G_OS/API')}}</p> diff --git a/files/el/archive/b2g_os/automated_testing/index.html b/files/el/archive/b2g_os/automated_testing/index.html new file mode 100644 index 0000000000..8f23d88dd5 --- /dev/null +++ b/files/el/archive/b2g_os/automated_testing/index.html @@ -0,0 +1,91 @@ +--- +title: Αυτοματοποιημένη Δοκιμή του Firefox OS +slug: Archive/B2G_OS/Automated_testing +translation_of: Archive/B2G_OS/Automated_testing +--- +<div class="summary"> +<p>Δεδομένου ότι το Firefox OS είναι ακόμη υπό ανάπτυξη και ότι η υποστήριξη για νέο hardware πρόκειται να είναι προσεχής για το κοντινό μέλλον, είναι σημαντικό να ξέρετε πως να το δοκιμάσετε. Αυτή η σελίδα προσφέρει άρθρα που παρέχουν πληροφορίες σχετικά με τις διάφορες πλευρές δοκιμής του Firefox OS, συμπεριλαμβανομένης της εκτέλεσης διαφορετικών test, της αυτοματοποίησης, ώστε να καταλήξετε στην αναφορά και την παρακολούθηση.</p> +</div> + +<h2 id="Ξεκινώντας">Ξεκινώντας</h2> + +<dl> + <dt><a href="/en-US/Firefox_OS/Running_Tests_on_Firefox_OS_for_Developers"> "Τρέξιμο" test στο Firefox OS: Ένας οδηγός για προγραμματιστές</a></dt> + <dd>A quick, developer-focused guide to getting started with running the tests. This is where you should start if you are not experienced in running Mozilla's tests and automation systems. If you are, then you will probably have an idea of what tests you want to run and how, and you can skip on to the more specific detailed guides below.</dd> +</dl> + +<h2 id="Test_για_το_Gaia">Test για το Gaia</h2> + +<p>These articles cover the primary test suites designed to put Gaia through its paces.</p> + +<dl> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Automated_testing/gaia-ui-tests" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/gaia-ui-tests">Gaia UI tests</a></dt> + <dd>Python tests for Gaia UI interactions and features.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Automated_testing/Gaia_integration_tests">Gaia integration tests</a></dt> + <dd>JavaScript integration tests for Gaia, based on Marionette.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Automated_testing/Gaia_unit_tests" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Gaia_unit_tests">Gaia unit tests</a></dt> + <dd>Gaia unit tests with no UI interaction; written in JavaScript, not Marionette-based.</dd> + <dt><a href="/en-US/Firefox_OS/Platform/Automated_testing/Gaia_performance_tests">Gaia performance tests</a></dt> + <dd>Measures Gaia app performance based on internal instrumentation. The testing harness is in-tree.</dd> +</dl> + +<h2 id="Test_για_το_B2G">Test για το B2G</h2> + +<p>The guides below cover a number of different test harnesses that test various aspects of B2G functionality.</p> + +<dl> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Automated_testing/Mochitests" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Mochitests">Mochitests</a></dt> + <dd>Gecko functional and API tests; HTML & JS based. No Gaia interaction.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Automated_testing/Reftests" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Reftests">Reftests</a></dt> + <dd>Gecko rendering correctness tests.</dd> + <dt><a href="/en-US/docs/Marionette/Marionette_JavaScript_Tests" title="/en-US/docs/Marionette/Marionette_JavaScript_Tests">WebAPI tests</a></dt> + <dd>Gecko JS-based WebAPI tests; most of these require an emulator.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Automated_testing/XPCShell" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/XPCShell">xpcshell tests</a></dt> + <dd>Headless tests of Gecko XPCOM APIs.</dd> + <dt><a href="https://github.com/mozilla/b2gperf" title="https://github.com/mozilla/b2gperf">B2GPerf</a></dt> + <dd>Measures Gaia app performance based on internal instrumentation.</dd> + <dt><a href="https://wiki.mozilla.org/Project_Eideticker" title="https://github.com/mozilla/eideticker">Eideticker</a></dt> + <dd>Provides performance measurements for Firefox OS based on video captures.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Automated_testing/endurance_tests" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Automated_testing/endurance_tests">Endurance tests</a></dt> + <dd>Long-running repetitive tests designed to find memory leaks and stability problems.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Automated_testing/MTBF_tests">MTBF test</a></dt> + <dd>This is a test framework based on non-restart gaia-ui-test. It tries to locate all kinds of issue prevents tests from running in a long time. (Currently, it is owned by Taiwan QA team and still a developing test framework)</dd> + <dt>Memory tests - coming soon</dt> + <dd>Repetitive tests run per-commit to mozilla-central, reporting to <a href="https://areweslimyet.com/" title="https://areweslimyet.com/">https://areweslimyet.com/</a>, designed to find problems with memory usage.</dd> +</dl> + +<h2 id="Supporting_documentation">Supporting documentation</h2> + +<p>This section provides links to some of the supporting technologies that underpin Mozilla's tests, which you may want to find more information about.</p> + +<dl> + <dt><a href="/en-US/docs/Marionette" title="/en-US/docs/Marionette">Marionette</a></dt> + <dd>A remote test driver based on Selenium WebDriver.</dd> + <dt><a href="/en-US/docs/Marionette/Marionette_JavaScript_Tools" title="/en-US/docs/Marionette/Marionette_JavaScript_Tools">Marionette JavaScript tests</a></dt> + <dd>A node.js-based runner for Marionette.</dd> + <dt><a href="/en-US/docs/Marionette/Python_Marionette" title="/en-US/docs/Marionette/Python_Marionette">Marionette Python tests</a></dt> + <dd>A Python runner for Marionette.</dd> +</dl> + +<h2 id="Continuous_integration_and_result_reporting">Continuous integration and result reporting</h2> + +<p>The following articles cover the continuous integration and result reporting mechanisms Mozilla uses to store and intepret test data.</p> + +<dl> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/TBPL">TBPL</a></dt> + <dd>Understand the tests and builds that run on TBPL.</dd> + <dt><a href="https://wiki.mozilla.org/QA/Execution/Web_Testing/Automation/Jenkins">Jenkins</a></dt> + <dd>Understand the tests that are run on real devices via Jenkins.</dd> + <dt><a href="https://wiki.mozilla.org/B2G/Datazilla" title="https://wiki.mozilla.org/B2G/Datazilla">Datazilla</a></dt> + <dd>Understand which performance tests are reporting to the <a href="https://datazilla.mozilla.org/b2g/" title="https://datazilla.mozilla.org/b2g/">Datazilla dashboard</a>, and what those tests measure.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Automated_testing/Test_Execution_Chart" title="/en-US/docs/Mozilla/Firefox_OS/Testing/Test_Execution_Chart">Test execution chart</a></dt> + <dd>A chart showing which tests are being run — on what devices and where — and which platforms are supported for each test.</dd> +</dl> + +<h2 class="Community" id="Community" name="Community">Unit testing framework video</h2> + +<div class="intrinsic-wrapper"><div class="intrinsic-container "><iframe src="https://www.youtube.com/embed/LxnRIm0wLLo?rel=0&html5=1"></iframe></div></div> + +<dl> + <dt> </dt> +</dl> diff --git a/files/el/archive/b2g_os/debugging/index.html b/files/el/archive/b2g_os/debugging/index.html new file mode 100644 index 0000000000..a83bb6ae67 --- /dev/null +++ b/files/el/archive/b2g_os/debugging/index.html @@ -0,0 +1,80 @@ +--- +title: Debugging on Firefox OS +slug: Archive/B2G_OS/Debugging +tags: + - B2G + - Debugging + - Firefox OS + - NeedsTranslation + - QA + - Testing + - TopicStub +translation_of: Archive/B2G_OS/Debugging +--- +<div class="summary"> + <p><span class="seoSummary">There are two main types of debugging you'll want to with Firefox OS: debugging apps, and debugging other aspects of the system.</span> This section of the site provides articles covering the different tools at your disposal to debug your Firefox OS code.</p> +</div> +<h2 id="Debugging_apps">Debugging apps</h2> +<p>When debugging your web apps, the best tool at your disposal is Mozilla's powerful <a href="/en-US/Firefox_OS/Using_the_App_Manager">App Manager</a>, which allows you to run your apps directly on a real device or simulator, update any changes instantly, and debug them directly on the device using Mozilla's excellent <a href="https://developer.mozilla.org/en-US/docs/Tools" title="en-US/docs/Tools">developer tools</a>. This should be your first choice, especially for app/Gaia debugging.</p> +<dl> + <dt> + <a href="/en-US/Firefox_OS/Using_the_App_Manager">Using the App Manager</a></dt> + <dd> + The App Manager is a new tool available in Firefox for Desktop, which provides a number of useful tools to help you test, deploy and debug HTML5 web apps on Firefox OS phones and the Firefox OS Simulator, directly from your browser.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Debugging_OOMs">Debugging out of memory errors on Firefox OS</a></dt> + <dd> + This article describes how B2G's multiprocess architecture affects what the phone does when we run out of memory, and how to understand and debug OOM crashes.</dd> +</dl> +<h2 id="Debugging_GaiaB2G">Debugging Gaia/B2G</h2> +<p>If you want to debug code from the Gaia apps suite or B2G itself, the following tools will be of use to you.</p> +<dl> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Debugging_using_the_desktop_B2G_client" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Debugging_using_the_desktop_B2G_client">Debugging using the desktop B2G client</a></dt> + <dd> + You can use the dedicated B2G desktop application (and associated tools) to debug multiple aspects of B2G and Gaia.</dd> + <dt> + <a href="/en-US/Firefox_OS/Hacking_Firefox_OS/Quickstart_guide_to_Gaia_development">Quickstart guide to Gaia development</a></dt> + <dd> + This guide provides a very quick easy guide to developing and debugging Gaia apps, including running Gaia inside desktop Firefox, and debugging Gaia with App Manager.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Debugging_B2G_using_gdb" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Debugging_B2G_using_gdb">Debugging B2G using gdb</a></dt> + <dd> + The popular gdb debugger can be used to debug Firefox OS and web apps running on a device, or on an emulator. This guide will show you how it's done.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Debugging_B2G_using_valgrind" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Debugging_B2G_using_gdb">Debugging B2G using Valgrind</a></dt> + <dd> + Valgrind gives developers access to information about memory allocations, threads, and other information important to performance. This guide shows how to run Valgrind either on desktop B2G or select phone hardware.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Debugging/HTTP_logging#Firefox_OS_phones" title="/en-US/docs/Mozilla/Debugging/HTTP_logging#Firefox_OS_phones">Getting NSPR logs in B2G</a></dt> + <dd> + You can use NSPR logs to record HTTP and other networking.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Debugging/Debugging_OpenGL" title="/en-US/docs/Mozilla/Debugging/Debugging_OpenGL">Debugging OpenGL</a></dt> + <dd> + How to debug OpenGL code on Firefox OS.</dd> +</dl> +<h2 id="General_setup_and_information"><strong>General setup and information</strong></h2> +<p>The following articles provide information on individual aspects of setup for Firefox OS development. The chances are that you won't need these, especially if you are just debugging apps using the App Manager. But we have made them available here in case you do.</p> +<dl> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Developer_settings" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Developer_settings">Developer settings for Firefox OS</a></dt> + <dd> + There are a number of settings options available for developers on Firefox OS. This guide explains what they do and how to take advantage of them.</dd> + <dt> + <a href="/en-US/Firefox_OS/Debugging/Installing_ADB">Installing and using ADB</a></dt> + <dd> + Many aspects of Firefox OS development require installation of <code>adb</code>, the Android Debug Bridge. This article explains how to do that, and shares some common useful ADB commands.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging">On-device console logging</a></dt> + <dd> + How to log to console on a Firefox OS device, and how to access the resulting logs for review on your computer.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Connecting_a_Firefox_OS_device_to_the_desktop" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Debugging_Firefox_OS_apps_in_desktop_Firefox">Connecting a Firefox OS device to the desktop</a></dt> + <dd> + This short guide explains how to set up your Firefox OS device and your desktop so that the desktop can communicate with the device over USB.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Setting_up" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Setting_up">Setting up to debug Firefox OS code</a></dt> + <dd> + Before you can begin using most of the tools integrated into Firefox for debugging code running under Firefox OS, you need to do a little configuration work. This article explains what you need to do.</dd> +</dl> diff --git a/files/el/archive/b2g_os/debugging/παίρνοντας_στιγμιότυπα_οθόνης/index.html b/files/el/archive/b2g_os/debugging/παίρνοντας_στιγμιότυπα_οθόνης/index.html new file mode 100644 index 0000000000..e65d6c163a --- /dev/null +++ b/files/el/archive/b2g_os/debugging/παίρνοντας_στιγμιότυπα_οθόνης/index.html @@ -0,0 +1,61 @@ +--- +title: '"Παίρνοντας" στιγμιότυπα οθόνης' +slug: Archive/B2G_OS/Debugging/παίρνοντας_στιγμιότυπα_οθόνης +translation_of: Archive/B2G_OS/Debugging/taking_screenshots +--- +<div class="summary"> + <p><span class="seoSummary">Η λήψη στιγμιότυπου οθόνης των εφαρμογών σας μπορεί να είναι χρήσιμη σε πολλές περιπτώσεις, για παράδειγμα όταν δείχνετε τη δουλειά σας σε έναν πελάτη, ή όταν δημσιεύετε την εφαρμογή σας στο Marketplace. Αυτό το άρθρο εξηγεί πως να "πάρετε" στιγμιότυπα οθόνης στο τηλέφωνό σας με Firefox OS.</span></p> +</div> +<div class="note"> + <p><strong>Σημείωση</strong>: Οι προγραμματιστές του Android θα το βρουν οικείο: Τα βήματα είναι πραγματικά παρόμοια.</p> +</div> +<h2 id="Προετοιμάζοντας_το_τηλέφωνό_σας">Προετοιμάζοντας το τηλέφωνό σας</h2> +<ol> + <li>Στο τηλέφωνό σας, πηγαίνετε στις <a href="/en-US/Firefox_OS/Debugging/Developer_settings">Ρυθμίσεις Προγραμματιστή</a> και επιλέξτε τον <em>Απομακρυσμένο</em><em> Εντοπισμό Σφαλμάτων</em> & το <em>Κονσόλα Ενεργοποιημένη</em>.</li> + <li>Βεβαιωθείτε ότι στο τηλέφωνό σας έχει εγκατασταθεί το <a href="/en-US/Firefox_OS/Debugging/Installing_ADB">ADB</a> και λειτουργεί.</li> + <li>Συνδέστε το τηλέφωνό σας στον υπολογιστή σας μέσω USB.</li> +</ol> +<h2 id="Παίρνοντας_ένα_στιγμιότυπο_οθόνης">"Παίρνοντας" ένα στιγμιότυπο οθόνης</h2> +<p>Τώρα έχετε τέσσερις επιλογές: χρησιμοποιώντας το Τερματικό, χρησιμοποιώντας το DDMS στο Eclipse, χρησιμοποιώντας τον αφιερωμένο συνδυασμό κουμπιών στο τηλέφωνο, ή χρησιμοποιώντας τον Διαχειριστή Εφαρμογών.</p> +<h3 id="Τερματικό">Τερματικό</h3> +<p>Ανοίξτε ένα παράθυρο τερματιοκού, έπειτα εισάγετε τις τρεις ακόλουθες εντολές:</p> +<ol> + <li>"Πάρτε" ένα στιγμιότυπο οθόνης χρησιμοποιώντας την ακόλουθη εντολή (μπορείτε να αλλάξετε το <code>screenshot.png</code> αν θέλετε να το ονομάσετε κάπως αλλιώς):<br> + <code>adb shell screencap -p /sdcard/screenshot.png</code></li> + <li>"Τραβήξτε" την εικόνα στον υπολογιστή σας:<br> + <code>adb pull /sdcard/screenshot.png</code></li> + <li>Διαγράψτε το στιγμιότυπο οθόνης από τη συσκευή σας:<br> + <code>adb shell rm /sdcard/screenshot.png</code></li> +</ol> +<p>Εναλλακτικά, μπορείτε να χρησιμοποιήσετε το ffmpeg:</p> +<ol> + <li>Βεβαιωθείτε ότι έχετε εγκαταστήσει το ffmpeg: + <ol> + <li>Σε Mac, αν χρησιμοποιείτε το MacPorts, μπορείτε να το κάνετε με το <code>sudo port install ffmpeg</code>. Για το homebrew, κάντε <code>brew install ffmpeg</code>.</li> + <li>Σε Linux (Ubuntu/Debian), χρησιμοποιήστε το <code>sudo apt-get install ffmpeg</code>.</li> + </ol> + </li> + <li><code>cd</code> στην διαδρομή <code>B2G/gaia</code>.</li> + <li>Χρησιμοποιήστε την εντολή <code>make screenshot</code> για να "πάρετε" στιγμιότυπο οθόνης.</li> + <li>Τώρα έχετε ονομάσει το στιγμιότυπο οθόνης <code>screenshot.png</code>.</li> +</ol> +<h3 id="DDMS">DDMS</h3> +<p>Ανοίξτε το Eclipse.</p> +<ol> + <li>Ανοίξτε το DDMS: Παράθυρο<em> > Άνοιγμα Προοπτικής > Άλλα > DDMS</em>.</li> + <li>Στον πίνακα της αριστερής πλευράς, στην καρτέλα <em>Συσκευές</em>, κάντε κλικ στο κουμπί <em>Στιγμιότυπο οθόνης</em>.</li> + <li>Ένα νέο παράθυρο εμφανίζεται με πολλές επιλογές: κάντε κλικ στο κουμπί <em>Αποθήκευση</em> για να αποθηκεύσετε το στιγμιότυπο οθόνης.</li> +</ol> +<div class="note"> + <p><strong>Σημείωση</strong>: Για να μάθετε περισσότερα σχετικά με το DDMS, ρίξτε μια ματιά στα <a href="http://developer.android.com/tools/debugging/ddms.html" title="DDMS documentation">Έγγραφα DDMS</a>.</p> +</div> +<h3 id="Συνδυασμός_πλήκτρων_τηλεφώνου">Συνδυασμός πλήκτρων τηλεφώνου</h3> +<ol> + <li>Πατήστε ταυτόχρονα τα κουμπιά <em>Home</em> και <em>Power</em> για μερικά δευτερόλεπτα. Αυτό παίρνει ένα στιγμιότυπο οθόνης, το οποίο αποθηκεύεται στη Γκαλερί σας.</li> + <li>Αντιγράψτε την εικόνα από την κάρτα SD στον υπολογιστή σας χρησιμοποιώντας οποιαδήποτε μέθοδο σας ταιριάζει καλύτερα.</li> +</ol> +<h3 id="Διαχειριστής_ΕφαρμογώνΠροσομοιωτής">Διαχειριστής Εφαρμογών/Προσομοιωτής</h3> +<ol> + <li>Πηγαίνετε στον <a href="https://developer.mozilla.org/en-US/Firefox_OS/Using_the_App_Manager">Διαχειριστή Εφαρμογών</a>, συνδεθείτε στο τηλέφωνό σας και πλοηγηθείτε στην καρτέλα Συσκευή στα αριστερά.</li> + <li>Πατήστε το κουμπί <strong>Στιγμιότυπο οθόνης</strong> πάνω από τις <em>Εγκατεστημένες Εφαρμογές</em>.</li> +</ol> diff --git a/files/el/archive/b2g_os/developing_firefox_os/index.html b/files/el/archive/b2g_os/developing_firefox_os/index.html new file mode 100644 index 0000000000..7aceb1f5a9 --- /dev/null +++ b/files/el/archive/b2g_os/developing_firefox_os/index.html @@ -0,0 +1,45 @@ +--- +title: Developing Firefox OS +slug: Archive/B2G_OS/Developing_Firefox_OS +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/B2G_OS/Developing_Firefox_OS +--- +<div class="summary"> + <p>This section provides useful documentation covering different ways in which the Firefox OS experience can be modified/customized during the build or app writing process, and how you can help to develop the platform.</p> +</div> +<dl> + <dt> + <a href="/en-US/Firefox_OS/Hacking_Firefox_OS/Quickstart_guide_to_Gaia_development">Quickstart guide to Gaia development</a></dt> + <dd> + Gaia is the collection of <a href="https://developer.mozilla.org/apps" rel="nofollow">web apps</a> which make up the front end of <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a>. Everything you see on the screen in Firefox OS is built using open Web technologies. This includes the home screen and all the default apps. This guide provides a quick and simple guide to getting started with modifying Gaia.</dd> + <dt> + <a href="/en-US/Firefox_OS/Platform/Gaia/Build_System_Primer">Build system primer</a></dt> + <dd> + This article explains how Gaia's build system works, including the makefile, the build process, environment variables, and potential customizations.</dd> + <dt> + <a href="/en-US/Firefox_OS/Platform/Gaia/Hacking">Hacking Gaia</a></dt> + <dd> + This article provides a detailed guide to modifying Gaia.</dd> + <dt> + <a href="/en-US/Firefox_OS/Hacking_Firefox_OS/Market_customizations_guide">Market customizations guide</a></dt> + <dd> + Market customizations allow you to specify build-time customization instructions (for example, which apps should be included in your build) in separate directories, without modifying the core Gaia repo. You can include your own customizations in distinct directories, or use the preexisting directories that come with the source. These customizations are specified with build options. In this article we look in detail at how to create and use these customizations.</dd> + <dt> + <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Tips_and_tricks/modifying_hosts_file" title="/en-US/docs/Mozilla/Firefox_OS/Tips_and_tricks/modifying_hosts_file">Modifying the hosts file</a></dt> + <dd> + A guide to what can be achieved by modifying the Firefox OS hosts file.</dd> + <dt> + <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Customization_with_the_.userconfig_file" title="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Customization_with_the_.userconfig_file">Customization with the .userconfig file</a></dt> + <dd> + How to customize the build and execution of Firefox OS by changing the <code>.userconfig</code> file.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Hacking_Firefox_OS/Customizing_the_keyboard">Customizing the keyboard in Firefox OS apps</a></dt> + <dd> + This guide shows how to customize the keyboard in your Firefox OS apps.</dd> + <dt> + <a href="/en-US/docs/Firefox_OS/Hacking_Firefox_OS/Localizing_Firefox_OS" title="/en-US/docs/Firefox_OS/Hacking_Firefox_OS/Localizing_Firefox_OS">Localizing Firefox OS</a></dt> + <dd> + A guide to localising the Firefox OS platform, making it available in your preferred languages.</dd> +</dl> diff --git a/files/el/archive/b2g_os/developing_firefox_os/mεταφράζοντας_το_firefox_os/index.html b/files/el/archive/b2g_os/developing_firefox_os/mεταφράζοντας_το_firefox_os/index.html new file mode 100644 index 0000000000..3af02725fd --- /dev/null +++ b/files/el/archive/b2g_os/developing_firefox_os/mεταφράζοντας_το_firefox_os/index.html @@ -0,0 +1,96 @@ +--- +title: Μεταφράζοντας το Firefox OS +slug: Archive/B2G_OS/Developing_Firefox_OS/Mεταφράζοντας_το_Firefox_OS +translation_of: Archive/B2G_OS/Developing_Gaia/Localizing_B2G_OS +--- +<div class="summary"> + <p><span class="seoSummary">Σε αυτό τον οδηγό, θα σας δείξουμε πόσο εύκολη μπορεί να είναι η μετάφραση του Firefox OS, συγκεκριμένα αυτή της επιφάνειας Gaia και των εφαρμογών. Θα αρχίσουμε βοηθώντας σας να "στήσετε" τον υπολογιστή σας, να μεταφράσετε strings του Gaia και τελικά να κάνετε δοκιμή l10n στη δουλειά σας.</span></p> +</div> +<h2 id="Συγκεντρώνοντας_τα_εργαλεία_σας">Συγκεντρώνοντας τα εργαλεία σας</h2> +<p>Για να μπορέσετε να πάρετε τα πηγαία αρχεία του Gaia και να δοκιμάσετε την μετάφρασή σας στην επιφάνεια εργασίας σας, θα πρέπει να βεβαιωθείτε ότι τα ακόλουθα εργαλεία και γλώσσες είναι εγκατεστημένα στον υπολογιστή σας:</p> +<dl> + <dt> + GNU make</dt> + <dd> + Το make είναι ένα χρήσιμο και μικρό εργαλείο για τη δημιουργία builds από τον πηγαίο κώδικα. Θα φανεί πολύ βολικό όταν θα είστε έτοιμος να δοκιμάσετε την δουλειά l10n σας στον υπολογιστή σας. Η λήψη και η εγκατάσταση του make είναι εύκολη και μπορεί να γίνει <a href="http://www.gnu.org/software/make/">κατ' ευθείαν από την ιστοσελίδα του GNU</a>. Εάν χρησιμοποιείτε Mac OSX, θα χρειαστεί να εγκαταστήσετε τα εργαλεία XCode και Γραμμή εντολών του XCode από το <a href="https://itunes.apple.com/us/app/xcode/id497799835?mt=12" title="https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=7&cad=rja&ved=0CFQQFjAG&url=https%3A%2F%2Fitunes.apple.com%2Fus%2Fapp%2Fxcode%2Fid497799835%3Fmt%3D12&ei=6ZItUeDqDeejiAK90IDYCA&usg=AFQjCNGrxKmVtXUdvUU3MhqZhP4MHT6Gtg&bvm=bv.42965579,d.cGE">App Store</a>.</dd> + <dt> + git</dt> + <dd> + Το git είναι το σύστημα ελέγχου έκδοσης που χρησιμοποιείται για την αποθήκευση του ενεργά αναπτυσσόμενου πηγαίου κώδικα του Gaia. Η λήψη και η εγκατάσταση του git είναι εύκολη και μπορεί να γίνει <a href="http://git-scm.com/">κατ' ευθείαν από την ιστοσελίδα τους</a>.</dd> + <dt> + Python</dt> + <dd> + Το Python είναι μια γλώσσα προγραμματισμού που επίσης θα σας βοηθήσει με τη δημιουργία των builds του Firefox OS για δοκιμή l10n. Η λήψη και η εγκατάσταση του Python είναι εύκολη και μπορεί να γίνει <a href="https://www.python.org/downloads/">κατ' ευθείαν από την ιστοσελίδα τους</a>.</dd> + <dt> + Mercurial (hg)</dt> + <dd> + Το Mercurial (hg) είναι άλλο ένα σύστημα ελέγχου έκδοσης που φιλοξενεί σταθερές εκδόσεις του Gaia που χρησιμοποιούνται για l10n, καθώς και αποθετήρια μετάφρασης. Η λήψη και η εγκατάσταση του Mercurial είναι εύκολη και μπορεί να γίνει <a href="http://mercurial.selenic.com/downloads">κατ' ευθείαν</a><a href="http://mercurial.selenic.com/downloads"> από την ιστοσελίδα τους</a>.</dd> + <dt> + compare-locales</dt> + <dd> + Το compare-locales είναι ένα script του Python που βοηθά τους μεταφραστές να αξιολογήσουν τη δουλειά τους και να ξεχωρίσουν το νέο περιεχόμενο για μετάφραση από το ήδη μεταφρασμένο υλικό (που ονομάζεται diff). Η λήψη και εγκατάσταση του compare-locales είναι εύκολη και μπορεί να γίνει <a href="https://developer.mozilla.org/en-US/docs/Compare-locales">κατ' ευθείαν από τη σελίδα wiki του compare-locales</a>. Παρακαλώ σημειώστε ότι αυτό είναι απαραίτητο μόνο εάν μεταφράζετε το Gaia χρησιμοποιώντας μόνο τη γραμμή εντολών ή έναν επεξεργαστή κειμένου. Αν χρησιμοποιείτε ένα εργαλείο όπως τα Pootle, Transifex, ή Pontoon, δε το χρειάζεστε αυτό.</dd> +</dl> +<h2 id="Στήνοντας_ένα_τοπικό_repo">"Στήνοντας" ένα τοπικό repo</h2> +<p>Μόλις βεβαιωθείτε ότι έχετε κατεβάσει και εγκαταστήσει το λογισμικό από τη λίστα παραπάνω, είναι ώρα να πάρετε τα πηγαία και μεταφρασμένα strings στον υπολογιστή σας.</p> +<ol> + <li>Στην γραμμή εντολών σας, πλοηγηθείτε στην τοποθεσία όπου θα αποθηκεύσετε την πηγή του Gaia και τα αποθηκευμένα strings.</li> + <li>Χρησιμοποιώντας το hg, κλωνοποιήστε το repo en-US εισάγοντας αυτή την εντολή: + <pre>hg clone https://hg.mozilla.org/gaia-l10n/en-US</pre> + </li> + <li>Τώρα κλωνοποιήστε το repo της μετάφρασής σας χρησιμοποιώντας αυτή την εντολή: + <pre>hg clone https://hg.mozilla.org/gaia-l10n/your-locale-code</pre> + </li> + <li>Τέλος, εισάγετε αυτή την εντολή για να δημιουργήσετε ένα diff της μετάφρασης του repo ενάντια σ' αυτό του en-US: + <pre>compare-dirs en-US your-locale-code</pre> + </li> +</ol> +<p>Τώρα θα πρέπει να έχετε ένα diff μη μεταφρασμένων strings έτοιμα για μετάφραση! Παρακαλώ σημειώστε ότι αν ξεκινάτε μια νέα μετάφραση του Firefox OS, δε χρειάζεται να δημιουργήσετε ένα diff καθώς όλα τα strings είναι νέα strings για να μεταφραστούν.</p> +<h2 id="Μεταφράζοντας_strings_του_Gaia">Μεταφράζοντας strings του Gaia</h2> +<p>Η πρόοδος εργασίας της μετάφρασης των strings του Gaia εξαρτάται σε μεγάλο βαθμό από το τα εργαλεία που χρησιμοποιείτε για τη μετάφραση. Αυτό το μέρος της προόδου είναι παρόμοιο με τη φάση τακτικής μετάφρασης για άλλα προϊόντα της Mozilla. Η <a href="https://developer.mozilla.org/en-US/docs/Localization_Quick_Start_Guide/Translation_phase" title="https://developer.mozilla.org/en-US/docs/Localization_Quick_Start_Guide/Translation_phase">Σελίδα Φάσης Μετάφρασης του Οδηγού Γρήγορης Εκκίνησης Μεταφράσεων</a> περιέχει μια λίστα όλων των εργαλείων που χρησιμοποιούνται για τη μετάφραση των strings μέσω των προϊόντων της Mozilla μαζί με tutorials σχετικά με το πως να μεταφράσετε με αυτά τα εργαλεία. Αυτή η σελίδα θα σας φανεί χρήσιμη αν είστε μέλος μιας ομάδας l10n που προσπαθεί να αποφασίσει ποιο εργαλείο να χρησιμοποιήσει για τη μετάφραση των strings του Gaia ή αν ψάχνετε το σωστό tutorial για το εργαλείο που χρησιμοποιεί αυτό τον καιρό η ομάδα σας. </p> +<h2 id="Δοκιμή_l10n_για_το_Firefox_OS">Δοκιμή l10n για το Firefox OS</h2> +<p>Υπάρχουν δύο κύριες μέθοδοι για να κάνετε δοκιμή l10n στο Firefox OS: τα builds στον υπολογιστή και τα builds στο κινητό. Αυτή τη στιγμή, η μέθοδος του υπολογιστή είναι η πιο ευρέως χρησιμοποιούμενη μέθοδος για δοκιμή l10n.</p> +<h4 id="Δοκιμή_l10n_στον_υπολογιστή">Δοκιμή l10n στον υπολογιστή</h4> +<ol> + <li>Κατεβάστε και εκαταστήστε το πιο πρόσφατο nightly build για υπολογιστές του boot2gecko αφού επισκεφθείτε το <a href="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-b2g18/" title="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-b2g18/"><code>http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-b2g18/</code></a> και κατεβάσετε το πακέτο που αντιστοιχεί στο λειτουργικό σας σύστημα. Ψάξτε για τα πακέτα που περιέχουν τη λέξη <em>localizer</em>. Αυτό δείχνει πως το build έχει όλες τις μεταφράσεις που είναι καταγεγραμμένες στο <a href="https://github.com/mozilla-b2g/gaia/blob/master/locales/languages_all.json" title="https://github.com/mozilla-b2g/gaia/blob/master/locales/languages_all.json"><code>languages-all.json</code></a> ενεργοποιημένες.</li> + <li>Κλωνοποιήστε την πιο πρόσφατη έκδοση του Gaia αφού πλοηγηθείτε στη διαδρομή στον υπολογιστή σας όπου θα θέλατε να την κατεβάσετε και εισάγετε αυτή την εντολή στη γραμμή εντολών: <code>git clone git://github.com/mozilla-b2g/gaia.git</code></li> + <li>Αν η ομάδα σας μεταφράζει το Firefox OS για πρώτη φορά, θα χρειαστεί να ενεργοποιήσετε την μετάφρασή σας. Αν όχι, πάρτε στον εαυτό σας ένα αναψυκτικό ενώ όλοι οι άλλοι ενεργοποιούν την μετάφρασή τους. + <ol> + <li>Ενώ είστε στην γραμμή εντολών, πλοηγηθείτε μέσα στον κλώνο gaia σας εκτελέστε αυτή την εντολή για να κλωνοποιήστε το repo της μετάφρασής σας: <code>hg clone ssh://hg.mozilla.org/gaia-l10n/your-locale-code</code></li> + <li>Ανοίξτε το αρχείο <code>languages.json</code> που βρίσκεται στη διαδρομή <code>shared/resources</code> στην αποθήκη gaia που μόλις κλωνοποιήσατε.</li> + <li>Προσθέστε τις πληροφορίες μετάφρασής σας σύμφωνα με αυτή τη μορφή: "en-US" : "English (US)", και αποθηκεύστε το αρχείο.</li> + <li>Τέλος, εκτελέστε την εντολή: <code>make multilocale</code> Αυτό σας επιτρέπει τη μετάφρασή σας στο build για υπολογιστές.</li> + </ol> + </li> + <li>Δημιουργήστε το προφίλ Gaia σας εκτελώντας αυτή την εντολή: <code>DEBUG=1 make -C gaia profile</code></li> + <li>Τέλος, μπορείτε να εκτελέσετε το Firefox OS με το προφίλ μετάφρασής σας και να ξεκινήσετε τη δοκιμή. Κάντε το εισάγοντας αυτή την εντολή: <code>b2g/b2g -profile gaia/profile</code>. Αν χρησιμοποιείτε Mac OS X, εκτελέστε αυτή την εντολή: <code>/Applications/B2G.app/Contents/MacOS/b2g -profile gaia/profile</code></li> + <li>Για να ενημερώσετε τα builds σας για υπολογιστή, απλά πλοηγηθείτε στον κλώνο repo σας του Gaia και εισάγετε αυτή την εντολή: <code>git pull</code></li> +</ol> +<h4 id="Δοκιμή_l10n_στο_κινητό">Δοκιμή l10n στο κινητό</h4> +<p> + <i> + Αυτή η ενότητα θα μεγαλώσει όταν περισσότερες συσκευές που υποστηρίζουν το Firefox OS γίνουν διαθέσιμες στους μεταφραστές.</i> +</p> +<h4 id="Τι_να_προσέξω_όταν_κάνω_δοκιμές_l10n">Τι να προσέξω όταν κάνω δοκιμές l10n</h4> +<p>Η δοκιμή μετάφρασης για ένα λειτουργικό σύστημα για κινητά έχει κάποιες ομοιότητες με τη δοκιμή μετάφρασης για εφαρμογές υπολογιστή. Ορίστε μερικές οδηγίες σχετικά με το τι προσέξετε όταν κάνετε δοκιμές μετάφρασης στη δουλειά σας:</p> +<ol> + <li>Δείτε αν οι μεταφράσεις σας ταιριάζουν μέσα στα στοιχεία κειμένου του UI.</li> + <li>Βεβαιωθείτε ότι ο τόνος, το στυλ, και η ορολογία είναι ίδια σε ολόκληρο το προϊόν.</li> + <li>Ψάξτε μη μεταφρασμένα Αγγλικά strings στο UI. Αυτά ίσως να είναι δύσκολα κωδικοποιημένα μέσα στο Gaia ή έχουν προκληθεί από σφαλματα στοιχείων ID.</li> + <li>Βεβαιωθείτε ότι η ώρα και οι ημερομηνίες εμφανίζονται σύμφωνα με τα πρότυπα της περιοχής σας.</li> +</ol> +<h2 id="Βρίσκοντας_συγκεκριμένα_bugs_μετάφρασης">Βρίσκοντας συγκεκριμένα bugs μετάφρασης</h2> +<p>Ορίστε μερικοί σύνδεσμοι για το bugzilla για να σας δωθούν παραδείγματα μερικών bugs που έχουν αντιμετωπιστεί κατά τη χρήση των τηλεφώνων. Αυτό θα σας δώσει μια ιδέα για το που να κοιτάξετε για bugs καθώς και ένα παράδειγμα για το πως να υποβάλετε τέτοιου είδους bugs.</p> +<ul> + <li><a class="moz-txt-link-freetext" href="http://bit.ly/100bcsC">http://bit.ly/100bcsC</a> - αυτή είναι μια γενική λίστα των l10n B2G bugs</li> + <li><a class="moz-txt-link-freetext" href="https://bugzilla.mozilla.org/show_bug.cgi?id=846060">https://bugzilla.mozilla.org/show_bug.cgi?id=846060</a></li> + <li><a class="moz-txt-link-freetext" href="https://bugzilla.mozilla.org/show_bug.cgi?id=852739">https://bugzilla.mozilla.org/show_bug.cgi?id=852739</a></li> +</ul> +<p>Γενικοί κανόνες όταν υποβάλετε ένα bug Μετάφρασης:</p> +<ul> + <li>εάν το bug υπάρχει μόνο στη συγκεκριμένη γλώσσα, τότε υποβάλτε το στην Μετάφραση Mozilla (στα Άλλα Προϊόντα) και κάντε cc τον μεταφραστή. Μην ξεχάσετε να επισημάνετε το bug σας με την κατάλληλη σημαία παρακολούθησης</li> + <li>εάν δεν υπάρχει μόνο στην συγκεκριμένη γλώσσα, υποβάλτε το στο Προϊόν FirefoxOS, και κάντε cc τον μεταφραστή. Μην ξεχάσετε να επισημάνετε το bug σας με την κατάλληλη σημαία παρακολούθησης</li> + <li>εάν αμφιβάλετε, υποβάλτε το στο Προϊόν FirefoxOS, και κάντε cc τον μεταφραστή. Μην ξεχάσετε να επισημάνετε το bug σας με την κατάλληλη σημαία παρακολούθησης</li> +</ul> +<p>Για εσάς που χρησιμοποιείτε το <a href="http://moztrap.mozilla.org/" title="http://moztrap.mozilla.org/">Moztrap</a>, ένας ακόμη καλός τρόπος να δοκιμάσετε την μετάφρασή σας για το FirefoxOS είναι να κοιτάξτε τις υπάρχουσες υποθέσεις δοκιμών στις ετικέτες "μετάφραση" του FirefoxOS και να δείτε αν μπορείτε να περάσετε τα τεστ στη συσκευή σας.</p> +<h2 id="Στη_συνέχεια">Στη συνέχεια;</h2> +<p>Τώρα είστε έτοιμος να ξεκινήσετε να μεταφράζετε! Οπότε ανοίξτε το αγαπημένο εργαλείο l10n σας και ξεκινήστε! Όπως πάντα, αν έχετε ερωτήσεις που δεν έχουν καλυφθεί σε αυτό έγγραφο, παρακαλούμε στείλτε τες στο <a href="http://www.mozilla.org/about/forums/#dev-l10n" title="http://mailto:_dev-l10n@lists.mozilla.org">mozilla.dev.l10n newsgroup</a>.</p> diff --git a/files/el/archive/b2g_os/developing_firefox_os/διαμορφώνοντας_το_script_b2g.sh/index.html b/files/el/archive/b2g_os/developing_firefox_os/διαμορφώνοντας_το_script_b2g.sh/index.html new file mode 100644 index 0000000000..1e8203328b --- /dev/null +++ b/files/el/archive/b2g_os/developing_firefox_os/διαμορφώνοντας_το_script_b2g.sh/index.html @@ -0,0 +1,44 @@ +--- +title: Διαμορφώνοντας το script b2g.sh +slug: Archive/B2G_OS/Developing_Firefox_OS/Διαμορφώνοντας_το_script_b2g.sh +translation_of: Archive/B2G_OS/Developing_Firefox_OS/Customizing_the_b2g.sh_script +--- +<div class="summary"> + <p>Στο τηλέφψνο, η εφαρμογή <code><a href="/en-US/docs/Mozilla/Firefox_OS/Architecture#The_userspace_process_architecture" title="/en-US/docs/Mozilla/Firefox_OS/Architecture#The_userspace_process_architecture">b2g</a></code> (που παρέχει τα API του Firefox OS ανάμεσα σε άλλα πράγματα) εκκινείται μέσω του <span style="line-height: 1.5;">script </span><code style="font-weight: bold; font-size: 14px;">/system/bin/b2g.sh</code><span style="line-height: 1.5;"> . Μπορείτε να διαμορφώσετε αυτό το script για να αλλάξετε τη συμπεριφορά του Firefox OS και αυτό το άρθρο εξηγεί το πως.</span></p> +</div> +<h2 id="Set_environment_variables">Set environment variables</h2> +<p>If you just want to set an environment variable for a single run of B2G, then you can do the following:</p> +<pre class="brush: bash">adb shell stop b2g +adb shell "export ENV_VAR=value && /system/bin/b2g.sh" +</pre> +<p>If you want to use the same environment variables all of the time, then you can edit <code>b2g.sh</code>, as described in the next section.</p> +<h2 id="Επεξεργάζοντας_το_b2g.sh">Επεξεργάζοντας το b2g.sh</h2> +<p>For debugging, you may want to set environment variables to get logging information or to otherwise affect how the <code>b2g</code> program runs. You can do this by editing the <code>b2g.sh</code> script. There aren't any tools included on the phone to edit the file in place, so you'll need to copy it to your computer first.</p> +<ol> + <li>Connect the phone to your computer, open a terminal window, and execute the following command to edit the script: + <pre>adb pull /system/bin/b2g.sh</pre> + </li> + <li>Edit the script to make the changes you want. For example, suppose you'd like to see some logging output (which requires a debug build), then you might add something like: + <pre>export NSPR_LOG_FILE=/data/local/tmp/mylog.txt +export NSPR_LOG_MODULES=Layers:5 +</pre> + </li> + <li>Εκτελέστε τις ακόλουθες εντολές για να αποθηκεύσετε το ενημερωμένο script <code>b2g.sh</code> σας στο τηλέφωνο και να επανεκκινήστε το <code>b2g</code>: + <pre>adb shell stop b2g +adb remount +adb push b2g.sh /system/bin +adb shell chmod 0755 /system/bin/b2g.sh +adb shell start b2g +</pre> + </li> +</ol> +<div class="note"> + <p><strong>Σημείωση: </strong>Το <code>/data/local/tmp</code> είναι το μόνο μέρος στο filesystem που είναι εγγράψιμο από τις περιεχόμενες διεργασίες.</p> +</div> +<h2 id="Δείτε_επίσης">Δείτε επίσης</h2> +<ul> + <li><a href="/en-US/docs/Mozilla/Boot_to_Gecko/Building_and_installing_Boot_to_Gecko" title="/en-US/docs/Mozilla/Boot_to_Gecko/Building_and_installing_Boot_to_Gecko">Αναπτύσσοντας και εγκαθιστώντας το Firefox OS</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Architecture" title="/en-US/docs/Mozilla/Firefox_OS/Architecture">Επισκόπηση αρχιτεκτονικής του Firefox OS</a></li> + <li><a href="/en-US/docs/Mozilla/Boot_to_Gecko/Debugging_on_Boot_to_Gecko" title="/en-US/docs/Mozilla/Boot_to_Gecko/Debugging_on_Boot_to_Gecko">Αποσφαλμάτωση στο Firefox OS</a></li> +</ul> +<p> </p> diff --git a/files/el/archive/b2g_os/developing_firefox_os/τροποποιώντας_το_αρχείο_hosts/index.html b/files/el/archive/b2g_os/developing_firefox_os/τροποποιώντας_το_αρχείο_hosts/index.html new file mode 100644 index 0000000000..703279f670 --- /dev/null +++ b/files/el/archive/b2g_os/developing_firefox_os/τροποποιώντας_το_αρχείο_hosts/index.html @@ -0,0 +1,38 @@ +--- +title: Τροποποιώντας το αρχείο hosts +slug: Archive/B2G_OS/Developing_Firefox_OS/τροποποιώντας_το_αρχείο_hosts +translation_of: Archive/B2G_OS/Developing_Firefox_OS/modifying_hosts_file +--- +<div class="summary"> + <p>Κάποιες φορές χρειάζεται να επεξεργαστείτε το αρχείο hosts στο "μηχάνημά" σας εξαιτίας μιας επίθεσης, για να μπλοκάρετε ανεπιθύμητες συνδέσεις, για να ανακατευθείνετε αιτήματα σε μια συγκκριμένη IP, κλπ. Αυτό το άρθρο εξηγεί πως This article explains how to modify the hosts file of your Firefox OS phone. It is located under /system/etc .</p> +</div> +<h2 id="Preparing_your_phone">Preparing your phone</h2> +<p>On the phone, go the <a href="/en-US/Firefox_OS/Debugging/Developer_settings#The_Developer_panel">Developer settings panel</a> and check:</p> +<ul> + <li>"Remote Debugging" (in Firefox OS 1.4 and above, select "ADB and Devtools" from the select menu)</li> + <li>"Console Enabled"</li> +</ul> +<p>Then plug your phone to your computer.</p> +<p>At this point the steps for modifying the hosts file are the same as for Android. Android developers will quickly settle into the swing of things.</p> +<h2 id="Steps_in_the_terminal">Steps in the terminal</h2> +<ol> + <li>Open a terminal window.</li> + <li>Remount the /system partition on the device to get read-write permissions + <pre class="brush: bash">adb remount</pre> + </li> + <li>Get the hosts file on your computer + <pre class="brush: bash">adb pull /system/etc/hosts /tmp</pre> + </li> + <li>Modify the hosts file in /tmp/hosts as needed and save the file. For example: + <pre class="brush: bash">127.0.0.1 localhost +ip.to.re.direct hostName</pre> + </li> + <li>Push the modified hosts file to the device + <pre class="brush: bash">adb push /tmp/hosts /system/etc/hosts</pre> + </li> +</ol> +<p>Αυτό ήταν: το αρχείο hosts σας θα πρέπει να έχει ενημερωθεί τώρα.</p> +<div class="note"> + <p><strong>Σημείωση</strong>: Θέλετε να μάθετε περισσότερα για το ADB; Ρίξτε μια ματιά στην <a href="http://developer.android.com/tools/help/adb.html" title="http://developer.android.com/tools/help/adb.html">Τεκμηρίωση ADB</a>.</p> +</div> +<p> </p> diff --git a/files/el/archive/b2g_os/index.html b/files/el/archive/b2g_os/index.html new file mode 100644 index 0000000000..78d519a28b --- /dev/null +++ b/files/el/archive/b2g_os/index.html @@ -0,0 +1,74 @@ +--- +title: B2G OS +slug: Archive/B2G_OS +tags: + - B2G + - Firefox OS + - Gaia + - NeedsTranslation + - TopicStub +translation_of: Archive/B2G_OS +--- +<p>ο<strong> Firefox OS </strong>είναι ένα νέο λειτουργικό σύστημα για κινητά που έχει αναπτυχθεί από το έργο <strong style="line-height: 1.5;">Boot to Gecko</strong><span style="line-height: 1.5;"> </span><span style="line-height: 1.5;">(</span><strong style="line-height: 1.5;">B2G</strong><span style="line-height: 1.5;">)</span><span style="line-height: 1.5;"> της Mozilla</span><span style="line-height: 1.5;">. Χρησιμοποιεί τον πυρήνα Linux και εκκινείται σε μια μηχανή εκτέλεσης βασισμένη στο Gecko, η οποία επιτρέπει στους χρήστες να εκτελούν εφαρμογές που έχουν αναπτυχθεί εξ' ολοκλήρου χρησιμοποιώντας το </span><a href="/en-US/docs/HTML" style="line-height: 1.5;" title="en-US/docs/HTML">HTML</a><span style="line-height: 1.5;">, </span><a href="/en-US/docs/JavaScript" style="line-height: 1.5;" title="en-US/docs/JavaScript">JavaScript</a><span style="line-height: 1.5;">, και άλλα API ανοχτών εφαρμογών ιστού.</span></p> + +<p>Το Firefox OS είναι αυτό το διάστημα υπό βαριά ανάπτυξη, δουλεύουμε συνεχώς τρόπους για να κάνουμε τη χρήση του, το "χακάρισμα" του <span style="line-height: 1.5;">Gaia και τη δημιουργία εφαρμογών </span><span style="line-height: 1.5;">πιο εύκολη για σας. Ωστόσο, χρειάζεται να γνωρίζετε για τα συστήματα για να κάνετε πράγματα όπως να αναπτύξετε ολόκληρο το Firefox OS, ή να "φλασάρετε" σε ένα τηλέφωνο μια έκδοση του Firefox OS. Οι σύνδεσμοι παρακάτω είναι οδηγοί για προγραμματιστές Ιστού που ενδιαφέρονται να εκτελέσουν και να κάνουν αλλάγες στο ή να αναπτύξουν εφαρμογές για συσκευές με Firefox OS.</span></p> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation" name="Documentation">Τεκμηρίωση για το Firefox OS</h2> + + <dl> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Introduction" title="en-US/docs/Mozilla/Firefox_OS/Introduction">Εισαγωγή στο Firefox OS</a></dt> + <dd>Εισαγωγικές πηροφορίες για το τι είναι το Firefox OS και πωε λειτουργεί.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Apps" title="/en-US/docs/Mozilla/Firefox_OS/Apps">Γράφοντας εφαρμογές για το Firefox OS</a></dt> + <dd>Τεκμηρίωση για τη δημιουργία εφαρμογών για το Firefox OS.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Platform" title="/en-US/docs/Mozilla/Firefox_OS/Platform">Η πλατφόρμα Firefox OS</a></dt> + <dd>Τεκμηρίωση σχετικά με την πλατφόρμα του Firefox OS, συμπεριλαμβανομένου του Gonk, του Gaia, και τα πάντα ανάμεσα τους. Αυτό περιλαμβάνει τεκμηρίσωση για την ανάπτυξη και την εγκατάσταση της πλατφόρμας σε συσκευές, καθώς και την ανάπτυξη προσομοιωτών και εξομοιωτών.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Security" title="/en-US/docs/Mozilla/Firefox_OS/Security">Security</a></dt> + <dd>Documentation about security in Firefox OS; this includes topics about security devices from every perspective: for app developers, device integrators, and so forth.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Performance" title="/en-US/docs/Mozilla/Firefox_OS/Performance">Performance</a></dt> + <dd>Articles about optimizing Firefox OS applications.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Troubleshooting" title="/en-US/docs/Mozilla/Firefox_OS/Troubleshooting">Troubleshooting</a></dt> + <dd>A guide to resolving common problems with Firefox OS.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Debugging" title="en-US/docs/Mozilla/Firefox_OS/Debugging">Debugging on Firefox OS</a></dt> + <dd>A guide to debugging both your mobile apps and Firefox OS itself.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Boot_to_Gecko_developer_phone_guide" title="/en-US/docs/Mozilla/Firefox_OS/Boot to Gecko developer phone guide">Firefox OS developer phone guide</a></dt> + <dd>A guide to the Firefox OS developer phones Mozilla provides to some developers. This guide also applies if someone installed Firefox OS on your phone for you.</dd> + </dl> + + <p><span class="alllinks"><a href="/en-US/docs/tag/B2G" title="/en-US/docs/tag/B2G">View All...</a></span></p> + </td> + <td> + <h2 class="Community" id="Community" name="Community">Getting help from the community</h2> + + <p>If you're working with Firefox OS, or developing applications you'd like to run on Firefox OS devices, there are community resources to help you!</p> + + <ul> + <li>Ask your question on Mozilla's Boot to Gecko IRC channel: <a class="link-irc" href="irc://irc.mozilla.org/b2g" title="irc://irc.mozilla.org/b2g">#b2g</a></li> + </ul> + + <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Don't forget about the <em>netiquette</em>...</a></span></p> + + + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related topics</h2> + + <ul> + <li><a href="/en-US/docs/Mobile" title="en-US/docs/Mobile">Mobile</a></li> + <li><a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a></li> + <li><a href="/en-US/docs/CSS" title="en-US/docs/CSS">CSS</a></li> + <li><a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a></li> + </ul> + + <h2 class="Tools" id="Resources">Resources</h2> + + <ul> + <li><a class="link-https" href="https://wiki.mozilla.org/B2G/FAQ" title="B2G/FAQ">Mozilla wiki FAQ</a></li> + <li><a class="link-https" href="https://wiki.mozilla.org/B2G/Schedule_Roadmap" title="https://wiki.mozilla.org/B2G/Schedule_Roadmap">Roadmap</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Feature_support_chart" title="/en-US/docs/Mozilla/Firefox_OS/Feature_support_chart">Feature support chart</a></li> + </ul> + </td> + </tr> + </tbody> +</table> diff --git a/files/el/archive/b2g_os/introduction/index.html b/files/el/archive/b2g_os/introduction/index.html new file mode 100644 index 0000000000..7b8d90e803 --- /dev/null +++ b/files/el/archive/b2g_os/introduction/index.html @@ -0,0 +1,44 @@ +--- +title: Εισαγωγή στο Firefox OS +slug: Archive/B2G_OS/Introduction +translation_of: Archive/B2G_OS/Introduction +--- +<div class="summary"> +<p><strong>Το Firefox OS</strong> είναι το λειτουργικό σύστημα ανοιχτού κώδικα της Mozilla για κινητά βασισμένο στο Linux, τα πρότυπα ανοιχτού ιστού και την τεχνολογία Gecko της Mozilla. Όχι μόνο αυτό, είναι ένα project ανοιχτού κώδικα που σκοπεύει να παρέχει μια "επανεφεύρεση" του τι μπορεί να είναι οι πλατφόρμες κινητών τηλεφώνων. Το Firefox OS είναι ελεύθερο από ιδιόκτητες τεχνολογίες ενώ παρέχει ακόμη τη δύναμη για να επιτρέψει στους προγραμματιστές εφαρμογών να δημιουργήσουν εξαιρετικά προϊόντα. Επιπλέον, είναι ευέλικτο και αρκετά ικανό να κάνει τον τελικό χρήστη χαρούμενο.</p> +</div> + +<div> +<h2 id="Σε_ποιους_απευθύνεται">Σε ποιους απευθύνεται</h2> + +<p>Αυτό το σύνολο εγγράφων απευθύνεται κυρίως προγραμματιστές ιστού και πλατφόρμας που θέλουν να μάθουν πως λειτουργεί το Firefox OS, πως να συνεισφέρουν στο project, και πως να αναπτύξουν τις δικές τους προσαρμοσμένες εκδόσεις λογισμικού και να τις εγκαθιστούν σε συσκευές. Για αυτούς που θέλουν να δημιουργήσουν και διανέμουν τις δικές τους εφαρμογές ιστού, το <a href="https://developer.mozilla.org/en-US/Apps">Κέντρο Εφαρμογών</a> και η <a href="https://developer.mozilla.org/en-US/Marketplace">Ζώνη Marketplace</a> είναι καλά μέρη για να ξεκινήσετε.</p> + +<h2 id="Η_βασική_υπόσχεση_του_Firefox_OS">Η βασική υπόσχεση του Firefox OS</h2> + +<p>Για τους προγραμματιστές Ιστού/πλατφόρμας, το πιο σημαντικό μέρος που χρειάζεται να καταλάβουν είναι ότι ολόκληρη επιφάνεια χρήση είναι μια Εφαρμογή Ιστού, μια επιφάνεια που είναι ικανή να εμφανίσει και να εκκινήσει άλλες Εφαρμογές ιστού. Οποιεσδήποτε τοποποιήσεις κάνετε στην επιφάνεια χρήστη και οποιεσδήποτε εφαρμογές δημιουργήσετε για να εκτελέσετε στο Firefox OS θα εμπλέξουν ορισμένες τεχνολογίες ιστού, αλλά με ενισχυμένη πρόσβαση στο μηχανικό μέρος και τις υπηρεσίες της κινητής συσκευής.</p> + +<p>Από τις προοπτικές ενός τηλεφώνου, το Firefox OS είναι το branding της Mozilla και οι υπηρεσίες υποστήριξης στην κορυφή του Boot to Gecko (B2G), το οποίο είναι η μηχανική κωδική ονομασία του λειτουργικού συστήματος. Η επιφάνεια χρήστη του Firefox OS ονομάζεται Gaia, και περιλαμβάνει τις προεγκατεστημένες εφαρμογές και λειτουργίες συστήματος του ΛΣ.</p> + +<p>Για να βρείτε περισσότερα σχετικά με την αρχιτεκτονική της πλατφόρμας, πηγαίνετε στον <a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform">Οδηγό πλατφόρμας</a>.</p> + +<h2 id="Τωρινά_και_μελλοντικά_σχέδια">Τωρινά και μελλοντικά σχέδια</h2> + +<p>Η έκδοση 1.4 του Firefox OS βρίσκεται υπό ανάπτυξη αυτή τη στιγμή, με την 1.3 να κοντεύει να γίνει σταθερό build προς κυκλοφορία. Υπάρχουν πολλά διαθέσιμα τηλέφωνα, και εμπορικά μοντέλα και μοντέλα προγραμματιστών. Για να βρείτε περισσότερα σχετικά με τις κυκλοφορίες μας, δείτε τις <a href="https://developer.mozilla.org/en-US/Firefox_OS/Releases">σημειώσεις κυκλοφορίας προγραμματιστών μας</a> του Firefox OS και τον <a href="https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide">οδηγό τηλεφώνων</a>.</p> + +<h2 id="Η_κοινότητα">Η κοινότητα</h2> + +<p>Το Boot to Gecko και το Gaia έχουν αναπτυχθεί από ομάδες τεχνικών στη Mozilla, μαζί με πολλούς εξωτερικούς συνεισφέροντες από την ευρύτερη κοινότητα της Mozilla/ανοιχτού κώδικα. Αν θέλετε να μιλήσετε στην κοινότητα σχετικά με οποιαδήποτε πλευρά της ανάπτυξης του Firefox OS ή του Gaia, ένα καλό μέρος για να ξεκινήσετε είναι οι λίστες mailing μας και τα κανάλια IRC, που επεξηγούνται στο παρακάτω κουτί πληροφοριών.</p> + +<p>Για να υποβάλετε bugs, χρησιμοποιήστε το σύστημα του Bugzilla, και υποβάλτε τα bugs στα <a href="https://bugzilla.mozilla.org/describecomponents.cgi?product=Firefox%20OS">Περιεχόμενα του Firefox OS</a>. Εάν δεν είστε σίγουρος σε ποιο περιεχόμενο να υποβάλετε το bug, νιώστε ελεύθερος να ρωτήσετε.</p> + +<h2 id="Αναπτύσσοντας_το_λειτουργικό_σύστημα">Αναπτύσσοντας το λειτουργικό σύστημα</h2> + +<p>Το λειτουργικό σύστημα B2G βασίζεται στην αποδοτική μηχανή <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Gecko">Gecko</a> της Mozilla, και "κάθεται" στην κορυφή ενός kernel του Linux και το στρώμα αφαίρεσης μηχανικού μέρους του χώρου χρήστη (HAL) που ονομάζεται <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gonk">Gonk</a>. Το Gecko το οποίο αναφέρεται εδώ είναι βασικά το ίδιο με το Gecko που χρησιμοποιείται στο Firefox για Android, ή για Windows, ή για Mac OS X, κλπ. Το Gonk είναι βασικά ένας ακόμη στόχος θυρίδων του Gecko.</p> + +<p>Για να μάθετε πως να αναπτύξετε και να εγκαταστήσετε το Firefox OS, συμβουλευτείτε τον οδηγό μας στο <a href="/en-US/Firefox_OS/Building_and_installing_Firefox_OS">Αναπτύσσοντας και εγκαθιστώντας το Firefox OS</a>. Μπορείτε να βρείτε τον <a href="https://github.com/mozilla-b2g/B2G">Ανοιχτό κώδικα του B2G στο Github</a>.</p> + +<h2 id="Συνεισφέροντας_στο_Gaia">Συνεισφέροντας στο Gaia</h2> + +<p>Για να συνεισφέρετε στο Gaia, δε χρειάζεται τίποτα άλλο παρά μια συμπαγής γνώση προγραμματισμού ιστού. Για να μάθετε σχετικά με την ανάπτυξη και την εκτέλεση, συμβουλευτείτε τον <a href="/en-US/Firefox_OS/Hacking_Firefox_OS/Quickstart_guide_to_Gaia_development">Οδηγό γρήγορης εκκίνησης για την ανάπτυξη του Gaia</a>.</p> + +<p>Υπάρχει ένας αριθμός χρήσιμων εργαλείων διαθέσιμα σε εσάς για τον εντοπισμό σφαλμάτων του Gaia και άλλων εφαρμογών ιστού που εκτελούνται στο Firefox OS. Για να μάθετε σχετικά με αυτά και πολλά περισσότερα, συμβουλευτείτε τον οδηγό μας <a href="/en-US/Firefox_OS/Platform/Gaia/Hacking">"Χακάροντας" το Gaia</a>.</p> +</div> diff --git a/files/el/archive/b2g_os/phone_guide/geeksphone/index.html b/files/el/archive/b2g_os/phone_guide/geeksphone/index.html new file mode 100644 index 0000000000..9ac503a614 --- /dev/null +++ b/files/el/archive/b2g_os/phone_guide/geeksphone/index.html @@ -0,0 +1,96 @@ +--- +title: Geeksphone +slug: Archive/B2G_OS/Phone_guide/Geeksphone +translation_of: Archive/B2G_OS/Phone_guide/Geeksphone +--- +<div class="summary"> + <p>Οι εκδόσεις Developer Preview των τηλεφώνων με Firefox OS γίνονται τώρα ευρέως διαθέσιμα στην κοινότητα, κυρίως μέσω της <a href="http://www.geeksphone.com/">Geeksphone</a>. Αφού αυτά είναι για προγραμματιστές, θέλουμε να σας ενθαρρύνουμε να τα "πειράξετε" και να "παίξετε" μαζί τους όσο το δυνατόν περισσότερο! Σε αυτό το άρθρο καλύπτουμε κάποιες βασικές συμβουλές σχετικά με το πως να διατηρήσετε το τηλέφωνό σας ενημερωμένο και πως να "πειράξετε" τις εφαρμογές συστήματος του Gaia.</p> +</div> +<h2 id="Ενημερώνοντας_το_Geeksphone_σας_στις_τελευταίες_εκδόσεις">Ενημερώνοντας το Geeksphone σας στις τελευταίες εκδόσεις</h2> +<p>Οι ενημερώσεις του Firefox OS μπορούν να ληφθούν μέσω της εφαρμογής Ρυθμίσεις, στην κατηγορία Πληροφορίες συσκευής. Το τηλέφωνο μπορεί να ρυθμιστεί ώστε να ελέγχει για ενημερώσεις καθημερινά, εβδομαδιαία, ή μηνιαία. Επιπλέον παρέχεται ένα κουμπί “Έλεγχος τώρα”. Όταν μια ενημέρωση είναι διαθέσιμη θα ειδοποιηθείτε για να κατεβάσετε και να εγκαταστήσετε την τρέχουσα έκδοση.</p> +<p><img alt="The screen for checking updates on the Firefox OS settings app" src="https://mdn.mozillademos.org/files/6051/checkupate.png" style="width: 318px; height: 478px; display: block; margin: 0px auto;"></p> +<h2 id="Φλασάροντας_το_τηλέφωνό_σας">"Φλασάροντας" το τηλέφωνό σας</h2> +<p>Η ομάδα στην Geeksphone παρέχει επίσης τα τελευταία, σταθερά και nightly builds σας αυτο-περιεχόμενες λήψεις για να "φλασάρετε" το τηλέφωνό σας.</p> +<h3 id="Προετοιμάστε_το_τηλέφωνο_και_τον_υπολογιστή_σας">Προετοιμάστε το τηλέφωνο και τον υπολογιστή σας</h3> +<p><span style="line-height: 1.572;">Πριν προσπαθήσετε να "φλασάρετε" το τηλέφωνό σας, βεβαιωθείτε ότι το έχετε προετοιμάσει όπως περιγράφεται στην ενότητα “Προετοιμάζοντας την Συσκευή Geeksphone” στο </span><a href="https://hacks.mozilla.org/2013/05/pushing-firefox-os-apps-to-the-geeksphone/" style="line-height: 1.572;">"Ωθώντας" Εφαρμογές Firefox OS στο Geeksphone</a><span style="line-height: 1.572;">. Αυτό θα εξασφαλίσει ότι μπορείτε να "ωθήσετε" δεδομένα στο τηλέφωνό. Στην ίδια ενότητα, ακολουθήστε τις οδηγίες για να βεβαιωθείτε ότι ο υπολογιστής σας έχει τους σωστούς οδηγούς USB.</span></p> +<div class="note"> + <p><strong>Σημείωση:</strong> Είναι ιδιαίτερα σημαντικό οι υπολογιστές με Windows να έχουν τους σωστούς οδηγούς USB.</p> +</div> +<p>Οι εκδόσεις βρίσκονται στην <a href="http://downloads.geeksphone.com/">ιστοσελίδα λήψεων της Geeksphone</a>. Σ' αυτή την ιστοσελίδα θα σας παρουσιαστούν επιλογές για επιλογή της συσκευής σας και ποιο τύπο έκδοσης θέλετε να χρησιμοποιήσετε.</p> +<p><img alt="Two phone images side by side, the Geeksphone Keon and Peak, with different software download options below each one." src="https://mdn.mozillademos.org/files/6055/geeksphone-download.png" style="width: 530px; height: 486px; display: block; margin: 0px auto;"></p> +<p>Download your particular build and extract the archive to your filesystem. The archive contains the images and commands required to flash the phone using Windows, Mac OS, or Linux. Before attempting to flash the phone make sure that you have enabled Remote debugging on the phone. This option can be set by launching the Settings app and navigating to the <code>Device information -> More information -> Developer</code> tab. Also do not attempt to flash the phone if the power level is below 50%.</p> +<p><img alt="Enabling remote debugging on the Firefox OS Settings app" src="https://mdn.mozillademos.org/files/6049/remote-debugging.png" style="width: 320px; height: 480px; display: block; margin: 0px auto;"></p> +<h3 id="Windows">Windows</h3> +<div class="note"> + <p><strong>Note:</strong> You might need to install USB drivers on Windows. For instructions, see <span style="line-height: 1.572;">the section “Setting Up the Geeksphone Device” in </span><a href="https://hacks.mozilla.org/2013/05/pushing-firefox-os-apps-to-the-geeksphone/" style="line-height: 1.572;">Pushing Firefox OS Apps to the Geeksphone</a><span style="line-height: 1.572;">.</span></p> +</div> +<p>Open a Command Prompt (<code>start -> type cmd in search -> enter</code> on Windows 7, <code>Windows key + X -> select Command Prompt</code> on Windows 8) and cd to the directory containing the extracted files. Run:</p> +<pre class="brush: bash" lang="bash">flash.bat +</pre> +<h3 id="Mac_OS">Mac OS</h3> +<p>Open a Terminal (<code>Cmd + space -> type terminal -> enter</code>) window and cd to the directory containing the extracted files. Run:</p> +<pre class="brush: bash" lang="bash">./flash_mac.sh +</pre> +<h3 id="Linux">Linux</h3> +<p>To flash a Keon from Ubuntu add the following rules to /etc/udev/rules.d/51-android.rules</p> +<div> + SUBSYSTEM=="usb", ATTR{idVendor}=="05c6", ATTR{idProduct}=="8013", MODE="0666"</div> +<div> + SUBSYSTEM=="usb", ATTR{idVendor}=="18d1", ATTR{idProduct}=="d00d", MODE="0666"</div> +<div> + </div> +<p>Open a Terminal (control-alt-t on Ubuntu) window and cd to the directory containing the extracted files. Run:</p> +<pre class="brush: bash" lang="bash">./flash.sh +</pre> +<p>This should flash the new image to the phone. The phone will need to be set up again as all data will be cleared. If you want to backup your data and restore afterwards, you can follow the instructions at <a href="/en-US/Firefox_OS/Firefox_OS_build_prerequisites#Backup_the_phone_system_partition">Backup the phone system partition</a>.</p> +<h2 id="If_you_have_an_'unagi'_or_developer_preview_phone_that_is_not_a_Geeksphone">If you have an 'unagi' or developer preview phone that is not a Geeksphone</h2> +<p>If you have a developer phone that is not a Geeksphone such as an 'unagi' or a previously Android-based device, you may need to perform the following steps. If this is not you, please skip to the next section.</p> +<p>You will need to install <strong>adb</strong> and <strong>fastboot</strong>. These utilities can be found in the Android Developer Toolkit.</p> +<p>It is not necessary to install the entire toolkit. Download the toolkit from here and extract the contents. adb and fastboot are found in the /platform-tools/ folder. They can be copied to the /usr/bin of your Linux or Mac OS machine, or copied to another folder as long as that folder is added to your $PATH.</p> +<p>If you are attempting to flash your device and have another device plugged in via USB, your phone may not be detected by these utilities correctly. Only have your phone plugged in while trying to flash it.</p> +<h2 id="Tweaking_Gaia">Tweaking Gaia</h2> +<p>If you are the industrious sort, you may want to tweak the default applications in Gaia — the UI in Firefox OS. In this section we will cover some of the basics for cloning Gaia and making changes to the default system apps. Bear in mind these tips are “at your own risk” and may involve you later referring to the section “Ok, I bricked my phone”. Before proceeding make sure that you have adb and fastboot installed on your system. To verify if these are installed open a terminal and type adb devices with your phone connected. You should see your phone listed under the attached devices.</p> +<p>You should also be able to run fastboot from the terminal. If you run fastboot, a set of parameter options should be displayed. If you do not have adb or fastboot installed, a quick Google search with your operating system will return several quick starts on how to install them. In addition to adb and fastboot you will need Git. If you do not currently have Git installed, have a look at this <a href="https://help.github.com/articles/set-up-git">setup guide</a>. Finally make sure your phone is set up for remote debugging as described in the previous section.</p> +<p>Once you have the prerequisites you can open a terminal and cd to the directory you would like to clone the Gaia source code to. Type the following commands:</p> +<pre class="brush: bash" lang="bash">git clone git://github.com/mozilla-b2g/gaia.git gaia +cd gaia +</pre> +<p>This will clone the current Gaia code to your system.</p> +<div class="warning"> + <p>If you plan on submitting changes back to the Gaia source, be sure to fork the source before cloning as described in <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia/Hacking">Hacking Gaia</a>.</p> +</div> +<p>Currently the Geeksphone Keon uses the v1.0.1 branch of Gaia code, so set the proper branch using the following command before you do anything else:</p> +<pre class="brush: bash" lang="bash">git checkout -b v1.0.1 origin/v1.0.1 +</pre> +<p>Most of the system apps are located in the apps subdirectory of gaia. You can now make any changes to these Firefox OS apps you wish. Once you have made changes, make sure your device is mounted properly by first running:</p> +<pre class="brush: bash">adb remount</pre> +<p>Next, run the following command to push the modified apps to your phone. This will by default push all the system apps to the phone:</p> +<pre class="brush: bash" lang="bash">B2G_SYSTEM_APPS=1 make install-gaia +</pre> +<p>If you only changed one of the apps you can specify the particular app using similar syntax. In this example only the calendar app will be pushed to the phone:</p> +<pre class="brush: bash" lang="bash">APP=calendar B2G_SYSTEM_APPS=1 make install-gaia +</pre> +<p>If you have issues while making the changes, you can reset the phone to default values using either of the following commands:</p> +<pre class="brush: bash" lang="bash">make production +make reset-gaia +</pre> +<div class="note"> + <p><strong>Note</strong>: Bear in mind that either of the above commands will clear any data or apps that you have pushed to the phone. If you want to backup your data and restore afterwards, you can follow the instructions at <a href="/en-US/Firefox_OS/Firefox_OS_build_prerequisites#Backup_the_phone_system_partition">Backup the phone system partition</a>.</p> +</div> +<h2 id="Ok_I_bricked_my_phone">"Ok, I bricked my phone"</h2> +<p>If you are in the process of modifying your phone and it becomes “unresponsive” you should be able to recover it using fastboot with a simple procedure. The following illustrates resetting the Keon but other phones should have a similar process. You will also need to verify that you have fastboot installed.</p> +<p>First remove the USB cable and then remove the battery from the phone for 30 seconds. Then reinsert the battery and press the volume down button while holding the power button for a few seconds. Next reconnect the USB cable and run the following commands from a terminal window in the directory that contains the latest img files described in the first section of this post:</p> +<pre class="brush: bash" lang="bash">fastboot flash recovery recovery.img +fastboot flash boot boot.img +fastboot flash userdata userdata.img +fastboot flash system system.img +fastboot reboot +</pre> +<p>This process should recover your phone. If it doesn't seem to work, you may have to try it a second time.</p> +<h2 id="Go_play!">Go play!</h2> +<p>We hope these instructions are useful to you, and naturally we want you to be as happy about Firefox OS and the possibilities as we are! Feel free to play around with updating your devices, make changes/updates to Gaia apps, and also be inspired to build you own open web apps.</p> +<h2 id="Δείτε_επίσης">Δείτε επίσης</h2> +<ul> + <li><a href="/en-US/Firefox_OS/Developer_phone_guide/Geeksphone/Geeksphone_FAQ">Geeksphone FAQ</a></li> + <li><a href="/en-US/Apps/Quickstart/Build/Intro_to_open_web_apps">Εισαγωγή στις ανοιχτές εφαρμογές ιστού</a></li> +</ul> diff --git a/files/el/archive/b2g_os/phone_guide/index.html b/files/el/archive/b2g_os/phone_guide/index.html new file mode 100644 index 0000000000..ebf484964e --- /dev/null +++ b/files/el/archive/b2g_os/phone_guide/index.html @@ -0,0 +1,32 @@ +--- +title: Οδηγός τηλεφώνων με Firefox OS για προγραμματιστές +slug: Archive/B2G_OS/Phone_guide +tags: + - B2G + - Firefox OS + - NeedsContent + - NeedsTranslation + - TopicStub +translation_of: Archive/B2G_OS/Phone_guide +--- +<div class="summary"> + <p>Αυτή η ενότητα περιέχει πληροφορίες για προγραμματιστές σχετικές με συγκεκριμένα τηλέφωνα με Firefox OS. Έχουμε γενικές πληροφορίες για τα <a href="/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS" title="Building and installing Firefox OS">Αναπτύσσοντας και εγκαθιστώντας το Firefox OS</a> και <a href="/en-US/docs/Mozilla/Firefox_OS/Hacking_Firefox_OS" title="/en-US/docs/Mozilla/Firefox_OS/Hacking_Firefox_OS">"Χακάροντας" το Firefox OS</a>, οπότε παρακαλούμε πηγαίνετε εκεί για πληροφορίες σχετικά με την ανάπτυξη και την εγκατάσταση της πλατφόρμας από το scratch. Ώστοσο, οι προγραμματιστές με συγκεκριμένα τηλέφωνα στην κατοχή τους ίσως βρουν τα ακόλουθα άρθρα χρήσιμα.</p> +</div> +<dl> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Phones">Τηλέφωνα με Firefox OS</a></dt> + <dd> + Σε αυτό το άρθρο έχουμε καταγράψει τα διάφορα, διαθέσιμα τηλεφωνα με Firefox OS με πληροφορίες όπως τις κωδικές τους ονομασίες και την διαθεσιμότητά τους.</dd> + <dt> + <a href="/en-US/Firefox_OS/Developer_phone_guide/Geeksphone">Geeksphone</a></dt> + <dd> + Σε αυτό το άρθρο καλύπτουμε κάποιες βασικές συμβουλές σχετικά με το πως να κρατήσετε το Geeksphone σας ενημερωμένο και πως να "πειράξετε" τις εφαρμογές συστήματος του Gaia.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide/ZTE_OPEN">Το ZTE OPEN με Firefox OS</a></dt> + <dd> + Αυτό το άρθρο υπάρχει για να μοιραστούμε τις πληροφορίες που έχουμε διαθέσιμες για τη συσκευή ZTE OPEN με Firefox OS.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Troubleshooting">Επίλυση προβλημάτων</a></dt> + <dd> + Αυτό το άρθρο παρέχει συμβουλές για την επίλυση των συνηθισμένων προβλημάτων που ίσως αντιμετωπίσετε ενώ χρησιμοποιείτε το Firefox OS.</dd> +</dl> diff --git a/files/el/archive/b2g_os/phone_guide/phone_specs/index.html b/files/el/archive/b2g_os/phone_guide/phone_specs/index.html new file mode 100644 index 0000000000..acd368d1fe --- /dev/null +++ b/files/el/archive/b2g_os/phone_guide/phone_specs/index.html @@ -0,0 +1,477 @@ +--- +title: Τηλέφωνο και τεχνικά χαρακτηριστικά συσκευής +slug: Archive/B2G_OS/Phone_guide/Phone_specs +translation_of: Archive/B2G_OS/Phone_guide/Phone_specs +--- +<div class="summary"> + <p>Αυτό το άρθρο παρέχει γενικές πληροφορίες σχετικά με συσκευές με Firefox OS, συμπεριλαμβανομένων των υλικών χαρακτηριστικών και των ελάχιστων τεχνικών χαρακτηριστικών, καθώς και πληροφορίες σχετικά με συγκεκριμένες συσκευές που έχουν ήδη κυκλοφορήσει.</p> +</div> +<h2 id="Πλήκτρα_ελέγχου">Πλήκτρα ελέγχου</h2> +<p>Μια τυπική συσκευή με Firefox OS έχει ένα μικρό αριθμό φυσικών πλήκτρων:</p> +<dl> + <dt> + Πλήκτρο Home</dt> + <dd> + Αυτό το πλήκτρο γενικά βρίσκεται στο κέντρο κάτω από την οθόνη. Πατώντας το επιστρέφετε στον εκκινητή εφαρμογών. Πατώντας το παρατεταμένα ανοίγει η επισκόπηση εναλλασσόμενων καρτών: εδώ σύροντας προς τα πάνω μια εφαρμογή, την τερματίζετε.</dd> + <dt> + Πλήκτρο έντασης</dt> + <dd> + Στην αριστερή πλευρά βρίσκεται το πλήκτρο έντασης: πατώντας το πάνω μισό του πλήκτρου αυξάνετε την ένταση του ήχου και πατώντας το κάτω μισό μειώνετε την ένταση.</dd> + <dt> + Πλήκτρο τροφοδοσίας</dt> + <dd> + Το πλήκτρο τροφοδοσίας είναι στην πάνω δεξιά γωνία της συσκευής.</dd> +</dl> +<h2 id="Διαθέσιμες_συσκευές_με_Firefox_OS">Διαθέσιμες συσκευές με Firefox OS</h2> +<p>Κατά τη διάρκεια της ανάπτυξης σε διάφορα στάδια είχαμε διάφορα τηλέφωνα. Τώρα με την εμπορική κυκλοφορία, έχουμε μερικά μοντέλα από συνεργάτες πώλησης.</p> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Όνομα</th> + <th scope="col">Ημερομηνία κυκλοφορίας</th> + <th scope="col">Αρχική έκδοση FxOS</th> + <th scope="col">Σημειώσεις έκδοσης FxOS</th> + <th scope="col">Κωδική ονομασία</th> + <th scope="col">Διαθεσιμότητα</th> + <th scope="col">Σχόλια</th> + </tr> + </thead> + <tbody> + <tr> + <td>Alcatel One Touch Fire</td> + <td>12 Ιουλίου, 2013</td> + <td>1.0.1</td> + <td><a href="https://developer.mozilla.org/en-US/Firefox_OS/Releases/1.0.1">Προγραμματιστής</a><br> + <a href="https://support.mozilla.org/en-US/kb/whats-new-firefox-os-v11">Καταναλωτής</a></td> + <td>hamachi, buri</td> + <td>Διαθέσιμο</td> + <td>Δημόσια διαθέσιμο σε Βραζιλία, Ελλάδα, Ιταλία, Ουρουγουάη, Γερμανία, Σερβία, Ουγγαρία και Πολωνία.<br> + Διαθέσιμο από μεταπωλητές στο eBay.</td> + </tr> + <tr> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td>otoro, unagi, inari</td> + <td> </td> + <td>μη εμπορικό τηλέφωνο ZTE που χρησιμοποιήθηκε για προγραμματισμό πριν το ZTE Open.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide/ZTE_OPEN">ZTE Open</a></td> + <td>2 Ιουλίου, 2013</td> + <td>1.0.1</td> + <td><a href="https://developer.mozilla.org/en-US/Firefox_OS/Releases/1.0.1">Προγραμματιστής</a><br> + <a href="https://support.mozilla.org/en-US/kb/whats-new-firefox-os-v11">Καταναλωτής</a></td> + <td>ikura</td> + <td>Διαθέσιμο</td> + <td>παρόμοιο με το inari: δημόσια διαθέσιμο στο <span style="line-height: 1.5;">eBay.</span></td> + </tr> + <tr> + <td>LG Fireweb</td> + <td>24 Οκτωβρίου, 2013</td> + <td>1.1</td> + <td><a href="https://developer.mozilla.org/en-US/Firefox_OS/Releases/1.1">Προγραμματιστής</a><br> + <a href="http://www.mozilla.org/en-US/firefox/os/notes/1.1/">Καταναλωτής</a></td> + <td>leo</td> + <td>Διαθέσιμο</td> + <td>Δημόσια διαθέσιμο στη Βραζιλία.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide/Updating_and_Tweaking_Geeksphone">Geeksphone Keon</a></td> + <td>24 Απριλίου, 2013</td> + <td>1.0.1</td> + <td><a href="https://developer.mozilla.org/en-US/Firefox_OS/Releases/1.0.1">Προγραμματιστής</a><br> + <a href="https://support.mozilla.org/en-US/kb/whats-new-firefox-os-v11">Καταναλωτής</a></td> + <td>keon</td> + <td>Εκτός αποθέματος</td> + <td>Συσκευή μόνο για προγραμματιστές</td> + </tr> + <tr> + <td><a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide/Updating_and_Tweaking_Geeksphone">Geeksphone Peak</a></td> + <td>24 Απριλίου, 2013</td> + <td>1.0.1</td> + <td> + <p><a href="https://developer.mozilla.org/en-US/Firefox_OS/Releases/1.0.1">Προγραμματιστής</a> <a href="https://support.mozilla.org/en-US/kb/whats-new-firefox-os?redirectlocale=en-US&redirectslug=whats-new-firefox-os-v11">Καταναλωτής</a> </p> + </td> + <td>peak</td> + <td>Εκτός αποθέματος</td> + <td>Είχε την κωδική ονομασία "twist" για λίγο; συσκευή μόνο για προγραμματιστές</td> + </tr> + <tr> + <td><a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide/Updating_and_Tweaking_Geeksphone">Geeksphone Peak+</a></td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td><a href="http://www.geeksphone.com/?wysija-page=1&controller=email&action=view&email_id=15">ακυρώθηκε</a></td> + </tr> + <tr> + <td>Geeksphone Revolution</td> + <td>4 Μαρτίου, 2014</td> + <td>1.3pre</td> + <td>-</td> + <td>-</td> + <td>Διαθέσιμο</td> + <td><a href="http://shop.geeksphone.com/moviles/9-revolution.html">Διαθέσιμο online</a></td> + </tr> + <tr> + <td>LG Google Nexus 4</td> + <td> </td> + <td> </td> + <td> </td> + <td>nexus-4</td> + <td> </td> + <td>Πειραματικό. Δεν υποστηρίζεται από την LG ή την Google. Δεν παράγεται πλέον.</td> + </tr> + </tbody> +</table> +<h2 id="Firefox_OS_κατά_έκδοση">Firefox OS κατά έκδοση</h2> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Έκδοση</th> + <th scope="col">Ημερομηνία Ολοκλήρωσης Λειτουργιών (FC)</th> + <th scope="col">Ημερομηνία Κυκλοφορίας Σε Συνεργάτες (RTP) </th> + <th scope="col">Κωδική ονομασία</th> + <th scope="col">Έκδοση Gecko</th> + <th scope="col">Συμπεριλαμβανόμενες διορθώσεις ασφαλείας</th> + </tr> + </thead> + <tbody> + <tr> + <td>1.0</td> + <td>22 Δεκεμβρίου, 2012</td> + <td>21 Φεβρουαρίου, 2013</td> + <td>TEF</td> + <td>Gecko 18</td> + <td>Gecko 18</td> + </tr> + <tr> + <td>1.0.1</td> + <td>15 Ιανουαρίου, 2013</td> + <td>6 Σεπτεμβρίου, 2013</td> + <td>Shira</td> + <td>Gecko 18</td> + <td>Gecko 20</td> + </tr> + <tr> + <td>1.1.0</td> + <td>29 Μαρτίου, 2013</td> + <td>9 Οκτωβρίου, 2013</td> + <td>Leo</td> + <td>Gecko 18+ (νέα <a href="http://en.wikipedia.org/wiki/Application_programming_interface" title="Application programming interface">API</a>)</td> + <td>Gecko 23</td> + </tr> + <tr> + <td>1.1.1</td> + <td> </td> + <td>TBD</td> + <td>HD</td> + <td>Ίδιο με 1.1.0 με WVGA</td> + <td>Gecko 23</td> + </tr> + <tr> + <td>1.2.0</td> + <td>15 Σεπτεμβρίου, 2013</td> + <td>9 Δεκεμβρίου, 2013</td> + <td>Koi</td> + <td>Gecko 26<sup><a href="http://en.wikipedia.org/wiki/Firefox_OS#cite_note-39"><span>[</span>39<span>]</span></a></sup></td> + <td>Gecko 26</td> + </tr> + <tr> + <td>1.3.0</td> + <td>9 Δεκεμβρίου, 2013</td> + <td>TBD</td> + <td> </td> + <td>Gecko 28</td> + <td>Gecko 28</td> + </tr> + <tr> + <td>1.4.0</td> + <td>17 Μαρτίου, 2014</td> + <td>TBD</td> + <td> </td> + <td>Gecko 30</td> + <td>Gecko 30</td> + </tr> + </tbody> +</table> +<h2 id="Τεχνικά_χαρακτηριστικά_συσκευών">Τεχνικά χαρακτηριστικά συσκευών</h2> +<p>Σημειώστε ότι υπάρχουν μερικές περιπτώσεις όπου υπάρχει μια επερχόμενη συσκευή που δεν έχει ανακοινωθεί αλλά μπορούμε να μοιραστούμε την κωδική ονομασία της συσκευής και (κάποιες από) τις δυνατότητες της συσκευής. ΜΗΝ γράψετε επιπλέον πληροφορίες για αυτές τις συσκευές εκτός κι αν ο Andreas Gal ή κάποιος άλλος, το ίδιο ικανός να ευλογήσει την δημόσια αποκάλυψη της πληροφορίας, το έχει αποκαλύψει.</p> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Όνομα</th> + <th scope="col">Κωδική ονομασία</th> + <th scope="col">Εκδόσεις</th> + <th scope="col">Ανάλυση</th> + <th scope="col">Οθόνη (ίντσες)</th> + <th scope="col">CPU</th> + <th scope="col">Κάμερα(ες), Mpx</th> + <th scope="col">RAM</th> + <th scope="col">ROM</th> + <th scope="col">Αποθηκευτικός χώρος</th> + <th scope="col">Μπαταρία (mAh)</th> + </tr> + </thead> + <tbody> + <tr> + <td>Alcatel One Touch Fire</td> + <td>hamachi, buri</td> + <td>v1.0.1/v1.1</td> + <td> + <p>320 x 480<br> + PX=1</p> + </td> + <td>3.5</td> + <td>Qualcomm MSM7227A 1 GHz</td> + <td>Πίσω: 3.2</td> + <td>256MB</td> + <td>512MB</td> + <td>/δεδομένα: ίσως τον ίδιο με το inari; <a href="http://www.alcatelonetouch.com/global-en/products/smartphones/one_touch_fire.html#.Unyg5UOVt1M">τα τεχνικά χαρακτηριστικά λένε</a> 160MB "μνήμη τελικού χρήστη"<br> + Ίσως καθόλου εσωτερικός Χώρος Συσκευής, απαιτείται κάρτα MicroSD (έως και 32GB)<br> + </td> + <td>1400</td> + </tr> + <tr> + <td>ZTE Open / παραλλαγές</td> + <td>ikura</td> + <td>v1.0.1 (όταν αποστέλλεται)</td> + <td>320 x 480<br> + PX=1</td> + <td>3.5</td> + <td>Qualcomm MSM7225A 800 MHz</td> + <td>Πίσω: 3.2</td> + <td>256MB</td> + <td>512MB</td> + <td> + <p>/δεδομένα: 152M<br> + Καθόλου εσωτερικός Χώρος Συσκευής, απαιτείται κάρτα MicroSD</p> + </td> + <td>1200</td> + </tr> + <tr> + <td>LG Fireweb</td> + <td>leo</td> + <td>v1.1</td> + <td>320 x 480<br> + PX=1</td> + <td>4</td> + <td>Qualcomm 1 GHz</td> + <td>Πίσω: 5</td> + <td>512MB</td> + <td>4GB</td> + <td> + <p>/δεδομένα: 1007.90M<br> + εσωτερικός Χώρος Συσκευής: ναι, αβέβαιο μέγεθος. ίσως 3.7G, αλλά ίσως είναι κακά μαθηματικά. (Σε μια δύστηχη συσκευή /sys/devices/platform/msm_sdcc.3/mmc_host/mmc0/mmc0:0001/block/mmcblk0/block είναι 7733248, και τότε υποθέτοντας το μέγεθος ενός <span style="line-height: 1.5;">block</span><span style="line-height: 1.5;"> των 12 byte, παίρνουμε 3.7G)</span></p> + </td> + <td>1540</td> + </tr> + <tr> + <td><a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide/Updating_and_Tweaking_Geeksphone">Geeksphone Keon</a></td> + <td>keon</td> + <td> + <p>v1.0.1 - <a href="/en-US/docs/" style="line-height: 1.5;">λήψεις nightly εδώ</a></p> + </td> + <td>320 x 480<br> + PX=1</td> + <td>3.5</td> + <td>Qualcomm Snapdragon S1 7225AB 1 GHz</td> + <td>Πίσω: 3</td> + <td>512MB</td> + <td>4GB</td> + <td> + <p>/δεδομένα: 1.5G<br> + εσωτερικός Χώρος Συσκευής: 1023.4M</p> + </td> + <td>1580</td> + </tr> + <tr> + <td><a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide/Updating_and_Tweaking_Geeksphone">Geeksphone Peak</a></td> + <td>peak</td> + <td>v1.0.1 - <a href="/en-US/docs/">λήψεις nightly εδώ</a></td> + <td>540 x 960<br> + PX=1.5</td> + <td>4.3</td> + <td>Qualcomm Snapdragon S4 8225 1.2 GHz διπύρηνος</td> + <td> + <p>Μπροστά: 2<br> + Πίσω: 8</p> + </td> + <td>512MB</td> + <td>4GB</td> + <td>/δεδομένα: 1.5G<br> + εσωτερικός Χώρος Συσκευής: 1023.4M</td> + <td>1800</td> + </tr> + <tr> + <td>Geeksphone Revolution</td> + <td>-</td> + <td>v1.3pre (όταν αποστέλλεται)</td> + <td>540 x 960 PX=1.5</td> + <td>4.7</td> + <td><span class="mini-text">Διπύρηνος επεξεργαστής Intel® Atom™ Z2560<span class="mini-text"> έως και 1.6GHz</span></span></td> + <td> + <p>Μπροστά: 1.3 Πίσω: 8</p> + </td> + <td>1GB</td> + <td>4GB</td> + <td> + <p>/δεδομένα: 2G<br> + εσωτερικός Χώρος Συσκευής: 2.5GB</p> + </td> + <td>2000</td> + </tr> + <tr> + <td>Nexus 4</td> + <td>nexus-4</td> + <td>v1.3 - nightly</td> + <td>768 x 1280<br> + 720p</td> + <td>4.7</td> + <td> + <p>Qualcomm<br> + <span class="mw-redirect">Snapdragon S4 Pro</span><br> + 1.5 GHz τετραπύρηνος</p> + </td> + <td>Πίσω: 8</td> + <td>2GB</td> + <td>8 ή 16GB</td> + <td>όλα υπάρχουν σε μια μεγάλη σούπα, δεν υπάρχει εξωτερικός χώρος (MicroSD). Το μέγεθος της σούπας διαφέρει ανάλογα με το ποιο μοντέλο του Nexus 4 έχετε.</td> + <td>2100</td> + </tr> + <tr> + <td><a href="https://wiki.mozilla.org/FirefoxOS/TCP">Foxconn InFocus</a></td> + <td>flatfish</td> + <td> </td> + <td>1280 x 800</td> + <td>10</td> + <td>A31 (Arm Cortex A7) Τετραπύρηνος 1.0 GHz</td> + <td> + <p>Μπροστά: 2<br> + Πίσω: 5</p> + </td> + <td>2GB</td> + <td>16GB</td> + <td> </td> + <td>7000</td> + </tr> + <tr> + <td><a href="https://wiki.mozilla.org/Platform/2013-11-05">some phone thing</a></td> + <td>fugu</td> + <td>v1.2f (κλάδος) <a href="https://groups.google.com/d/msg/mozilla.dev.b2g/JKAu9UNjBf8/9zj5Y3m6518J">per</a></td> + <td>320 x 480</td> + <td> </td> + <td> </td> + <td> </td> + <td>256MB</td> + <td> </td> + <td> </td> + <td> </td> + </tr> + <tr> + <td><a href="https://wiki.mozilla.org/FirefoxOS/Tarako">Spreadtrum SC6821</a></td> + <td>tarako</td> + <td>v1.3 <a href="https://wiki.mozilla.org/FirefoxOS/Tarako">per</a></td> + <td>HVGA<br> + 320 x 480</td> + <td>3.5</td> + <td>Cortex A5 1GHz</td> + <td>0.3 (μόνο πίσω;)</td> + <td>128MB (zram)</td> + <td>2GB NAND flash (εξωτερική) + 1GB LPDDR1 (ενσωματωμένη)</td> + <td>32GB κάρτα micro SD</td> + <td>1100</td> + </tr> + <tr> + <td><a href="https://hacks.mozilla.org/2014/02/open-applications-tcp/">VIA Vixen</a></td> + <td>προσαρμογή του flatfish βασισμένη στην κοινό-τητα; <a href="https://wiki.mozilla.org/Platform/2014-03-18">per</a></td> + <td> </td> + <td>1024 x 600</td> + <td>7</td> + <td>Cortex-A9 Διπύρηνος 1.2 GHz</td> + <td> + <p>Μπροστά: 0.3 Πίσω: 2<br> + </p> + </td> + <td>1GB</td> + <td>8GB</td> + <td> </td> + <td> </td> + </tr> + <tr> + <td><a href="https://blog.mozilla.org/press/2014/02/developer-momentum-2/">Flame</a></td> + <td>η "συσκευή αναφοράς"</td> + <td>v1.3</td> + <td>854 × 480</td> + <td>4.5</td> + <td>Qualcomm MSM8210 Snapdragon, 1.2GHZ Διπύρηνος επεξεργαστής</td> + <td>Μπροστά: 2<br> + Πίσω: 5</td> + <td>256MB -1GB (προσαρμόσιμη από τον προ-γραμματιστή)</td> + <td>8GB</td> + <td> </td> + <td>1800</td> + </tr> + </tbody> +</table> +<p>Εξηγήσεις στηλών:</p> +<ul> + <li>Ανάλυση: + <ul> + <li>οριζόντια x κάθετα</li> + <li>PX=1, PX=1.5, ή PX=2 είναι η ρύθμιση GAIA_DEV_PIXELS_PER_PX που θα πρέπει να χρησιμοποιηθεί για την συσκευή</li> + </ul> + </li> + <li>Αποθηκευτικός χώρος: + <ul> + <li>"/δεδομένα" είναι ο εσωτερικός χώρος. Είναι εκεί όπου το IndexedDB και άλλα πράγματα "ζουν". Ο χώρος διαχωρίζεται σε μια βάση ανά εφαρμογή και δεν είναι προβάσιμος χώρος USB. Τα δεδομένα είναι πιθανών προσβάσιμα μέσω του adb που εξαρτάται σε προνόμια.</li> + <li>Ο Χώρος Συσκευής είναι το μέρος όπου το <a href="/en-US/docs/WebAPI/Device_Storage">API Χώρου Συσκευής</a> μπορεί να αποθηκεύσει πράγματα. Μερικές συσκευές ίσως έχουν εσωτερικό χώρο (πχ: leo), μερικές συσκευές ίσως έχουν εξωτερικό χώρο στις κάρτες MicroSD, μερικές συσκευές ίσως υποστηρίζουν και τα δύο (πχ: leo). Αυτός ο χώρος είναι πιθανών προσβάσιμος από όλες τις εφαρμογές καθώς και τον χρήστη μέσω USB.</li> + <li>Οι τιμές που δεν φαίνονται σωστές και στρογγυλεμένες έχουν αναφερθεί από το "adb shell df" στη στήλη "μέγεθος".</li> + </ul> + </li> +</ul> +<h2 id="Ελάχιστες_απαιτήσεις_hardware">Ελάχιστες απαιτήσεις hardware</h2> +<p>Οι πιο πρόσφατες κινητές συσκευές βασισμένες στο ARM είναι αρκετά δυνατές για να υποστηρίξουν το Firefox OS. Αυτή η ενότητα καλύπτει τις βασικές απαιτήσεις hardware καθώς και τα προτεινόμενα χαρακτηριστικά hardware.</p> +<table> + <thead> + <tr> + <th scope="col">Εξάρτημα</th> + <th scope="col">Ελάχιστο</th> + <th scope="col">Προτεινόμενο</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">CPU</th> + <td>ARMv6</td> + <td>Κλάσσης Cortex A5 ή καλύτερο<br> + ARMv7a με NEON</td> + </tr> + <tr> + <th scope="row">GPU</th> + <td>—</td> + <td>Κλάσσης Adreno 200 ή καλύτερη</td> + </tr> + <tr> + <th scope="row">Συνδεσιμότητα</th> + <td>—</td> + <td>WiFi<br> + 3G</td> + </tr> + <tr> + <th scope="row">Αισθητήρες</th> + <td>—</td> + <td>Επιταχυνσιόμετρο<br> + Εγγυήτητας<br> + Φωτός περιβάλλοντος<br> + A-GPS</td> + </tr> + </tbody> +</table> +<div class="note"> + <p><strong>Σημείωση</strong>: Για μια καλή εμπειρία χρήσης, είναι καλή ιδέα να επιλέξετε μια συσκευή που να προσφέρει ένα προφιλ χρώματος στολής (υλοποιημένο από τον οδηγό της συσκευής γραφικών) και υποστήριξη ακουστικού για σίγαση και μη σίγαση και για παύση και αναπαραγωγή πολυμέσων. Αυτά τα χαρακτηριστικά είναι συνηθισμένα στα σύγχρονα smartphones.</p> +</div> +<p> </p> diff --git a/files/el/archive/b2g_os/platform/gaia/hacking/index.html b/files/el/archive/b2g_os/platform/gaia/hacking/index.html new file mode 100644 index 0000000000..299f0a2d89 --- /dev/null +++ b/files/el/archive/b2g_os/platform/gaia/hacking/index.html @@ -0,0 +1,126 @@ +--- +title: Hacking Gaia +slug: Archive/B2G_OS/Platform/Gaia/Hacking +translation_of: Firefox_OS/Developing_Gaia +--- +<div class="warning"> + <p>Αυτή η σελίδα απευθύνεται σε Gaia developers. Αν όμως αναζητάτε πληροφορίες σχετικά με το πώς να δημιουργήσετε μια έκδοση (build) και να εκτελέσετε το Firefox OS, θα πρέπει να συμβουλευθείτε το <a href="/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS" title="/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS">Building and installing Firefox OS page</a>.</p> +</div> +<p>Gaia λέγεται η συλλογή <a href="https://developer.mozilla.org/apps" rel="nofollow">εφαρμογών ιστού (web apps)</a> που αποτελεί το ορατό μέρος του <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a>. Ο,τιδήποτε βλέπετε στην οθόνη στο Firefox OS είναι υλοποιημένο με την χρήση ανοικτών τεχνολογιών Ιστού (Open Web technologies), συμπεριλαμβανομένων και την αρχικής οθόνης (home screen) και όλων των προεγκατεστημένων εφαρμογών.</p> +<h2 id="Πως_να_λάβετε_τον_πηγαίο_κώδικα">Πως να λάβετε τον πηγαίο κώδικα</h2> +<p>Για να λάβετε τον πηγαίο κώδικα του Gaia, μπορείτε να δημιουργήσετε μια διακλάδωση (fork) στο <a href="https://github.com/mozilla-b2g/gaia" title="https://github.com/mozilla-b2g/gaia">GitHub</a> και στη συνέχεια να κλωνοποιησετε (clone) τη νεα σας διακλαδωση χρησιμοποιωντας το <a href="http://git-scm.com/" title="http://git-scm.com/">git</a>.</p> +<pre>$ git clone https://github.com/mozilla-b2g/gaia.git</pre> +<h2 id="Εκτέλεση_του_Gaia">Εκτέλεση του Gaia</h2> +<p>Μπορείτε να εκτελέσετε το Gaia τόσο στο desktop, μέσω του Firefox, όσο και μέσω μιας συμβατής φορητής συσκευής.</p> +<h3 id="B2G_desktop">B2G desktop</h3> +<p>Το B2G desktop είναι μία εκδοχή (build) για το desktop του περιβάλλοντος εκτέλεσης (runtime) εφαρμογών το οποίο χρησιμοποιείται σε συσκευές Firefox OS και μπορεί να χρησιμοποιηθεί για εκτέλεση του Gaia στον υπολογιστή σας.</p> +<p>Μπορείτε να κατεβάσετε (download) μια πειραματική εκδοχή (nightly build) του B2G desktop από <a href="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/" title="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/">εδώ</a>. Ανάλογα με την έκδοση στην οποία στοχεύετε, ίσως να χρειάζεστε μια συγκεκριμένη έκδοση του latest-mozilla-b2g18. Υπάρχουν εκδοχές για Linux (32 bit καί 64 bit), Mac OS X καί Windows.</p> +<p>Οι πειραματικές εκδοχές συμπεριλαμβάνουν μία πρόσφατη έκδοση του gaia. Μετά τη λήψη του αρχείου, το μόνο που χρειάζεται να κάνετε είναι να το αποσυμπιέσετε σε ένα φάκελο και να τρέξετε το εκτελέσιμο b2g μέσα από τον αποσυμπιεσμένο φάκελο.</p> +<pre>$ cd b2g +$ ./b2g</pre> +<p>Για να τρέξετε το B2G με μια δική σας έκδοση του Gaia για σκοπούς ανάπτυξης, πρέπει πρώτα να εκδόσετε (build) ένα προφίλ (profile) από το δικό σας αρχείο:</p> +<pre>$ cd /path/to/gaia +$ DEBUG=1 DESKTOP=0 make</pre> +<p>Αυτό θα δημιουργήσει (generate) ένα υποφάκελο στο φάκελο <code>gaia</code> με όνομα <code>profile</code>. Το μέρος <code>DEBUG</code> εκτελεί το Gaia σαν μια φιλοξενούμενη (hosted) εφαρμογή μέσω ενός ενσωματωμένου (built-in) web server, σε αντίθεση με την προεπιλεγμένη μορφή των "πακεταρισμένων" εφαρμογών που χρειάζονται πακετάρισμα μετά από κάθε αλλαγή. Μπορείτε να βρείτε τη διαδρομή πρός το φάκελο του προφίλ (profile directory) κοιτάζοντας την τελευταία γραμμή της εξόδου (output) μετά την εκτέλεση της πιό πάνω εντολής, θα πρέπει να μοιάζει κάπως έτσι:</p> +<pre>Profile Ready: please run [b2g|firefox] -profile /path/to/gaia/profile</pre> +<p>Θα μπορούσατε να τρέξετε την έκδοση Desktop του B2G με το νέο σας προφίλ με την ακόλουθη εντολή:</p> +<pre>$ ./b2g /path/to/gaia/profile</pre> +<p>Μπορείτε να εκδόσετε (build) το δικό σας desktop B2G από τον πηγαίο κώδικα αν το επιθυμείτε.</p> +<h3 id="Χρήση_του_Gaia_στο_Firefox">Χρήση του Gaia στο Firefox</h3> +<p>Το Gaia μπορεί επίσης να τρέξει μέσα από το Firefox. Αυτό έχει το πλεονέκτημα ότι κάνει τον κύκλο ανάπτυξης γρήγορο και επιπλέον παρέχει τυποποιημένα εργαλεία ανάπτυξης Ιστού (web development tools) και απαλοιφής σφαλμάτων (debuggers). Δείτε πως να το κάνετε αυτό και για περισσότερες λεπτομέρειες, στο <a href="/en-US/docs/Mozilla/Firefox_OS/Using_Gaia_in_Firefox" title="/en-US/docs/Mozilla/Firefox_OS/Using_Gaia_in_Firefox">Χρήση του Gaia στο Firefox</a> .</p> +<h3 id="Χρήση_του_Gaia_σε_μια_συσκευή">Χρήση του Gaia σε μια συσκευή</h3> +<p>Αν διαθέτετε μια συμβατή κινητή συσκευή μπορείτε επίσης να εκτελέσετε το Gaia εγκαθιστώντας σε αυτή το Firefox OS. Δείτε το <a href="/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS" title="Mozilla/Firefox_OS/Building_and_installing_Firefox_OS">Προετοιμασία έκδοσης και εγκατάσταση του Firefox OS</a> για περισσότερες λεπτομέρειες και οδηγίες για να το πετύχετε αυτό. Επιπλέον, έχουμε τεκμηρίωση (documentation) για το <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing" title="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform/Testing">πως να δοκιμάσετε το Firefox OS</a>.</p> +<h2 id="Δοκιμές_μονάδων_(Unit_tests)">Δοκιμές μονάδων (Unit tests)</h2> +<p>Δείτε το <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Gaia_unit_tests" title="Mozilla/Firefox_OS/Platform/Testing/Gaia_unit_tests"> Δοκιμές μονάδων του </a><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Gaia_unit_tests" title="Mozilla/Firefox_OS/Platform/Testing/Gaia_unit_tests">Gaia</a> για τεκμηρίωση σχετικά με τη δημιουργία και την εκτέλεση δοκιμών μονάδων του Gaia.</p> +<h2 id="Υποβολή_αναφορών_προβλημάτων_(bugs)">Υποβολή αναφορών προβλημάτων (bugs)</h2> +<p>Οι αναφορές για προβλήματα (bugs)υποβάλλονταιστο Bugzilla στη θέση <a href="https://bugzilla.mozilla.org/buglist.cgi?product=Boot2Gecko&component=Gaia&resolution=---" rel="nofollow">Boot2Gecko > Gaia</a>. Υποβάλλετε μια νέα αναφορά προβλήματος στη θέση του <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Boot2Gecko" title="https://bugzilla.mozilla.org/enter_bug.cgi?product=Boot2Gecko">Gaia component</a> (ή ενός από τα sub-components).</p> +<h2 id="Συνεισφορά_στο_Gaia">Συνεισφορά στο Gaia</h2> +<p>Το Mozilla βασίζεται σε συνεισφορές που προέρχονται από την κοινότητα open source για βοήθεια στην ανάπτυξη εφαρμογών Gaia και θα μας άρεσε πολύ να δούμε και τη δική σας συμμετοχή.</p> +<p>Κάποιες πολύ καλές πηγές για να βρείτε προβλήματα (bugs) πάνω στα οποία θα μπορούσατε να αρχίσετε το hacking:</p> +<ul> + <li><a href="https://bugzilla.mozilla.org/buglist.cgi?quicksearch=component:gaia%20sw:polish%20@nobody;list_id=4566236" rel="nofollow">Unowned Gaia polish bugs on Bugzilla</a></li> + <li><a href="http://www.joshmatthews.net/bugsahoy/?b2g=1" rel="nofollow">Mentored bugs</a></li> +</ul> +<h3 id="Βασικά_στοιχεία_συγγραφής_κώδικα_(coding_style)">Βασικά στοιχεία συγγραφής κώδικα (coding style)</h3> +<ul> + <li>Υπόβαθρο: + <ul> + <li><a href="/en-US/docs/Developer_Guide/Coding_Style#JavaScript_practices" title="Developer_Guide/Coding_Style#JavaScript_practices">Coding Style: Γενικές πρακτικές</a></li> + <li><a href="/en-US/docs/Developer_Guide/Coding_Style#JavaScript_practices" title="Developer_Guide/Coding_Style#JavaScript_practices">Coding Style: Πρακτικές JavaScript</a></li> + <li><a href="/en-US/docs/Developer_Guide/Coding_Style#Naming_and_formatting_guide" title="Developer_Guide/Coding_Style#Naming_and_formatting_guide">Coding Style: Οδηγίες ονοματοδοσίας και διαμόρφωσης</a></li> + </ul> + </li> + <li>Σιγουρευθείτε ότι τα αρχεία HTML ξεκινούν με τη δήλωση <code><!DOCTYPE html></code> (δηλαδή ως έγγραφα HTML5). Σε περίπτωση που δεν υπάρχει αυτή η δήλωση, ο Internet Explorer 9 και οι πιό πρόσφατες εκδόσεις του, θα τα φορτώνουν σε κατάσταση υψηλής συμβατότητας (compatibility mode).</li> + <li>Συμπεριλάβετε τη δήλωση <code>"use strict";</code> (ακριβώς όπως εμφανίζεται, συμπεριλαμβανομένων και των εισαγωγικών) στην αρχή των αρχείων JavaScript ώστε να βάλετε τον κώδικά σας σε αυστηρή κατάσταση λειτουργίας (strict mode).</li> + <li>Χρησιμοποιήστε δύο κενά για να δημιουργήσετε εσοχές στον κώδικα, αντί για tabs.</li> + <li>Είναι πολύ σημαντικό να χρησιμοποιείτε line breaks για να διαχωρίσετε τις λογικές ενότητες του κώδικα!</li> + <li>Χρησιμοποιήστε το χαρακτήρα "underscore" ως διαχωριστικό όπου υπάρχουν πολλαπλές λέξεις σε ονόματα των αρχείων, kapws_etsi.js.</li> + <li>Χρησιμοποιήστε single quotes (') αντί για double quotes (") για αλφαριθμητικά (strings).</li> +</ul> +<h4 id="Επιπρόσθετοι_κανόνες">Επιπρόσθετοι κανόνες</h4> +<p>Λάθος:</p> +<pre>if (expression) doSomething(); +</pre> +<p>Σωστό:</p> +<pre>if (expression) { + doSomething(); +} +</pre> +<p>Αν εργάζεστε στην εφαρμογή συστήματος (the system app), συμβουλευθείτε τις οδηγίες που παρέχονται <a href="https://groups.google.com/d/msg/mozilla.dev.gaia/rEhSrw6XmT4/UNvE7qW9pgYJ" title="See_here_for_some_rules._https://groups.google.com/d/msg/mozilla.dev.gaia/rEhSrw6XmT4/UNvE7qW9pgYJ">εδώ</a>.</p> +<p>Πρίν την υποβολή ενός patch συστήνουμε να εφαρμόσετε το <a href="http://closure-linter.googlecode.com/svn/trunk/closure_linter/gjslint.py" title="http://closure-linter.googlecode.com/svn/trunk/closure_linter/gjslint.py">gjslint</a> επάνω του για να ελέγξετε για τυχόν λάθη στη μορφή του:</p> +<pre>gjslint --nojsdoc my_file.js</pre> +<h3 id="Υποβολή_ενός_patch">Υποβολή ενός patch</h3> +<p>Για αρχή, υποβάλλετε ή αναθέστε μια αναφορά προβλήματος (bug) στον εαυτό σας στο <a href="https://bugzilla.mozilla.org/buglist.cgi?product=Boot2Gecko&component=Gaia&resolution=---" title="https://bugzilla.mozilla.org/buglist.cgi?product=Boot2Gecko&component=Gaia&resolution=---">Bugzilla</a>, θα χρειαστείτε ένα λογαριασμό Bugzilla.</p> +<p>Στη συνέχεια δημιουργήστε μία διακλάδωση (ένα νέο τμήμα) στο δικό σας fork του Gaia:</p> +<pre>$ git branch branchname +$ git checkout branchname</pre> +<p>Οριστικοποιήστε (commit) τις αλλαγές σας:</p> +<pre>$ git add /file/to/add +$ git commit -m "Bug XXXXX - Fix the broken Gaia and save the world"</pre> +<p>Προωθήστε (push) το τμήμα σας (branch):</p> +<pre>$ git push origin branchname</pre> +<p>Υποβάλλετε ένα αίτημα pull πηγαίνοντας στο τμήμα μέσα στο δικό σας fork στο GitHub και εντοπίζοντας το πλήκτρο pull request.</p> +<p>Για να ζητήσετε τον έλεγχο του νέου σας patch, <a href="http://globau.wordpress.com/2013/10/21/github-pull-requests-and-bugzilla/">επισυνάπτετε το αίτημα (pull request)</a> στην αναφορά προβλήματος στο Bugzilla παραθέτοντας το URL του αιτήματος pull, και ορίζοντας την ένδειξη έλέγχος (review -"r"- flag) σε "?" και δίνοντας το bugzilla ID ενός από τους <a href="https://wiki.mozilla.org/Modules/FirefoxOS" title="https://wiki.mozilla.org/Modules/FirefoxOS">κατόχους τμήματος (module) και συνεργαζόμενους</a> (κάτι πολύ σημαντικό - διαφορετικά πιθανότατα δεν θα δεί κανένας την αναφορά προβλήματος που θα έχετε υποβάλλει). Το <a href="https://addons.mozilla.org/en-US/firefox/addon/github-tweaks-for-bugzilla/" title="https://addons.mozilla.org/en-US/firefox/addon/github-tweaks-for-bugzilla/">Github tweaks for bugzilla extension on AMO</a> μπορεί να βοηθήσει στον αυτοματισμό αυτής της διαδικασίας, επισυνάπτοντας αυτόματα τις πληροφορίες στην αναφορά προβλήματος. Θα πρέπει όμως εσείς να ορίσετε τηνένδειξη (flag) review στο Bugzilla.</p> +<p>Το πρόσωπο που θα κάνει τον έλεγχο ενδέχεται να σας ζητήσει να κάνετε κάποιες αλλαγές -ίσως χρειαστεί να προσθέσετε το αρχικό commit και να επιβάλλετε την προώθηση (force push) του στον αρχικό κλάδο/αίτημα pull (branch/pull request). Απότη στιγμή που θα γίνει αποδεκτό το τμήμα του κώδικά σας (patch), θα το συγχωνέυσουν (merge) στον κύριο κλάδο (master branch) για εσάς. Θα προτιμούσαν, πρίντοκάνουν αυτό να έχετε συμπτύξει τις αλλαγές σας σε ένα μοναδικό commit, ώστε να μπορεί εύκολα να παρακολουθήσει κανείς τις συνεισφορές σας.</p> +<p>Το πρόσωπο που θα συγχωνέυσει το commit (συνήθως αυτός που έκανετονέλεγχο) θα εισαγάγει ένα <code>r=</code> flag στα σχόλια του commitτης συγχώνευσης.</p> +<h2 id="Επιλογές_Make">Επιλογές Make</h2> +<p>Υπάρχουν πολλές μή τεκμηριωμένες και μή υποστηριζόμενες μεταβλητές περιβάλλοντος στο Makefile. Μην βασίζεστε σε αυτές καθώς μπορεί να αφαιρεθούν στο μέλλον.</p> +<h3 id="Προεπιλογή">Προεπιλογή</h3> +<pre>make</pre> +<p>Δημιουργήστε ένα προφίλ για πακεταρισμένες εφαρμογές, με δυνατότητα εκκίνησης από το Desktop του B2G και οι οποίες μπορούν να προωθηθούν σε συσκευή.</p> +<h3 id="Debug_make">Debug make</h3> +<pre>DEBUG=1 make</pre> +<p>Το μέρος <code>DEBUG</code> εκτελεί το Gaia ως φιλοξενούμενη εφαρμογή σε ένα ενσωματωμένο web server, σε αντίθεση με τις κατά προεπιλογή πακεταρισμένες εφαρμογές οι οποίες πρέπει να επαναπακεταριστούν μετά από κάθε αλλαγή. Εκκινήστε το προφίλ με την πιό πρόσφατη Firefox Nightly η οποία θα σας δώσει χρήσιμα panels, ειδικά για το B2G στα Firefox Developer Tools.</p> +<h3 id="Προώθηση_σε_συσκευή">Προώθηση σε συσκευή</h3> +<pre>make install-gaia + +make reset-gaia</pre> +<p>Με το setup <code>adb</code> (Android Debug Bridge), οι παραπάνω εντολές θα προωθήσουν το Gaia στη συσκευή. Η <code>reset-gaia</code> θα εκκαθαρίσει το προφίλ και όλες τις άλλες webapps πριν προωθήσει το νέο αντίγραφο του Gaia.</p> +<h3 id="Επιλεκτική_εκδοχή_(build)">Επιλεκτική εκδοχή (build)</h3> +<pre>APP=system make + +APP=system make install-gaia</pre> +<p>Με ένα ήδη υπάρχον προφίλ, το <code>APP</code> επιτρέπει την επιλογή της εφαρμογής που θα επαναπακεταριστεί, αντί να επαναπακεταριστούν και επαναπροωθηθούν όλες οι εφαρμογές Gaia.</p> +<h3 id="Εικόνες_υψηλής_ανάλυσης">Εικόνες υψηλής ανάλυσης</h3> +<pre>GAIA_DEV_PIXELS_PER_PX=1.5 make</pre> +<p>Κατά το πακετάρισμα της εφαρμογής, να αντικατασταθούν οι εικόνες με τις αντίστοιχες <code>*@1.5x.(gif|jpg|png)</code> αν αυτές υπάρχουν.</p> +<p>Το Gaia αυτή την στιγμήστοχεύει μόνο στις μορφές HBGA (320x240), qHD (540×960) και WVGA (480×800), χρησιμοποιήστε το GAIA_DEV_PIXELS_PER_PX για να σιγουρευθείτε ότι οι εικόνες εμφανίζονται σωστά σε συσκευές qHD και WVGA. Δείτε το <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag#A_pixel_is_not_a_pixel" title="https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag#A_pixel_is_not_a_pixel">A pixel is not a pixel</a> για περισσότερες πληροφορίες σχετικά με τη διαφορά ανάμεσα σε pixels css και αυτά των φυσικών συσκευών.</p> +<h3 id="Συμπίεση_και_βελτιστοποίηση_Script">Συμπίεση και βελτιστοποίηση Script</h3> +<pre>GAIA_OPTIMIZE=1 make</pre> +<p>Συμπιέστε και βελτιστοποιήστε τον κώδικα javascript των προεγκατεστημένων εφαρμογών για να βελτιώσετε χρόνο εκκίνησης.</p> +<h3 id="Συντομεύσεις_προτιμήσεων">Συντομεύσεις προτιμήσεων</h3> +<pre>NOFTU=1 +</pre> +<p>Απενεργοποίηση της εμφάνισης του οδηγού για νέους χρήστεςκατά την πρώτη χρήση.</p> +<pre>REMOTE_DEBUGGER=1</pre> +<p>Ενεργοποίησης της αποσφαλμάτωσης με το εργαλείο adb</p> +<pre>DEVICE_DEBUG=1</pre> +<p>Για τις εκδόσεις > 1.2 του OS, ελέγχει την χρήση αποσφαλμάτωσης webapp του FirefoxOS με τον Διαχειριστή Εφαρμογών (App Manager)</p> +<h3 id="Εκδοχή_διανομής_και_εμπορικής_τροποποίησης">Εκδοχή διανομής και εμπορικής τροποποίησης</h3> +<pre>GAIA_DISTRIBUTION_DIR=./dir</pre> +<p>Διαβάστε το <a href="https://wiki.mozilla.org/B2G/MarketCustomizations" title="https://wiki.mozilla.org/B2G/MarketCustomizations">Customization Overview</a> για περισσότερες πληροφορίες.</p> +<h2 id="Επικοινωνία_με_την_ομάδα">Επικοινωνία με την ομάδα</h2> +<ul> + <li><a href="https://lists.mozilla.org/listinfo/dev-gaia" rel="nofollow">Mailing List του Gaia</a></li> + <li>Κανάλι IRC #gaia στο irc.mozilla.org</li> +</ul> diff --git a/files/el/archive/b2g_os/platform/gaia/index.html b/files/el/archive/b2g_os/platform/gaia/index.html new file mode 100644 index 0000000000..9fcfc619f0 --- /dev/null +++ b/files/el/archive/b2g_os/platform/gaia/index.html @@ -0,0 +1,75 @@ +--- +title: Gaia +slug: Archive/B2G_OS/Platform/Gaia +tags: + - B2G + - Gaia + - Mobile + - NeedsTranslation + - TopicStub +translation_of: Archive/B2G_OS/Platform/Gaia +--- +<p>Gaia is the user interface level of <a href="/en-US/docs/Mozilla/Firefox_OS" title="Mozilla/Firefox_OS">Firefox OS</a>. Everything that appears on the screen after Firefox OS starts up is drawn by Gaia, including the lock screen, home screen, dialer, and other applications. Gaia is written entirely in <a href="/en-US/docs/en-US/HTML" title="HTML">HTML</a>, <a href="/en-US/docs/CSS" title="CSS">CSS</a>, and <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>. Its only interface to the underlying operating system and hardware is through standard Web APIs, which are implemented by <a href="/en-US/docs/Gecko" title="Gecko">Gecko</a>.</p> +<p>Because of this design, Gaia can not only be run on Firefox OS devices, but on other operating systems and in other web browsers (albeit with potentially degraded functionality depending on the capabilities of the browser).</p> +<p>Third party applications onto the device installed alongside Gaia can be launched by Gaia.</p> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation" name="Documentation">Documentation about Gaia</h2> + <dl> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia/Introduction_to_Gaia" title="Mozilla/Boot_to_Gecko/Introduction to Gaia">Introduction to Gaia</a></dt> + <dd> + Gaia is the user interface application for Firefox OS devices; it's simply a Web application running atop the Firefox OS software stack. This guide introduces Gaia at a high level.</dd> + <dt> + <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia/Gaia_apps">Gaia apps</a></dt> + <dd> + Information on each of the default apps available in the Gaia family, including tips on how to use them, and how to modify them.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia/Hacking" title="Mozilla/Boot_to_Gecko/Gaia hacking guide">Gaia hacking guide</a></dt> + <dd> + A guide to hacking and modifying the Gaia interface.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia/Build_System_Primer" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia/Build_System_Primer">Gaia Build System Primer</a></dt> + <dd> + Most of the meaningful work for the build steps are performed by the scripts that live inside the build/ subdirectory of Gaia.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia/Hacking_Tips_And_FAQ" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia/Hacking_Tips_And_FAQ">Gaia Hacking Tips And FAQ</a></dt> + <dd> + A list of helpful tips and frequently asked questions around hacking on Gaia.</dd> + </dl> + <p><span class="alllinks"><a href="/en-US/docs/tag/Gaia" title="tag/B2G">View All...</a></span></p> + </td> + <td> + <h2 class="Community" id="Community" name="Community">Getting help from the community</h2> + <p>If you're working with Gaia, or developing Gaia applications, there are community resources to help you!</p> + <ul> + <li>Consult the Boot to Gecko project forum: {{ DiscussionList("dev-gaia", "mozilla.dev.gaia") }}</li> + </ul> + <ul> + <li>Ask your question on Mozilla's Gaia IRC channel: <a href="irc://irc.mozilla.org/gaia" title="irc://irc.mozilla.org/gaia">#gaia</a></li> + </ul> + <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Don't forget about the <em>netiquette</em>...</a></span></p> + <br> + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related topics</h2> + <ul> + <li><a href="/en-US/docs/Mobile" title="Mobile">Mobile</a></li> + <li><a href="/en-US/docs/Web" title="/en-US/docs/Web">Web Technology for developer</a> + <ul> + <li><a href="/en-US/docs/HTML" title="HTML">HTML</a></li> + <li><a href="/en-US/docs/CSS" title="CSS">CSS</a></li> + <li><a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a></li> + </ul> + </li> + <li><a href="/en-US/docs/WebAPI" title="/en-US/docs/WebAPI">WebAPI</a></li> + </ul> + <h2 class="Tools" id="Resources" name="Resources">Resources</h2> + <ul> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Architecture" title="Mozilla/Firefox_OS/Architecture">Firefox OS architecture overview</a></li> + </ul> + </td> + </tr> + </tbody> +</table> +<p> </p> diff --git a/files/el/archive/b2g_os/platform/index.html b/files/el/archive/b2g_os/platform/index.html new file mode 100644 index 0000000000..5708ef1ee5 --- /dev/null +++ b/files/el/archive/b2g_os/platform/index.html @@ -0,0 +1,82 @@ +--- +title: The Firefox OS platform +slug: Archive/B2G_OS/Platform +tags: + - B2G + - Firefox OS + - Landing + - NeedsTranslation + - TopicStub +translation_of: Archive/B2G_OS/Platform +--- +<p>The Firefox OS platform consists of many components. While you don't need to understand its architecture in order to build applications that run on Firefox OS, if you're working on developing or porting the platform—or are simply curious—the following documentation may be of interest to you.</p> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation" name="Documentation">Documentation about the Firefox OS platform</h2> + <dl> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia">Gaia</a></dt> + <dd> + Documentation about Gaia, the user interface application for Firefox OS devices; this is a Web application running atop the Firefox OS software stack.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gonk" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Gonk">Gonk</a></dt> + <dd> + Documentation about Gonk, the operating system layer underneath Gaia. This consists of a Linux kernel and a hardware abstraction layer to which Gecko communicates.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Gecko" title="/en-US/docs/Mozilla/Gecko">Gecko</a></dt> + <dd> + Gecko is the layer of Firefox OS that provides the same open web standards implementation used by Firefox and Thunderbird, as well as many other applications.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Security" title="/en-US/docs/Mozilla/Firefox_OS/Security"> Security</a></dt> + <dd> + Documentation about security in Firefox OS; this includes topics about security devices from every perspective: for app developers, device integrators, and so forth.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Feature_support_chart" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Feature_support_chart">Feature support chart</a></dt> + <dd> + A chart of which features are available in which types of Firefox OS builds.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Architecture" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Architecture">Firefox OS architecture overview</a></dt> + <dd> + An overview of how Firefox OS is structured internally; this is primarily of interest to platform developers and people doing porting work.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Apps_architecture" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Apps_architecture">Firefox OS apps architecture</a></dt> + <dd> + An overview of the application model on Firefox OS.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Settings_list" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Settings_list">Firefox OS settings list</a></dt> + <dd> + A list of common setting names that can be used with the <a href="/en-US/docs/WebAPI/Settings" title="/en-US/docs/WebAPI/Settings">Settings</a> API.</dd> + </dl> + <p><span class="alllinks"><a href="/en-US/docs/tag/B2G" title="/en-US/docs/tag/B2G">View All...</a></span></p> + </td> + <td> + <h2 class="Community" id="Community" name="Community">Getting help from the community</h2> + <p>If you're working with Firefox OS, or developing applications you'd like to run on Firefox OS devices, there are community resources to help you!</p> + <ul> + <li>Consult the Boot to Gecko project forum: {{ DiscussionList("dev-b2g", "mozilla.dev.b2g") }}</li> + </ul> + <ul> + <li>Ask your question on Mozilla's Boot to Gecko IRC channel: <a class="link-irc" href="irc://irc.mozilla.org/b2g" title="irc://irc.mozilla.org/b2g">#b2g</a></li> + </ul> + <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Don't forget about the <em>netiquette</em>...</a></span></p> + <br> + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related topics</h2> + <ul> + <li><a href="/en-US/docs/Mobile" title="en-US/docs/Mobile">Mobile</a></li> + <li><a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a></li> + <li><a href="/en-US/docs/CSS" title="en-US/docs/CSS">CSS</a></li> + <li><a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a></li> + </ul> + <h2 class="Tools" id="Resources">Resources</h2> + <ul> + <li><a class="link-https" href="https://wiki.mozilla.org/B2G/FAQ" title="B2G/FAQ">Mozilla wiki FAQ</a></li> + <li><a class="link-https" href="https://wiki.mozilla.org/B2G/Schedule_Roadmap" title="https://wiki.mozilla.org/B2G/Schedule_Roadmap">Roadmap</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Feature_support_chart" title="/en-US/docs/Mozilla/Firefox_OS/Feature_support_chart">Feature support chart</a></li> + </ul> + </td> + </tr> + </tbody> +</table> +<p> </p> diff --git a/files/el/archive/b2g_os/ασφάλεια/index.html b/files/el/archive/b2g_os/ασφάλεια/index.html new file mode 100644 index 0000000000..cd9e24e393 --- /dev/null +++ b/files/el/archive/b2g_os/ασφάλεια/index.html @@ -0,0 +1,59 @@ +--- +title: Ασφάλεια του Firefox OS +slug: Archive/B2G_OS/Ασφάλεια +translation_of: Archive/B2G_OS/Security +--- +<p>Τα ακόλουθα άρθρα καλύπτουν θέματα σχετικά με την ασφάλεια για το Firefox OS. Αυτό περιλαμβάνει γενικά τα χαρακτηριστικά ασφαλείας καθώς και την ασφάλεια των εφαρμογών και το πως η διαδικασία εγκατάστασης διατηρείται ασφαλής.</p> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation" name="Documentation">Τεκμηρίωση ασφαλείας του Firefox OS</h2> + <dl> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Security/Security_model" title="/en-US/docs/Mozilla/Firefox_OS/Security/Security_model"> Το πρότυπο ασφαλείας του Firefox OS</a></dt> + <dd> + Μια επισκόπηση του πρότυπου ασφαλείας του OS security.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Security/System_security" title="/en-US/docs/Mozilla/Firefox_OS/Security/Security_model">Ασφάλεια συστήματος</a></dt> + <dd> + Λεπτομέρειες για την ασφάλεια του FirefoxOS.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Security/Application_security" title="/en-US/docs/Mozilla/Firefox_OS/Security/Application_security">Ασφάλεια εφαρμογών στο Firefox OS</a></dt> + <dd> + Μια επισκόπηση του πως οι εφαρμογές γίνονται ασφαλείς στο Firefox OS.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Security/Installing_and_updating_applications" title="/en-US/docs/Mozilla/Firefox_OS/Security/Installing_and_updating_applications">Εγκαθιστώντας και ενημερώνοντας εφαρμογές με ασφάλεια</a></dt> + <dd> + Πως το Firefox OS εγκαθιστά και ενημερώνει τις εφαρμογές με ασφάλεια.</dd> + <dt> + <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Security/Debugging_and_security_testing" title="/en-US/docs/Mozilla/Firefox_OS/Security/Debugging_and_security_testing#Marionette.3A_A_JavaScript_debugging_shell_for_Firefox_OS">Αποσφαλμάτωση και δοκιμή ασφαλείας με το Firefox OS</a></dt> + <dd> + Αυτός ο οδηγός σας δείχνει τα βασικά βήματα δοκιμής ασφαλείας, από το άνοιγμα ενός απομακρυσμένου <span style="line-height: 1.5;">debugger </span><span style="line-height: 1.5;">JavaScript εώς και τη ρύθμιση ενός </span><span style="line-height: 1.5;">proxy παρακολούθησης </span><span style="line-height: 1.5;">HTTP(S) ενάντια σε μια έκδοση για υπολογιστές του Firefox OS.</span></dd> + </dl> + <p><span class="alllinks"><a href="/en-US/docs/tag/B2G" title="/en-US/docs/tag/B2G">Προβολή Όλων...</a></span></p> + </td> + <td> + <h2 class="Community" id="Community" name="Community">Λαμβάνοντας βοήθεια από την κοινότητα</h2> + <p>Εάν δουλεύετε με το Firefox OS, ή προγραμματίζετε εφαρμογές που θα θέλατε να "τρέξετε" σε συσκευές με Firefox OS devices, υπάρχει η κοινότητα για να σας βοηθήσει!</p> + <ul> + <li>Συμβουλευτείτε το φόρουμ του project Boot to Gecko: {{ DiscussionList("dev-b2g", "mozilla.dev.b2g") }}</li> + </ul> + <ul> + <li>Κάντε την ερώτησή σας στο κανάλι IRC του Boot to Gecko της Mozilla: <a class="link-irc" href="irc://irc.mozilla.org/b2g" title="irc://irc.mozilla.org/b2g">#b2g</a></li> + </ul> + <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Μην ξαχνάτε το <em>netiquette</em>...</a></span></p> + <br> + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Σχετικά θέματα</h2> + <ul> + <li><a href="/en-US/docs/Mobile" title="en-US/docs/Mobile">Κινητά</a></li> + <li><a href="/en-US/docs/Security" title="/en-US/docs/Security">Ασφάλεια</a></li> + </ul> + </td> + </tr> + </tbody> +</table> +<p> </p> +<div id="cke_pastebin" style="position: absolute; top: 483px; width: 1px; height: 1px; overflow: hidden; left: -1000px;"> + <br> + Firefox OS</div> diff --git a/files/el/archive/b2g_os/εγκατάσταση_σε_κινητή_συσκευή/index.html b/files/el/archive/b2g_os/εγκατάσταση_σε_κινητή_συσκευή/index.html new file mode 100644 index 0000000000..451a278ec9 --- /dev/null +++ b/files/el/archive/b2g_os/εγκατάσταση_σε_κινητή_συσκευή/index.html @@ -0,0 +1,63 @@ +--- +title: Εγκαθιστώντας το firefox OS σε μία κινητή συσκευή +slug: Archive/B2G_OS/Εγκατάσταση_σε_κινητή_συσκευή +translation_of: Archive/B2G_OS/Installing_on_a_mobile_device +--- +<div class="warning"> + <p><strong>Προσοχή: </strong>Αυτή είναι μία ημιτελής μετάφραση</p> +</div> +<p>Μόλις χτίσετε το Boot to Gecko για μια κινητή συσκευή, μπορείτε να το εγκαταστήσετε. Αυτό το άρθρο θα σας οδηγήσει στην διαδικασία.</p> +<div class="note"> + <strong>Σημείωση:</strong> Την πρώτη φορά που θα φλασάρετε το κινητό σας, <strong>πρέπει</strong> να έχει εγκατεστημένο το Android 4 (Ice Cream Sandwich)</div> +<h2 id="Flashing_your_phone">Flashing your phone</h2> +<p>To flash everything to your phone, simply connect your phone and type:</p> +<pre>./flash.sh +</pre> +<p>That's it. The B2G you've currently got built will flash onto your device.</p> +<h3 id="Configuring_the_udev_rule_for_your_device">Configuring the udev rule for your device</h3> +<p>On Linux, if you get this,</p> +<pre>< waiting for device ></pre> +<p>that probably means that you haven't added a udev rule for the fastboot device, which is not the same as the one for adb. You can get the USB vendor ID by running <code>lsusb</code> now, but typically it's Google's: 18d1, so adding this line in your <code>/etc/udev/rules.d/51-android.rules</code> would work:</p> +<pre>SUBSYSTEM=="usb", ATTR{idVendor}=="18d1", MODE="0666", GROUP="plugdev"</pre> +<div class="note"> + <strong>Note:</strong> If you get a very helpful <code>libusb</code> error "-3" on Linux, it means you need to be root to have the needed access to the USB device. Run the script again using <code>sudo</code>.</div> +<div class="note"> + <strong>Note 2</strong>: If you have a Unagi phone, you need two lines like this - one for the original phone vendor's ID, and one for Google's.</div> +<h3 id="Special_notes_for_the_Samsung_Galaxy_S2">Special notes for the Samsung Galaxy S2</h3> +<p>If your phone is a Galaxy S2 and you are using heimdall 1.3.2 (the latest version; use <code>heimdall version</code> to check), you may see an alarming error "FACTORYFS upload failed!" followed by "Heimdall flashing failed" and some additional information. This is actually a success condition, and you can ignore the advice.</p> +<p>To get rid of this strange behavior, grab a <a class="link-https" href="https://github.com/Benjamin-Dobell/Heimdall" title="https://github.com/Benjamin-Dobell/Heimdall">source copy</a> of heimdall, downgrading to the 1.3.1 release ("<code>git checkout fbbed42c1e5719cc7a4dceeba098981f19f37c06</code>"), then compile it according to the <code>README</code>, then install that to make the error go away. However, this isn't strictly necessary.</p> +<p>All versions of heimdall are unable to flash a system.img larger than 100MB. Do:</p> +<pre>ls -l ./out/target/product/galaxys2/system.img +</pre> +<p>to see how big yours is. If it's too large, ask in IRC for advice; there are ways to do it in two stages.</p> +<h2 id="Added_step_for_the_Samsung_Galaxy_S2">Added step for the Samsung Galaxy S2</h2> +<p>If you're flashing onto the Galaxy S2, there is an additional step to follow. Gaia does not get flashed automatically by the <code>flash.sh</code> script; you'll need to also do:</p> +<pre>./flash.sh gaia +</pre> +<h2 id="Flashing_specific_partitions_to_fastboot_phones">Flashing specific partitions to fastboot phones</h2> +<p>You can flash specific partitions to fastboot phones (that is, any phone other than the Samsung Galaxy S2). For example:</p> +<pre>./flash.sh system +./flash.sh boot +./flash.sh user +</pre> +<h2 id="Updating_specific_modules">Updating specific modules</h2> +<p>You can update specific components of B2G by specifying their names when flashing. For example:</p> +<pre>./flash.sh gaia +./flash.sh gecko +</pre> +<p>In order to update only one application you can use BUILD_APP_NAME environment variable:</p> +<pre>BUILD_APP_NAME=calendar ./flash.sh gaia</pre> +<h2 id="Next_steps">Next steps</h2> +<p>At this point, your phone should be running Boot to Gecko! It's time to experiment, <a href="/en/Mozilla/Boot_to_Gecko/Writing_apps_for_Boot_to_Gecko" title="en/Mozilla/Boot_to_Gecko/Writing_apps_for_Boot_to_Gecko">write some code</a>, <a href="/en/Mozilla/Boot_to_Gecko/Testing_Boot_to_Gecko" title="en/Mozilla/Boot_to_Gecko/Testing_Boot_to_Gecko">test</a>, or <a href="/en/Mozilla/Boot_to_Gecko/Debugging_on_Boot_to_Gecko" title="en/Mozilla/Boot_to_Gecko/Debugging_on_Boot_to_Gecko">do some debugging</a>!</p> +<div class="note"> + <strong>Note:</strong> A helpful usage tip: if your build of B2G starts up with the lock screen requesting a pass code to unlock the phone, the default code is 0000.</div> +<h2 class="note" id="Troubleshooting">Troubleshooting</h2> +<p>Here are a some tips for what to do if your device doesn't work right after installing B2G, or updating it to a new version</p> +<h3 class="note" id="If_the_UI_doesnt_start_up">If the UI doesn't start up</h3> +<p>If you update your phone and the user interface doesn't start up, you can reset it to clear out out-of-date configuration and the like. This may bring it back to life. Here's how:</p> +<pre>cd gaia +make reset-gaia +</pre> +<h3 class="note" id="image_is_too_large_error_message_on_.flash.sh_execution">"image is too large" error message on ./flash.sh execution</h3> +<p>It might mean that you phone needs to be rooted first before flashing it. As b2g needs to be written on root partition, your phone needs to be rooted in order to install it.</p> +<p> </p> diff --git a/files/el/archive/b2g_os/επιλέγοντας_πως_να_εκτελέσετε_το_gaia_ή_το_b2g/index.html b/files/el/archive/b2g_os/επιλέγοντας_πως_να_εκτελέσετε_το_gaia_ή_το_b2g/index.html new file mode 100644 index 0000000000..334e38c8df --- /dev/null +++ b/files/el/archive/b2g_os/επιλέγοντας_πως_να_εκτελέσετε_το_gaia_ή_το_b2g/index.html @@ -0,0 +1,58 @@ +--- +title: Επιλέγοντας πως να εκτελέσετε το Gaia ή το B2G +slug: Archive/B2G_OS/Επιλέγοντας_πως_να_εκτελέσετε_το_Gaia_ή_το_B2G +translation_of: Archive/B2G_OS/Choosing_how_to_run_Gaia_or_B2G +--- +<p>{ B2GMain() }}</p> +<p>Ανάλογα με τις συγκεκριμένες σας ανάγκες, έχετε μια ποικιλία επιλογών να σκεφτείτε όταν πειραματίζεστε με το Firefox OS ή τη διεπαφή χρήστη <a href="/en/Mozilla/Boot_to_Gecko/Introduction_to_Gaia" title="en/Mozilla/Boot_to_Gecko/Introduction_to_Gaia">Gaia</a>. Μπορείτε να διαλέξετε ανάμεσα από τις ακόλουθες επιλογές: κάθε μια έχει τα πλεονεκτήματα και τα μειονεκτήματα της για να τα σκεφτείτε ενώ κάποιες είναι πιο ευέλικτες από κάποιες άλλες.</p> +<h2 id="Εκτελώντας_το_B2G_στον_υπολογιστή">Εκτελώντας το B2G στον υπολογιστή</h2> +<p>Είναι δυνατό να έχετε ένα εξομοιωτή του Firefox OS και να εκτελέσετε το Gaia σ' αυτόν. Το λογισμικό αυτό βασίζεται στον Firefox αλλά συμπεριφέρεται πιο πολύ σαν την εμπειρία του Firefox OS σε συσκευή. Αυτό τον καιρό η Mozilla παρέχει <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia/Hacking">nightly εκδόσεις αυτής της εφαρμογής</a> για τους προγραμματιστές. Εάν είστε εξοικειωμένος με την ανάπτυξη του βασικού κώδικα του Firefox ή των C++ projects, μπορείτε να αναπτύξετε αυτή την εφαρμογή μόνος σας.</p> +<h3 id="Πλεονεκτήματα">Πλεονεκτήματα</h3> +<ul> + <li>Ο εξομοιωτής παρέχει προβολή στο μέγεθος ενός κινητού.</li> + <li>Η εμπειρία είναι παρόμοια με αυτή μιας πραγματικής κινητής συσκευής στις περισσότερες περιπτώσεις.</li> + <li>Τα περισσότερα (αλλά όχι όλα) API της συσκευής είναι διαθέσιμα.</li> +</ul> +<h3 id="Μειονεκτήματα">Μειονεκτήματα</h3> +<ul> + <li>Χρειάζεται να έχετε εγκταταστήσει ένα σύστημα βασισμένο σε C/C++.</li> + <li>Χρειάζεται να αναπτύξετε το Gecko και τον εξομοιωτή μόνος σας.</li> + <li>Τα εργαλεία προγραμματιστή του Firefox δεν είναι διαθέσιμα.</li> +</ul> +<h3 id="Γιατί_να_εκτελέσετε_τον_εξομοιωτή_B2G">Γιατί να εκτελέσετε τον εξομοιωτή B2G</h3> +<p>This is a good middle-of-the-road testing and development solution. It's a good way to get a better feel for how your app or other code will work in a device-like environment without actually having to flash a phone every time you want to test something.</p> +<div class="note"> + <strong>Note:</strong> Before shipping an app, you will absolutely want to test on real hardware!</div> +<h3 class="note" id="Simulator_varieties">Simulator varieties</h3> +<p>There are several varieties of the Firefox OS Simulator available:</p> +<dl> + <dt> + <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Using_Firefox_OS_Simulator" title="/en-US/docs/Mozilla/Boot_to_Gecko/Using_Firefox_OS_Simulator">Firefox OS Simulator add-on</a></dt> + <dd> + This extension is the primary tool for testing apps running on Firefox OS, and is the recommended solution for most users. It includes support for developer tools, adding apps to the test environment, and so forth.</dd> + <dt> + Developer desktop builds</dt> + <dd> + These builds of the simulator are stand-alone applications that are primarily intended to help core Firefox OS developers to verify technical features.</dd> + <dt> + Localizer desktop builds</dt> + <dd> + The localizer builds are primarily useful for localization teams to work on and test their localizations of Firefox OS and of Firefox OS apps.</dd> +</dl> +<h2 id="Running_B2G_on_a_mobile_device">Running B2G on a mobile device</h2> +<p>The most thorough way to test your B2G or Gaia development work, or your web app, is to build and install Firefox OS on a real mobile device. This is also the most complicated process.</p> +<h3 id="Advantages">Advantages</h3> +<ul> + <li>You get the full mobile device experience.</li> + <li>All device APIs are available.</li> + <li>You can experience your code's performance in real device usage.</li> +</ul> +<h3 id="Disadvantages">Disadvantages</h3> +<ul> + <li>You need a full C/C++ build system installed.</li> + <li>You need to build Gecko and Gaia yourself.</li> + <li>You need a compatible mobile device on which to install the B2G operating system.</li> + <li>You need to flash the device with B2G, removing whatever operating system is currently installed.</li> +</ul> +<h3 id="Why_to_run_B2G_on_a_mobile_device">Why to run B2G on a mobile device</h3> +<p>This is, obviously, the most accurate way to test any code or web project on B2G or Gaia. By running on actual mobile hardware, you can ensure that your project performs well and looks good, and uses all device APIs correctly. In addition, you should <strong>always</strong> test on real hardware before shipping any code; failing to do so can have unfortunate effects that can be hard to predict.</p> diff --git a/files/el/archive/b2g_os/χρησιμοποιώντας_τον_διαχειριστή_εφαρμογών/index.html b/files/el/archive/b2g_os/χρησιμοποιώντας_τον_διαχειριστή_εφαρμογών/index.html new file mode 100644 index 0000000000..7a8fb976fe --- /dev/null +++ b/files/el/archive/b2g_os/χρησιμοποιώντας_τον_διαχειριστή_εφαρμογών/index.html @@ -0,0 +1,257 @@ +--- +title: Χρησιμοποιώντας τον Διαχειριστή Εφαρμογών +slug: Archive/B2G_OS/Χρησιμοποιώντας_τον_Διαχειριστή_Εφαρμογών +translation_of: Archive/B2G_OS/Using_the_App_Manager +--- +<div class="summary"> +<p>Ο Διαχειριστής Εφαρμογών είναι ένα νέο εργαλείο διαθέσιμο στον Firefox για Υπολογιστές, το οποίο παρέχει έναν αριθμό χρήσιμων εργαλείων για να σας βοηθήσουν να δοκιμάσετε, να αναπτύξετε και να αποσφαλματώσετε εφαρμογές ιστού HTML5 σε τηλέφωνα Firefox OS και το Firefox OS Simulator, κατ' ευθείαν από τον περιηγητή σας.</p> + +<p>Ο Διαχειριστής Εφαρμογών είναι για προγραμματιστές που σκοπεύουν το Firefox OS 1.2 ή νεότερο. Αν αποσφαλματώνετε εφαρμογές για το Firefox OS 1.1, τότε θα πρέπει να ελέγξετε τα έγγραφα για το <a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator">Firefox OS 1.1 Simulator</a>.</p> +</div> + +<p style="text-align: center;">{{EmbedYouTube("z1Bxg1UJVf0")}}</p> + +<p>The App Manager is composed of:</p> + +<ul> + <li>An <a href="#Apps_panel"><em>Apps panel</em></a>, which manages local apps (app source code located on your computer) and apps hosted externally, allowing you to package and install them on your device or simulator, and debug them using Toolboxes</li> + <li>A <a href="#Device_panel"><em>Device panel</em></a>, which displays information about the connected device including Firefox OS version installed, permissions required for using device APIs on the device, and apps installed</li> + <li><a href="/en-US/docs/Tools_Toolbox"><em>Toolboxes</em></a>, which are are sets of developer tools (web console, inspector, debugger, etc.) that can be connected to a running app via the Apps panel to perform debugging operations</li> +</ul> + +<h2 id="Quick_setup"><a name="Configuring_device">Quick setup:</a></h2> + +<p>This section is designed to get you up and running as soon as possible; if you need some more detail please skip forward to the {{ anch("Device and system configuration") }} section and start reading from there. Also see the {{ anch("Troubleshooting") }} section for help if you are having trouble.</p> + +<ol> + <li>Make sure you have Firefox Desktop 26+ installed</li> + <li>Open the App Manager (in the URL bar, type <code>about:app-manager</code>)</li> + <li>If you don't have a real device: + <ol> + <li><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/">Install the Firefox OS Simulator</a></li> + <li>In App Manager's bottom toolbar, click on <em>Start Simulator</em>, then click on the name of the installed simulator, which should appear there.</li> + </ol> + </li> + <li>If you have a real device: + <ol> + <li>Make sure your device is running Firefox OS 1.2+</li> + <li>On Windows, make sure to install the drivers provided by your phone manufacturer</li> + <li>In the Settings of your device, disable Screen Lock (<code>Settings > <code>Screen Lock</code></code>) and enable Remote Debugging (<code>Settings > Device information > More information > Developer</code>)</li> + <li><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/">Install the ADB Helper</a> add-on in Firefox Desktop</li> + <li>Connect your device to your machine via a USB cable</li> + <li>You should see the name of your device in the App Manager's bottom bar. Click on it.</li> + </ol> + </li> + <li>The bottom bar should show "Connected to: xxx"</li> + <li>Click on the <em>Apps</em> panel and add an app (packaged or hosted)</li> + <li>The <em>Refresh</em> button validates your app and installs it on the Simulator/Device</li> + <li>The <em>Debug</em> button connects the developer tools to the running app</li> + <li><strong>See the {{ anch("Troubleshooting") }} section for help if you are having trouble</strong></li> +</ol> + +<h2 id="Device_and_system_configuration">Device and system configuration</h2> + +<p>The first thing you'll need to do when using the App Manager is make sure your system and phone are set up correctly. This section will run through all the steps required.</p> + +<h3 id="Firefox_1.2_required">Firefox 1.2+ required</h3> + +<p>Make sure your device is running Firefox OS 1.2/Boot2Gecko 1.2 or higher. To check which version of Firefox OS the device is runing, go to <code>Settings > Device Information > Software</code>.</p> + +<p>If you don't have a high enough version installed, depending on what phone you have you will need to either install an available nightly build of Firefox 1.2+, or configure and build it yourself from source.</p> + +<p>Builds available:</p> + +<ul> + <li><a href="http://downloads.geeksphone.com/">Geeksphone Keon/Peak builds</a> (to find out more about using these, read <a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide/Updating_and_Tweaking_Geeksphone">Updating and Tweaking your Firefox OS Developer Preview phone/Geeksphone</a>)</li> + <li>More to follow</li> +</ul> + +<p>To build your own Firefox OS 1.2+ distribution, follow the instructions located at <a href="/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS">Building and installing Firefox OS</a>, starting with <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites">Firefox OS build prerequisites</a>.</p> + +<h3 id="Remote_debugging">Remote debugging</h3> + +<p>Next, you need to enable remote debugging in Firefox OS. To do so, go to <code>Settings > Device information > More information > Developer</code> and check the Remote Debugging checkbox.</p> + +<h3 id="Adb_Helper_Add-on" name="Adb_Helper_Add-on">ADB or ADB helper</h3> + +<p>The process uses the Android Debug Bridge (ADB) to handle the device-computer connection and communication. There are two options for running ADB:</p> + +<ul> + <li> + <p>Let Firefox handle ADB (recommended). <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/">Install the ADB Helper add-on</a>, which makes the process easier. With this installed, there's no need to install the ADB, and no need to type the <code>adb forward</code> command: everything is handled by the add-on.</p> + <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/" style="margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;" title="https://addons.mozilla.org"> Λήψη Προσθέτου ADB Helper</a> </li> + <li>Use ADB manually. You need to have it installed on your computer: download and install <code>adb</code> as explained in <a href="/en-US/Firefox_OS/Debugging/Installing_ADB">Installing ADB</a>. You'll need to enable port forwarding by entering the following command into your terminal: + <pre>adb forward tcp:6000 localfilesystem:/data/local/debugger-socket</pre> + Note that you'll need to do this every time the phone is restarted or unplugged then re-plugged.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: There's no need to run this command if you installed the ADB Helper Add-on.</p> +</div> + +<h2 id="Connecting_your_device_to_the_App_Manager">Connecting your device to the App Manager</h2> + +<p>With all your configuration done, it's now time to plug your device into your computer and start the App Manager:</p> + +<ol> + <li>Plug the device into your computer via USB.</li> + <li>Disable Screen lock on your device by going to <code>Settings > Screen Lock</code> and unchecking the <code>Lock Screen</code> checkbox. This is a good idea because when the screen gets locked, the phone connection gets lost, meaning it is no longer available for debugging.</li> + <li>Start the App Manager — In Firefox Desktop select the <code>Tools > Web Developer > App Manager</code> menu option, or type <code>about:app-manager</code> in the URL bar.</li> + <li>At the bottom of the App Manager tab, you will see a connection status bar (see screenshot below). You should be able to connect your device by clicking the "Connect to localhost:6000" button.</li> + <li>If this works successfully, a prompt should appear on your device: "An incoming request to permit remote debugging connection was detected. Allow connection?". Tap the OK button (You may also have to press the power button on the phone so you can see the prompt.) The connection status bar should update to say "Connected to B2G", with a Disconnect button available to press if you want to cancel the connection.</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6263/connection-status.png" style="width: 600px; height: 30px; display: block; margin: 0px auto;"></p> + +<div class="note"> +<p><strong>Note</strong>: The other controls in the connection status bar allow you to connect a simulator to the App Manager, which we cover in the next section, below, and change the port that the connection happens on. If you change the port, you'll also need to enable port forwarding for this port as well, as instructed in the {{anch("Enable port forwarding")}} section, above.</p> +</div> + +<h2 id="Using_a_Firefox_OS_Simulator_Add-on"><a name="Simulator">Using a Firefox OS Simulator Add-on</a></h2> + +<p>If you haven't got a real device available to use with App Manager, you can still try it out using a <a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> Add-on. To start off, install the simulator with the following button (multiple versions are available; you are advised to install them all, for maximum flexibility):</p> + +<p><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/" style="margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Install Simulator</a></p> + +<p>Once you've installed the simulator(s), you need to go to about:app-manager to see the connection status bar at the bottom of the App Manager tab, and click the "Start simulator" button. At least three buttons will appear:</p> + +<ul> + <li>"Firefox OS 1.3", "Firefox OS 1.2" ... etc. (or something similar): the leftmost buttons contain the names of the simulator versions you have installed. Click one to start a connection to a simulator.</li> + <li>"Add": the middle button navigates to the simulator install links in this article, so you can add more Simulators (Firefox OS 1.2, Firefox OS 1.3, ...).</li> + <li>"Cancel": the right hand button cancels the connection.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: The Simulator (v 1.2 and 1.3) currently reports an incorrect Gecko user agent string: see {{ Bug("964598") }} for more details.</p> +</div> + +<h2 id="Apps_panel_2"><a name="Apps_panel">Apps panel</a></h2> + +<p>Now everything is working, let's review the functionality available inside the App Manager, starting with the Apps panel. From here, you can import an existing app to push onto your device and debug:</p> + +<ul> + <li>To install a local app, click on the plus next to the "Add Packaged App" label and use the resulting file chooser dialog to select the directory your app is contained inside.</li> + <li>To install an externally hosted app, enter the absolute URL of the app's manifest file into the text field inside the "Add Hosted App" box, then press the plus button.</li> +</ul> + +<p>Information about your app should appear on the right hand side of the window, as seen below:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6261/apps-panel.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p> + +<h3 id="Manifest_editor">Manifest editor</h3> + +<p>From Firefox 28 onwards, the Apps Panel includes an editor for the app manifest:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6613/apps-panel-fx-28.png" style="width: 600px; display: block; margin: 0px auto;"></p> + +<h3 id="Debugging">Debugging</h3> + +<p>Clicking on <em>"Update"</em> will update (install) the app on the device. Clicking on <em>"debug"</em> will connect a toolbox to the app, allowing you to debug its code directly:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6265/debug.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p> + +<div class="note"> +<p>Note: You'll enjoy playing around with the toolbox — try altering the DOM, CSS etc. and you'll see the updates reflected on the device in realtime. Such updates will be saved on the installed app code; you'll see them next time you open the app on the device.</p> +</div> + +<p>Before Firefox 28, the tools are launched in a separate window. From Firefox 28 onwards, the tools are launched in a separate tab in the App Manager itself, alongside the Apps and Device tabs. The tab is given your app's icon so it's easy to find:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6615/toolbox-fx-28.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p> + +<h3 id="Errors">Errors</h3> + +<p>If an app was not added successfully — for example if the URL was incorrect, or you selected a packaged app folder — an entry will be added to the page for this app, but this will include error information.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6259/apps-error.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p> + +<p>You can also delete an app from this view, by hovering over the App name/description on the left of the window, and pressing the "X" button that appears in each case. This however doesn't remove the app from the device. To do that you need to manually remove the app using the device itself.</p> + +<h2 id="Device_panel_2"><a name="Device_panel">Device panel</a></h2> + +<p>The <em>Device</em> tab displays information about the connected device. From the <em>"</em>Installed Apps<em>"</em> window, apps on the device can be started and debugged.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6267/device-tab.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p> + +<div class="note"> +<p>Note: Certified Apps are not listed by default. <a href="#Debugging_Certified_Apps">See how to debug certified apps</a>.</p> +</div> + +<p><a name="permissions"></a>The "Permissions" window shows the required priviledges for different <a href="/en-US/docs/WebAPI">Web APIs</a> on the current device:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6269/permissions.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p> + +<p>Finally, you can take a screenshot of the current device display by clicking the "Screenshot" button. The screenshot appears in a new tab on Firefox, and from there you can save or discard it as you wish.</p> + +<h2 id="Debugging_Certified_Apps_2"><a name="Debugging_Certified_Apps">Debugging Certified Apps</a></h2> + +<p>Currently only devices running a development build of Firefox OS 1.2 are capable of debugging certified apps. If you have a development build, you can enable certified app debugging by changing the pref <code>devtools.debugger.forbid-certified-apps</code> to <code>false</code> in your profile. To do this, follow the steps below:</p> + +<ol> + <li> + <p>On your computer, enter the following command in Terminal/console to enter your device's filesystem via the shell:</p> + + <pre class="brush: bash">adb shell</pre> + + <p>Your prompt should change to <code>root@android</code>.</p> + </li> + <li> + <p>Next, stop B2G running using the following command:</p> + + <pre class="brush: bash">stop b2g</pre> + </li> + <li> + <p>Navigate to the following directory:</p> + + <pre>cd /data/b2g/mozilla/*.default/</pre> + </li> + <li> + <p>Here, update the prefs.js file with the following line:</p> + + <pre class="brush: js">echo 'user_pref("devtools.debugger.forbid-certified-apps", false);' >> prefs.js</pre> + </li> + <li> + <p>After you've finished editing and saving the file, start B2G again using the following command:</p> + + <pre class="brush: bash">start b2g</pre> + </li> + <li> + <p>Exit the android filesystem using the <code>exit</code> command; this will return you to your normal terminal prompt.</p> + </li> + <li> + <p>Next, reconnect to the App Manager and you should see certified apps appear for debugging.</p> + </li> +</ol> + +<div class="note"> +<p>Note: If you want to add this preference to your Gaia build you can run <code>make DEVICE_DEBUG=1 reset-gaia</code>.</p> +</div> + +<h2 id="Running_custom_builds_in_the_App_Manager">Running custom builds in the App Manager</h2> + +<p>You can run custom B2G Desktop and Gaia builds in the App Manager via the simulator. Read <a href="/en-US/Firefox_OS/Running_custom_builds_in_the_App_Manager">Running custom Firefox OS/Gaia builds in the App Manager</a> for more details.</p> + +<h2 id="Troubleshooting_2"><a name="Troubleshooting">Troubleshooting</a></h2> + +<p id="My_device_is_not_recognized">If the device is not recognized:</p> + +<ul> + <li>Read the <a href="#Configuring_device">Device and system configuration</a> section thoroughly, and make sure all the steps are followed:</li> + <li>Is your device running at least Firefox OS 1.2?</li> + <li>Don't see all the apps? Do you need to enable <a href="#Debugging_Certified_Apps">Certified Apps debugging</a>?</li> + <li>Did you enable "Remote Debugging" in the settings of your phone?</li> + <li>If you are not using the <a href="#Adb_Helper_Add-on">ADB Helper add-on</a>: + <ul> + <li>Did you successfully run the <code>adb forward</code> command?</li> + </ul> + </li> + <li>If you are using the <a href="#Adb_Helper_Add-on">ADB Helper add-on</a> and your device is not listed in the bottom toolbar: + <ul> + <li>If you use Linux, <a href="http://developer.android.com/tools/device.html#setting-up">make sure to setup udev correctly</a></li> + <li>If you use Windows, <a href="http://developer.android.com/tools/device.html#setting-up">make sure to install the appropriate drivers</a></li> + </ul> + </li> + <li>See <strong>"???????"</strong> instead of the device name on Linux? You have permissions issues. <a href="http://developer.android.com/tools/device.html#setting-up">Make sure to setup udev correctly</a>.</li> + <li>Is your phone screen unlocked?</li> +</ul> + +<p>Can't connect your device to the App Manager or start the simulator? <a href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication">Let us know</a> or <a href="https://bugzilla.mozilla.org/enter_bug.cgi?alias=&assigned_to=nobody%40mozilla.org&attach_text=&blocked=&bug_file_loc=http%3A%2F%2F&bug_ignored=0&bug_severity=normal&bug_status=NEW&cf_blocking_b2g=---&cf_crash_signature=&cf_status_b2g18=---&cf_status_b2g_1_1_hd=---&cf_status_b2g_1_2=---&cf_status_firefox24=---&cf_status_firefox25=---&cf_status_firefox26=---&cf_status_firefox27=---&cf_status_firefox_esr17=---&cf_status_firefox_esr24=---&cf_tracking_b2g18=---&cf_tracking_firefox24=---&cf_tracking_firefox25=---&cf_tracking_firefox26=---&cf_tracking_firefox27=---&cf_tracking_firefox_esr17=---&cf_tracking_firefox_esr24=---&cf_tracking_firefox_relnote=---&cf_tracking_relnote_b2g=---&comment=&component=Developer%20Tools%3A%20App%20Manager&contenttypeentry=&contenttypemethod=autodetect&contenttypeselection=text%2Fplain&data=&defined_groups=1&dependson=&description=&flag_type-203=X&flag_type-37=X&flag_type-41=X&flag_type-5=X&flag_type-607=X&flag_type-720=X&flag_type-721=X&flag_type-737=X&flag_type-748=X&flag_type-781=X&flag_type-787=X&flag_type-791=X&flag_type-799=X&flag_type-800=X&flag_type-802=X&flag_type-803=X&flag_type-809=X&flag_type-825=X&form_name=enter_bug&keywords=&maketemplate=Remember%20values%20as%20bookmarkable%20template&op_sys=All&priority=--&product=Firefox&qa_contact=developer.tools%40firefox.bugs&rep_platform=x86&requestee_type-203=&requestee_type-41=&requestee_type-5=&requestee_type-607=&requestee_type-748=&requestee_type-781=&requestee_type-787=&requestee_type-791=&requestee_type-800=&short_desc=&status_whiteboard=&target_milestone=---&version=Trunk">file a bug</a>.</p> diff --git a/files/el/archive/index.html b/files/el/archive/index.html new file mode 100644 index 0000000000..987002bd40 --- /dev/null +++ b/files/el/archive/index.html @@ -0,0 +1,20 @@ +--- +title: Archive of obsolete content +slug: Archive +translation_of: Archive +--- +<p>(el translation)</p> + +<p>Here at MDN, we try to avoid outright deleting content that might be useful to people targeting legacy platforms, operating systems, and browsers. Perhaps your target audience is people that are using older hardware, for example, and can't upgrade to the latest and greatest browsers. Or for "reasons," your company is required to use very old software and you need to build Web content that runs on that software. Or perhaps you're just curious about the history of an obsolete feature or API, and how it worked.</p> + +<p>There are many reasons older documentation can be useful. So, we've established this area into which we can archive older documentation. Material in this Archived content zone should <strong>not</strong> be used for building new Web sites or apps for modern browsers. It's here for historical reference only.</p> + +<div class="note"> +<p><strong>Note to writers:</strong> We need to try to keep the subpages here organized instead of all dumped into one large folder. Try to create subtrees for categories of material. Also, only move pages here that are <strong>extremely</strong> obsolete. If anyone might realistically need the information in a living product, it may not be appropriate to move it here. In general, it may be best to discuss it in the <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web Docs chat room </a>before moving content here.</p> +</div> + +<p>{{SubpagesWithSummaries}}</p> + +<h2 id="Subnav">Subnav</h2> + +<p>{{ListSubpages("/en-US/docs/Archive", 2, 0, 1)}}</p> diff --git a/files/el/archive/mozilla/index.html b/files/el/archive/mozilla/index.html new file mode 100644 index 0000000000..6a948509cd --- /dev/null +++ b/files/el/archive/mozilla/index.html @@ -0,0 +1,13 @@ +--- +title: Archived Mozilla and build documentation +slug: Archive/Mozilla +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Mozilla +--- +<p>These articles are archived, obsolete documents about Mozilla, Gecko, and the process of building Mozilla projects.</p> +<dl><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/ActiveX_Control_for_Hosting_Netscape_Plug-ins_in_IE">ActiveX Control for Hosting Netscape Plug-ins in IE</a></dt><dd class="landingPageList">Microsoft has removed support for Netscape plug-ins from IE 5.5 SP 2 and beyond. If you are a plug-in author, you may find this project saves you a lot of work!</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/ant_script_to_assemble_an_extension">ant script to assemble an extension</a></dt><dd class="landingPageList">This ant script helps to <a href="en/Extension_Packaging">package an extension</a></dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/SpiderMonkey">Archived SpiderMonkey docs</a></dt><dd class="landingPageList">This section contains old SpiderMonkey documentation.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Autodial_for_Windows_NT">Autodial for Windows NT</a></dt><dd class="landingPageList">This document is intended to explain how the autodial helper feature implemented for <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=93002" title="FIXED: [distribution]Conn: Auto-dial for NT-based Windows">bug 93002</a> works and why it works that way.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Automated_testing_tips_and_tricks">Automated testing tips and tricks</a></dt><dd class="landingPageList"></dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Automatic_Mozilla_Configurator">Automatic Mozilla Configurator</a></dt><dd class="landingPageList"><a href="/en-US/docs/ankh8">Ankh8</a></dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Automatically_Handle_Failed_Asserts_in_Debug_Builds">Automatically Handle Failed Asserts in Debug Builds</a></dt><dd class="landingPageList">As of 2004-12-8, it is now possible to automatically handle failed asserts in debug builds of Mozilla for Windows.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/BlackConnect">BlackConnect</a></dt><dd class="landingPageList"></dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Blackwood">Blackwood</a></dt><dd class="landingPageList"></dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Bonsai">Bonsai</a></dt><dd class="landingPageList">It is a tool that lets you perform queries on the contents of a CVS archive; you can: get a list of checkins, see what checkins have been made by a given person, or on a given CVS branch, or in a particular time period. It also includes tools for looking at checkin logs (and comments); doing diffs between various versions of a file; and finding out which person is responsible for changing a particular line of code ("cvsblame").</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Bookmark_keywords">Bookmark Keywords</a></dt><dd class="landingPageList">Practically every Web surfer has bookmarks, of course, and power surfers usually have hundreds stuffed into folders within folders. In addition to being handy pointers to useful resources, bookmarks in Mozilla can be used to make the address bar itself a power tool. Searches, lookups, package tracking, and even word definitions can all be retrieved from user-customized bookmarks.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Building_TransforMiiX_standalone">Building TransforMiiX standalone</a></dt><dd class="landingPageList"></dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/callCalendarView">calICalendarView</a></dt><dd class="landingPageList">An object implementing <code>calICalendarView</code> is generally intended to serve as a way of manipulating a set of DOM nodes corresonding to a visual representation of <a href="en/CalIEvent">calIEvent</a> and <a href="en/CalITodo">calITodo</a> objects. Because of this close association between methods and attributes on the one hand, and content on the other, <code>calICalendarView</code> implementations are particularly well suited to XBL. There is, however, no practical obstacle to the interface being implemented by any javascript object associated with a group of DOM nodes, even non-anonymous XUL nodes.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/callCalendarViewController">calICalendarViewController</a></dt><dd class="landingPageList">A <code>calICalendarViewController</code> provides a way for a <a href="en/CalICalendarView">calICalendarView</a> to create, modify, and delete items. Implementing a <code>calICalendarViewController</code> allows for these actions to be performed in a manner consistent with the rest of the application in which the <a href="en/CalICalendarView">calICalendarView</a> is included.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/callFileType">calIFileType</a></dt><dd class="landingPageList">The <code>calIFileType</code> interface provides information about a specific file type.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Chromeless">Chromeless</a></dt><dd class="landingPageList">[This project may not be active — check Github <a href="https://github.com/mozilla/chromeless" title="https://github.com/mozilla/chromeless">https://github.com/mozilla/chromeless</a>]</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Creating_a_Firefox_sidebar_extension">Creating a Firefox sidebar extension</a></dt><dd class="landingPageList">This article describes how to create a registered sidebar for Firefox 2 or greater. See the references section for information on creating extension in earlier browsers.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Creating_a_hybrid_CD">Creating a hybrid CD</a></dt><dd class="landingPageList"></dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Creating_a_microsummary">Creating a Microsummary</a></dt><dd class="landingPageList">A microsummary generator is a set of instructions for creating a microsummary from the content of a page. Web pages can reference generators via <code><link rel="microsummary"></code> elements in their <code><head></code> elements. Generators can also be independently downloaded and installed by users if they include a list of pages to which they apply.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Creating_a_Mozilla_extension">Creating a Mozilla Extension</a></dt><dd class="landingPageList">A Mozilla extension is an installable enhancement to the Mozilla browser that provides additional functionality (for example <a class="external" href="http://linky.mozdev.org/">Linky</a>, which adds an item to the context menu for opening multiple links in a document or selection). This tutorial walks you through the process of building a Mozilla extension that adds an icon to Mozilla's status bar showing the current status of the Mozilla source code (i.e. whether or not the latest version of the code is compiling successfully and passing tests). The extension will access <a class="external" href="http://tinderbox.mozilla.org/">Tinderbox</a>, mozilla.org's webtool for tracking source code status, to get the status of the code.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Creating_a_sking_for_Firefox_Getting_Started">Creating a Skin for Firefox/Getting Started</a></dt><dd class="landingPageList">Download the latest version of Firefox and install it. Be sure to install the DOM Inspector extension as well.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Creating_a_skin_for_Mozilla">Creating a Skin for Mozilla</a></dt><dd class="landingPageList">In order to create a skin for mozilla, you will need to know three things. How to edit images, extract zip files, and how to modify CSS. Mozilla uses standard gif, png, and jpeg images for the buttons and CSS to style everything else in the interface.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Creating_a_Skin_for_SeaMonkey_2.x">Creating a Skin for SeaMonkey 2.x</a></dt><dd class="landingPageList">You're going to make a theme for SeaMonkey 2, but don't know how? I hope this manual will help you.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Creating_regular_expressions_for_a_microsummary_generator">Creating regular expressions for a microsummary generator</a></dt><dd class="landingPageList">A regular expression is a special kind of string (i.e. a sequence of characters) that matches patterns of characters in other strings. Microsummary generators use them to identify the pages that the generators know how to summarize by matching patterns in those pages' URLs.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Dehydra">Dehydra</a></dt><dd class="landingPageList">The development focus switched to <a href="https://wiki.mozilla.org/DXR">DXR</a> (where the "D" comes from "Dehydra"), which is based on clang instead of gcc. Try DXR instead, or else try the gcc python plugin: <a href="https://fedorahosted.org/gcc-python-plugin/" title="https://fedorahosted.org/gcc-python-plugin/">https://fedorahosted.org/gcc-python-plugin/</a>.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Developing_New_Mozilla_Features">Developing New Mozilla Features</a></dt><dd class="landingPageList">Tips For Contributing New Features To Mozilla.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Devmo_launch_roadmap">Devmo 1.0 Launch Roadmap</a></dt><dd class="landingPageList">Comments, ideas, questions and other discussion should be added on the <a href="en/Devmo_talk/1.0_Launch_Roadmap">Devmo talk:1.0 Launch Roadmap</a> page. Further details on smaller tasks being done are available at <a>User:Dria:TODO</a> page. See also <a>Current Events</a>.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Download_Manager_improvements_in_Firefox_3">Download Manager improvements in Firefox 3</a></dt><dd class="landingPageList">Firefox 3 offers improvements to the Download Manager that allow multiple progress listeners, use of the <a href="/en-US/docs/Storage">Storage</a> API for data management, download resuming, and more. In addition, you can augment or replace the Download Manager's user interface by implementing the new <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDownloadManagerUI" title="">nsIDownloadManagerUI</a></code> interface.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Download_Manager_preferences">Download Manager preferences</a></dt><dd class="landingPageList">There are several preferences used by the Download Manager. This article provides a list of them.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Drag_and_drop">Drag and Drop</a></dt><dd class="landingPageList">This section describes how to implement objects that can be dragged around and dropped onto other objects.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/DTrace">DTrace</a></dt><dd class="landingPageList"> <strong>DTrace</strong> is Sun Microsystem's dynamic tracing framework that allows developers to instrument a program with probes that have little to no effect on performance when not in use and very little when active. Probe data can be collected with scripts written in <a class="external" href="http://docs.sun.com/app/docs/doc/817-6223">D</a> (no, not <a href="https://en.wikipedia.org/wiki/D_(programming_language)" title="that one">that one</a>). Mozilla DTrace support has <a class="external" href="http://www.opensolaris.org/os/project/mozilla-dtrace/">been added</a> by the Sun DTrace team and can be used on Solaris 10 and Mac OS X 10.5.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Embedding_FAQ">Embedding FAQ</a></dt><dd class="landingPageList"></dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Embedding_Mozilla_in_a_Java_Application_using_JavaXPCOM">Embedding Mozilla in a Java Application using JavaXPCOM</a></dt><dd class="landingPageList"><a href="/en/XULRunner" title="en/XULRunner">XULRunner</a> ships with the <a href="/en/JavaXPCOM" title="en/JavaXPCOM">JavaXPCOM</a> component, which allows Java code to interact with XPCOM objects. As you will see in this article, working with XPCOM objects in Java is not that much different than doing so in C++.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Error_console">Error Console</a></dt><dd class="landingPageList">The Error Console is a tool available in most Mozilla-based applications that is used for reporting errors in the application chrome and in web pages user opens. It reports <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>-related errors and warnings, <a href="/en-US/docs/CSS" title="CSS">CSS</a> errors and arbitrary messages from chrome code. In Firefox, the Error Console can be opened from the tools menu or by Ctrl-Shift-J.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Exception_logging_in_JavaScript">Exception logging in JavaScript</a></dt><dd class="landingPageList">Technical review completed.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Project:Existing_Content">Existing Content</a></dt><dd class="landingPageList">This is a list of existing mozilla.org documentation. It needs to be <a class="external" href="http://mail.mozilla.org/pipermail/devmo-general/2005-July/000214.html">checked, prioritized, and migrated</a>.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Extension_Frequently_Asked_Questions">Extension Frequently Asked Questions</a></dt><dd class="landingPageList">This is quick set of answers to the most common issues with <a class="internal" href="/en/Extensions" title="en/Extensions">extension</a> development. They are currently written with mostly Firefox in mind, but most if not all should easily translate to SeaMonkey, Thunderbird or any of the other applications. For Thunderbird, you may also find the extension <a class="internal" href="/en/Extensions/Thunderbird/HowTos" title="en/Extensions/Thunderbird/HowTos">HowTo</a> or <a class="internal" href="/en/Extensions/Thunderbird/FAQ" title="en/Extensions/Thunderbird/FAQ">FAQ</a> pages helpful.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Fighting_Junk_Mail_with_Netscape_7.1">Fighting Junk Mail with Netscape 7.1</a></dt><dd class="landingPageList"><span class="comment">Summary: Is your mail account drowning in a flood of spam? Netscape 7.1 includes built-in junk mail filtering that you can train to meet your specific needs. Eric Meyer share his experiences with making the junk mail controls more effective, and looks at other preferences you might want to set to keep your account safe.</span></dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Firefox_Sync">Firefox Sync</a></dt><dd class="landingPageList">Sync refers to a family of related components and services which provide synchronization of data between Mozilla application instances. These components and services include:</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Force_RTL">Force RTL</a></dt><dd class="landingPageList">(This is a temporary placeholder/stub for the Force RTL page)</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Gecko_Coding_Help_Wanted">Gecko Coding Help Wanted</a></dt><dd class="landingPageList">Take a look through <a href="http://lxr.mozilla.org/">LXR</a>, and you'll realize that Mozilla's source code is a big place.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/GRE">GRE</a></dt><dd class="landingPageList"></dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Project:Hacking_wiki">Hacking wiki</a></dt><dd class="landingPageList">To be able to hack the MDC wiki software, you'll need a local webserver install, which <a class="external" href="http://meta.wikimedia.org/wiki/Help:Introduction#System_Requirements">can run MediaWiki</a>.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Help_viewer">Help Viewer</a></dt><dd class="landingPageList">Help Viewer: Allows information to be shown to the user inside Mozilla.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Helper_Apps">Helper Apps (and a bit of Save As)</a></dt><dd class="landingPageList"> </dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Hidden_prefs">Hidden prefs</a></dt><dd class="landingPageList"><span style="overflow: hidden; display: block; background: lemonchiffon; border: 1px solid navajowhite; text-align: center; margin-bottom: 1em;"> +<span style="display: block; color: coral; font-weight: 700; border-bottom: 1px solid navajowhite;">This page has been flagged by editors or users as needing technical review.</span> +Until it is fully reviewed, it may contain inaccurate or incorrect information. +</span></dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Nanojit_merging">How to Write and Land Nanojit Patches</a></dt><dd class="landingPageList">Adobe and Mozilla share a copy of Nanojit. This means that landing nanojit patches is a bit complicated, but experience has taught us that this is <strong>much</strong> better than having separate versions of nanojit.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/HTTP_Class_Overview">HTTP Class Overview</a></dt><dd class="landingPageList">This document provides an overview of the classes used by the Mozilla <a href="/en/HTTP" title="en/HTTP">HTTP</a> implementation. It's meant as a guide to developers wishing to understand or extend the Mozilla HTTP implementation.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Introducing_the_Audio_API_Extension">Introducing the Audio API extension</a></dt><dd class="landingPageList">The Audio Data API extension extends the HTML5 specification of the <a href="/en-US/docs/Web/HTML/Element/audio" title="The HTML <audio> element is used to represent sound content in documents. Added as part of HTML5, it may contain several audio sources, represented using the src attribute or the <source> element; the browser will choose the most suitable one. Fallback content for browser not supporting the <audio> element can be added too."><code><audio></code></a> and <a href="/en-US/docs/Web/HTML/Element/video" title="The HTML <video> element is used to embed video content in an HTML or XHTML document."><code><video></code></a> media elements by exposing audio metadata and raw audio data. This enables users to visualize audio data, to process this audio data and to create new audio data.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Java_in_Firefox_Extensions">Java in Firefox Extensions</a></dt><dd class="landingPageList">If you are in need of calling Java code from within a Firefox <a href="/en/Extensions" title="en/Extensions">extension</a>, you can make use of <a class="external" href="http://en.wikipedia.org/wiki/LiveConnect">LiveConnect</a>. LiveConnect gives your extension's JavaScript code (linked from or contained in XUL code) access to 2 objects: <code>java</code> and <code>Packages</code> (note that per <a class="external" href="http://forums.java.net/jive/thread.jspa?threadID=45933&tstart=0">this thread</a>, although the <a class="link-https" href="https://jdk6.dev.java.net/plugin2/liveconnect/">new documentation</a> for the LiveConnect reimplementation states that these <a class="link-https" href="https://jdk6.dev.java.net/plugin2/liveconnect/#DEPRECATED_FUNCTIONALITY">globals will be deprecated</a> (in the context of applets), "Firefox and the Java Plug-In will continue to support the global java/Packages keywords, in particular in the context of Firefox extensions."). These 2 objects let you make use of the standard JDK classes, e.g.,</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/JavaScript_crypto">JavaScript crypto</a></dt><dd class="landingPageList">Mozilla defines a special JavaScript object to allow web pages access to certain cryptographic-related services. These services are a balance between the functionality web pages need and the requirement to protect users from malicious web sites. Most of these services are available via the DOM <a href="/en-US/docs/Web/API/Window" title="The window object represents a window containing a DOM document; the document property points to the DOM document loaded in that window."><code>window</code></a> object as <a href="/en-US/docs/Web/API/Window/crypto" title="The Window.crypto read-only property returns the Crypto object associated to the global object. This object allows web pages access to certain cryptographic related services."><code>window.crypto</code></a>.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Jetpack">Jetpack</a></dt><dd class="landingPageList"> </dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Litmus_tests">Litmus tests</a></dt><dd class="landingPageList">Litmus tests are (non-automated) tests that are documented in the litmus database. See <a class="external" href="http://litmus.mozilla.org" rel="freelink">http://litmus.mozilla.org</a>.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Makefile.mozextension.2">Makefile.mozextension.2</a></dt><dd class="landingPageList">This Makefile is a modification of the <code>Makefile.mozextention</code>, found in <a class="external" href="http://kb.mozillazine.org/Makefile_for_packaging_an_extension">Makefile for packaging an extension - MozillaZine Knowledge Base</a> (2005).</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Microsummary_topics">Microsummary topics</a></dt><dd class="landingPageList">To programmatically install a microsummary generator -- for example, in an extension that helps users create custom generators for their favorite sites -- obtain a reference to the <a class="external" href="http://lxr.mozilla.org/mozilla/source/browser/components/microsummaries/public/nsIMicrosummaryService.idl#178"><code>nsIMicrosummaryService</code></a> interface implemented by the <a class="external" href="http://lxr.mozilla.org/mozilla/source/browser/components/microsummaries/src/nsMicrosummaryService.js.in"><code>nsIMicrosummaryService</code></a> component, then call its <code><a class="external" href="http://lxr.mozilla.org/mozilla/source/browser/components/microsummaries/public/nsIMicrosummaryService.idl#191">installGenerator()</a></code> method, passing it an XML document containing the generator.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Migrate_apps_from_Internet_Explorer_to_Mozilla">Migrate apps from Internet Explorer to Mozilla</a></dt><dd class="landingPageList">When Netscape started the Mozilla browser, it made the conscious decision to support W3C standards. As a result, Mozilla is not fully backwards-compatible with Netscape Navigator 4.x and Microsoft Internet Explorer legacy code; for example, Mozilla does not support <code><layer></code> as I will discuss later. Browsers, like Internet Explorer 4, that were built before the conception of W3C standards inherited many quirks. In this article, I will describe Mozilla's quirks mode, which provides strong backwards HTML compatibility with Internet Explorer and other legacy browsers.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Monitoring_downloads">Monitoring downloads</a></dt><dd class="landingPageList">Firefox 3 makes it easier than ever to monitor the status of downloads. Although it was possible to do so in previous versions of Firefox, it was previously only possible for one observer to do so at a time. Firefox 3 introduces new API that allows any number of listeners to observe downloads.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Mozilla_Application_Framework">Mozilla Application Framework</a></dt><dd class="landingPageList"><i>The Mozilla Application Framework: for powerful, easy to develop cross-platform applications</i></dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Mozilla_crypto_FAQ">Mozilla Crypto FAQ</a></dt><dd class="landingPageList">In this document I try to answer some frequently asked questions about the Mozilla web browser and mail/news client and its support for SSL, S/MIME, and related features based on cryptographic technology. Note that this document is for your information only and is not intended as legal advice. If you wish to develop and distribute cryptographic software, particularly for commercial sale or distribution, then you should consult an attorney with expertise in the particular laws and regulations that apply in your jurisdiction.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Modules_and_Module_ownership">Mozilla Modules and Module Ownership</a></dt><dd class="landingPageList">REDIRECT <a class="redirect" href="http://www.mozilla.org/hacking/module-ownership.html">http://www.mozilla.org/hacking/module-ownership.html</a></dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/mozprocess">Mozprocess</a></dt><dd class="landingPageList"><a class="link-https" href="https://github.com/mozilla/mozbase/tree/master/mozprocess">mozprocess</a> provides python process management via an operating system and platform transparent interface to Mozilla platforms of interest. Mozprocess aims to provide the ability to robustly terminate a process (by timeout or otherwise), along with any child processes, on Windows, OS X, and Linux. Mozprocess utilizes and extends <code>subprocess.Popen</code> to these ends.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Nanojit">Nanojit</a></dt><dd class="landingPageList">Nanojit is a small, cross-platform C++ library that emits machine code. Both the Tamarin JIT and the SpiderMonkey JIT (a.k.a. TraceMonkey) use Nanojit as their back end.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Project:New_Skin_Notes">New Skin Notes</a></dt><dd class="landingPageList">Devmo has a new skin that is ready for testing. If you go to your <a>user preferences</a>, you can change the skin to "Devmo". This is currently just a preview, but we would appreciate help with testing.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Persona">Persona</a></dt><dd class="landingPageList"><a href="https://login.persona.org/">Mozilla Persona</a> is a cross-browser login system for the Web, that's easy to use and easy to deploy. It works on <a href="/en-US/docs/persona/Browser_compatibility">all major browsers</a>, and you can <a href="/en-US/docs/Persona/Quick_Setup">get started today</a>.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Plug-n-Hack">Plug-n-Hack</a></dt><dd class="landingPageList"><strong>Plug-n-Hack</strong> (PnH) is a proposed standard from the Mozilla security team for defining how security tools can interact with browsers in a more useful and usable way.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Plugin_architecture">Plugin Architecture</a></dt><dd class="landingPageList">This page contains some notes on how plugins work internally in Gecko. It is mainly of interest to Gecko developers.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Porting_NSPR_to_Unix_Platforms">Porting NSPR to Unix Platforms</a></dt><dd class="landingPageList">Last modified 16 July 1998</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Project:DevEdge">Priority Content</a></dt><dd class="landingPageList"><b>Update:</b> I've removed documents from this list that have been migrated into the wiki. The list of completed documents is available through the <a href="en/DevEdge">DevEdge</a> page.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Prism">Prism</a></dt><dd class="landingPageList">Prism is a simple XULRunner-based browser that hosts web applications without the normal web browser user interface. Prism is based on a concept called Site-Specific Browsers (SSB). An SSB is designed to work exclusively with a single web application. It doesn’t have the menus, toolbars and other accoutrements of a traditional web browser. An SSB also offers tighter integration with the operating system and desktop than a typical web application running through a web browser. Applications running in an SSB are therefore able to benefit from many of the advantages of the desktop and of the web at the same time.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Proxy_UI">Proxy UI</a></dt><dd class="landingPageList">(Recently Added - some support for reading OS and account settings.)</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Remote_XUL">Remote XUL</a></dt><dd class="landingPageList">How to use XUL delivered from a webserver, not as part of chrome.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Space_Manager_Detailed_Design">Space Manager Detailed Design</a></dt><dd class="landingPageList">The Space Manager and related classes and structures are an important of the Gecko Layout system, specifically Block Layout. See the High Level Design document for an overview of the Space Manager, and as an introduction to the classes, structures and algorithms container in this, the Detailed Design Document.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Space_Manager_High_Level_Design">Space Manager High Level Design</a></dt><dd class="landingPageList">The Space Manager and associated classes and structures are used by Block and Line layout to manage rectangular regions that are occupied and available, for correct handling of floated elements and the elements that flow around them. When elements are floated to the left or right in a layout, they take up space and influence where other elements can be placed. The Space Manager is responsible for keeping track of where space is taken up and where it is available. This information is used by block layout to correctly compute where other floated elements should be placed, and how much space is available to normal in-flow elements that flow around the floated bits.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Standalone_XPCOM">Standalone XPCOM</a></dt><dd class="landingPageList"><b>Standalone XPCOM</b> is a tree configuration that builds a minimal set of libraries (shared mostly) that can be used to get all features of XPCOM. The contents of this standalone XPCOM in general are:</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Stress_testing">Stress testing</a></dt><dd class="landingPageList">Consume.exe from the <a class="external" href="http://www.microsoft.com/downloads/details.aspx?FamilyID=9d467a69-57ff-4ae7-96ee-b18c4790cffd&displaylang=en">Windows Server 2003 Resource Kit Tools</a> can consume various resources: physical memory, CPU time, page file, disk space and even the kernel pool. Although for Win2003, it should install into WinXP fine (Win2000 compatibility is unknown). The only downside is you can't specify how much of the resource to use, only which one to consume. Also be warned: always remember the -time option, or you may be hitting that physical reset button sooner than you would have liked!</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Bundles">Structure of an installable bundle</a></dt><dd class="landingPageList"><a href="/en/XUL_Application_Packaging" title="en/XUL_Application_Packaging">XULRunner applications</a>, <a href="/en/Extensions" title="en/Extensions">extensions</a>, and <a href="/en/Themes" title="en/Themes">themes</a> all share a common directory structure, and in some cases the same bundle can be used as a standalone XULRunner application as well as an installable application extension.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Supporting_private_browsing_mode">Supporting private browsing mode</a></dt><dd class="landingPageList">Firefox 3.5 introduced private browsing mode, in which potentially private information is not recorded. This includes cookies, history information, download information, and so forth.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/SXSW_2007_presentations">SXSW 2007 presentations</a></dt><dd class="landingPageList">Presentations about the Mozilla project given at the SXSW 2007 event in Austin, Texas.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Table_Cellmap">Table Cellmap</a></dt><dd class="landingPageList">The table layout use the cellmap for two purposes:</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Table_Cellmap_-_Border_Collapse">Table Cellmap - Border Collapse</a></dt><dd class="landingPageList">This document describes the additional information that is stored for border collapse tables in the cellmap.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Table_Layout_Regression_Tests">Table Layout Regression Tests</a></dt><dd class="landingPageList">Changes in layout, parser and content code can have unintended side effects, also known as regressions. It is good style to check for these unwanted regressions and fixing them before checkin rather than causing Bugzilla avalanches.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Table_Layout_Strategy">Table Layout Strategy</a></dt><dd class="landingPageList">The table layout algorithm is based on two W3C recommendations: <a class="external" href="http://www.w3.org/TR/html401/struct/tables.html">HTML 4.01 (Chapter 11)</a> and <a class="external" href="http://www.w3.org/TR/CSS21/tables.html">CSS2.1 (Chapter 17)</a>.In CSS2 a distinction between fixed and auto layout of tables has been introduced. The auto-layout mechanism is implemented in <code>BasicTableLayoutStrategy.cpp</code> the fixed-layout in <code>FixedTableLayoutStrategy.cpp</code>. All these files are in the <code>layout/html/table/src</code> subdirectory.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Tamarin">Tamarin</a></dt><dd class="landingPageList"></dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/The_Download_Manager_schema">The Download Manager schema</a></dt><dd class="landingPageList">The Download Manager uses an SQLite table to keep track of downloads in progress as well as queued and past downloads.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/The_life_of_an_HTML_HTTP_request">The life of an HTML HTTP request</a></dt><dd class="landingPageList"> </dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/The_new_nsString_class_implementation_(1999)">The new nsString class implementation (1999)</a></dt><dd class="landingPageList">This document is intended to briefly describe the new nsString class architecture, and discuss the implications on memory management, optimizations, internationalization and usage patterns.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/TraceVis">TraceVis</a></dt><dd class="landingPageList">TraceVis is a performance visualization system for TraceMonkey. If TraceMonkey is built with TraceVis, and run with TraceVis enabled, then TraceMonkey will output a log of all its activity transitions. The log can be postprocessed into a visualization that can be used to rapidly diagnose many tracing-related performance issues.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Treehydra">Treehydra</a></dt><dd class="landingPageList">Try the gcc python plugin instead: <a href="https://fedorahosted.org/gcc-python-plugin/" title="https://fedorahosted.org/gcc-python-plugin/">https://fedorahosted.org/gcc-python-plugin/</a>.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/URIs_and_URLs">URIs and URLs</a></dt><dd class="landingPageList">Handling network and locally retrievable resources is a central part of Necko. Resources are identified by URI "Uniform Resource Identifier" (Taken from <a class="external" href="http://tools.ietf.org/html/rfc2396" title="http://tools.ietf.org/html/rfc2396">RFC 2396</a>):</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/URIScheme">URIScheme</a></dt><dd class="landingPageList">List of Mozilla supported URI schemes</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Using_addresses_of_stack_variables_with_NSPR_threads_on_win16">Using addresses of stack variables with NSPR threads on win16</a></dt><dd class="landingPageList">This is a cautionary note that may be old information for some of you. However, since it affects the portability of code, it was deemed prudent to include a short memo describing the issue.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Using_Monotone_with_Mozilla_CVS">Using Monotone With Mozilla CVS</a></dt><dd class="landingPageList"></dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Using_SVK_with_Mozilla_CVS">Using SVK With Mozilla CVS</a></dt><dd class="landingPageList">When working with Mozilla, you tend to accumulate patches which need to be reviewed, super-reviewed, and/or approved before they can be committed to the trunk. When you have only a few uncommitted patches, you can get by using cvs diff, and just editing the output to remove other patches before submitting. However, this approach quickly becomes unscalable, especially when you have different fixes in the same tree. Using a distributed versioning system like SVK takes out much of the hassle of managing your patches.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Venkman">Venkman</a></dt><dd class="landingPageList">Venkman is the code name for Mozilla's JavaScript Debugger. It aims to provide a powerful <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a> debugging environment for Mozilla based browsers namely Firefox, Netscape 7.x/9.x and SeaMonkey. Note that it is not included in the Gecko-based browsers such as K-Meleon, Galeon and Netscape 8.x. Venkman has been provided as part of the Mozilla install distribution since October 2001, as well as an <a href="/en-US/docs/Extensions" title="en-US/docs/Extensions">extension</a> package in <a href="/en-US/docs/XPI" title="en-US/docs/XPI">XPI</a> format.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Video_presentations">Video presentations</a></dt><dd class="landingPageList">Mozilla is actively working to produce video presentations that can help you learn how the Mozilla codebase works and how to take advantage of its technology in your own applications and extensions. This article is a jumping-off point to help you find those presentations.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Why_embed_Gecko">Why Embed Gecko</a></dt><dd class="landingPageList"><b>Gecko - the Smart Embedding Choice</b></dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/xbDesignMode.js">xbDesignMode.js</a></dt><dd class="landingPageList"></dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/XML_in_Mozilla">XML in Mozilla</a></dt><dd class="landingPageList">Mozilla has a relatively good support for <a href="/en-US/docs/XML" title="XML">XML</a>. Several World Wide Web Consortium (<a href="http://www.w3.org/">W3C</a>) Recommendations and drafts from the XML family of specifications are supported, as well as other related technologies.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/XPInstall">XPInstall</a></dt><dd class="landingPageList"></dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/XPJS_Components_Proposal">XPJS Components Proposal</a></dt><dd class="landingPageList">Draft 1.0</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/XRE">XRE</a></dt><dd class="landingPageList"></dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/XTech_2005_Presentations">XTech 2005 Presentations</a></dt><dd class="landingPageList"></dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/XTech_2006_Presentations">XTech 2006 Presentations</a></dt><dd class="landingPageList"></dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/XUL_Explorer">XUL Explorer</a></dt><dd class="landingPageList">XUL Explorer is a <a href="/en/XULRunner" title="en/XULRunner">XULRunner</a> application that provides an easy way to experiment with XUL. It’s a simple editor that can preview XUL inline or in a separate popup window. It has a list of code snippets (small fragments of XUL or JavaScript) that can be quickly inserted into the editor. The XUL can be loaded from and saved to files. A XUL validator and the <a href="/en/Error_Console" title="en/Error_Console">Error Console</a> are both available to help debug problems. The help menu provides access to XUL information on MDC. There is even simple “keyword” help lookup for XUL elements.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/XULRunner">XULRunner</a></dt><dd class="landingPageList"><strong>XULRunner</strong> is a Mozilla runtime package that can be used to bootstrap <a href="/en-US/docs/XUL" title="XUL">XUL</a>+<a href="/en-US/docs/XPCOM" title="XPCOM">XPCOM</a> applications that are as rich as Firefox and Thunderbird. It provides mechanisms for installing, upgrading, and uninstalling these applications.</dd></dl> diff --git a/files/el/glossary/abstraction/index.html b/files/el/glossary/abstraction/index.html new file mode 100644 index 0000000000..51aa77f531 --- /dev/null +++ b/files/el/glossary/abstraction/index.html @@ -0,0 +1,6 @@ +--- +title: Αφαίρεση +slug: Glossary/Abstraction +translation_of: Glossary/Abstraction +--- +<p>Η αφαίρεση στον {{Glossary("computer programming", "προγραμματισμό υπολογιστών")}} είναι ένας τρόπος για να μειώνεται η πολυπλοκότητα και για να σχεδιάζονται και να υλοποιούνται περίπλοκα υπολογιστικά συστήματα με μεγαλύτερη ευκολία, κρύβοντας την τεχνική πολυπλοκότητα των συστημάτων πίσω από απλούστερα {{Glossary("API", "API")}}.</p> diff --git a/files/el/glossary/ajax/index.html b/files/el/glossary/ajax/index.html new file mode 100644 index 0000000000..c10e807964 --- /dev/null +++ b/files/el/glossary/ajax/index.html @@ -0,0 +1,28 @@ +--- +title: AJAX +slug: Glossary/AJAX +tags: + - AJAX + - 'l10n:priority' + - Γλωσσάρι + - Δομή + - Κώδικας +translation_of: Glossary/AJAX +--- +<p>Το AJAX (Asynchronous {{glossary("JavaScript")}} And {{glossary("XML")}} - Ασύγχρονο {{glossary("JavaScript")}} και {{glossary("XML")}}) είναι μια προγραμματιστική πρακτική συνδυασμού του {{glossary("HTML")}}, του {{glossary("CSS")}}, του JavaScript, του {{glossary("DOM")}} και του αντικειμένου ({{glossary("object")}}) <code>XMLHttpRequest</code>, ώστε να δημιουργηθούν πιο περίπλοκες ιστοσελίδες. Το AJAX σάς επιτρέπει να ενημερώσετε ορισμένα μέρη της ιστοσελίδας, αντί να χρειαστεί να επαναφορτώσετε ολόκληρη τη σελίδα. Το AJAX σάς επιτρέπει επίσης να εργάζεστε ασύγχρονα, δηλαδή ο κώδικάς σας εξακολουθεί να εκτελείται, ενώ κάποιο μέρος της ιστοσελίδας σας προσπαθεί να φορτωθεί εκ νέου (σε σύγκριση με την συγχρονισμένη εργασία όπου ο κώδικάς σας δεν εκτελείται μέχρι να ολοκληρωθεί η φόρτωση του μέρους της ιστοσελίδας σας).</p> + +<h2 id="Μάθετε_περισσότερα">Μάθετε περισσότερα</h2> + +<h3 id="Γενική_γνώση">Γενική γνώση</h3> + +<ul> + <li>Το {{interwiki("wikipedia", "AJAX")}} στη Βικιπαίδεια</li> + <li><a href="http://peoplesofttutorial.com/difference-between-synchronous-and-asynchronous-messaging/">Συγχρονισμένες vs. ασύγχρονες επικοινωνίες</a></li> +</ul> + +<h3 id="Τεχνικές_πληροφορίες">Τεχνικές πληροφορίες</h3> + +<ul> + <li>Το αντικείμενο (object) {{domxref("XMLHttpRequest")}}</li> + <li><a href="/en-US/docs/AJAX">Η τεκμηρίωση του AJAX στο MDN</a></li> +</ul> diff --git a/files/el/glossary/computer_programming/index.html b/files/el/glossary/computer_programming/index.html new file mode 100644 index 0000000000..5274c509c2 --- /dev/null +++ b/files/el/glossary/computer_programming/index.html @@ -0,0 +1,18 @@ +--- +title: Προγραμματισμός υπολογιστών +slug: Glossary/Computer_Programming +tags: + - γλώσσα προγραμματισμού + - προγραμματισμός + - προγραμματισμός υπολογιστών +translation_of: Glossary/Computer_Programming +--- +<p>Ο προγραμματισμός είναι μια διαδικασία με την οποία διατυπώνεται η λύση ενός υπολογιστικού προβλήματος ή αυτοματοποιείται μια επαναλαμβανόμενη εργασία ως ακολουθία οδηγιών σε ένα εκτελέσιμο πρόγραμμα.</p> + +<h2 id="Περισσότερα">Περισσότερα</h2> + +<h3 id="Γενική_γνώση">Γενική γνώση</h3> + +<ul> + <li>{{Interwiki("wikipedia", "Προγραμματισμός")}} στη Βικιπαίδεια</li> +</ul> diff --git a/files/el/glossary/ecma/index.html b/files/el/glossary/ecma/index.html new file mode 100644 index 0000000000..f3083147bc --- /dev/null +++ b/files/el/glossary/ecma/index.html @@ -0,0 +1,17 @@ +--- +title: ECMA +slug: Glossary/ECMA +tags: + - Γλωσσάρι +translation_of: Glossary/ECMA +--- +<p>Η <strong>Ecma International</strong> (επισήμως <em>European Computer Manufacturers Association</em>) είναι ένας μη κερδοσκοπικός οργανισμός που αναπτύσσει πρότυπα για υλισμικό, επικοινωνίες και γλώσσες προγραμματισμού.</p> + +<p>Στον Ιστό είναι γνωστή ως ο φορέας που τηρεί την <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">προδιαγραφή ECMA-262</a> (βλ. {{Glossary("ECMAScript")}}), γνωστή ως προδιαγραφή τής γλώσσας {{Glossary("JavaScript")}}.</p> + +<h2 id="Περισσότερα">Περισσότερα</h2> + +<ul> + <li>{{interwiki("wikipedia", "Ecma_International", "Ecma International")}} στη Βικιπαίδεια</li> + <li><a href="http://www.ecma-international.org/">Ιστότοπος της Ecma International</a></li> +</ul> diff --git a/files/el/glossary/falsy/index.html b/files/el/glossary/falsy/index.html new file mode 100644 index 0000000000..9eec983c4a --- /dev/null +++ b/files/el/glossary/falsy/index.html @@ -0,0 +1,35 @@ +--- +title: Falsy +slug: Glossary/Falsy +tags: + - falsy +translation_of: Glossary/Falsy +--- +<p>F<strong>alsy</strong> τιμή, είναι μια τιμή η οποία επιστρέφει false σε {{Glossary("Boolean")}} βρόγχους.</p> + +<p>H {{Glossary("JavaScript")}} χρησιμοποιεί τύπους {{Glossary("Type_Conversion", "coercion")}} στους Boolean βρόγχους.</p> + +<h2 id="Παραδείγματα">Παραδείγματα</h2> + +<p>Παραδείγματα απο <em>falsy</em> τιμές στην JavaScript (που επιστρέφουν false και έτσι <em>παρακάμπτουν</em> το <code>if</code> block):</p> + +<pre class="brush: js">if (false) +if (null) +if (undefined) +if (0) +if (NaN) +if ('') +if ("") +if (document.all) [1]</pre> + +<p>To [1] <code>document.all</code> έχει χρησιμοποιηθεί στο παρελθόν για την αναγνώριση του περιηγητή και το <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/obsolete.html#dom-document-all">HTML specification defines a willful violation</a> απο το πρότυπο ECMAScript, για λόγους συμβατότητας με παλιότερους κώδικες (<code>if (document.all) { // Internet Explorer κώδικας }</code> ή με τη χρήση του <code>document.all</code> χωρίς να γίνεται πρώτα έλεγχος: <code>document.all.foo</code>).</p> + +<p>Μερικές φορές φράφεται <strong>falsey</strong>, αν και στα αγγλικά συνήθως μετατρέποντας μια λέξη σε επίθετο με ένα -y, το τελικό <em>e</em> φεύγει (noise => noisy, ice => icy, shine => shiny)</p> + +<h2 id="Μάθετε_περισσότερα">Μάθετε περισσότερα</h2> + +<ul> + <li>{{Glossary("Truthy")}}</li> + <li>{{Glossary("Type_Conversion", "Coercion")}}</li> + <li>{{Glossary("Boolean")}}</li> +</ul> diff --git a/files/el/glossary/hoisting/index.html b/files/el/glossary/hoisting/index.html new file mode 100644 index 0000000000..c777c4cb00 --- /dev/null +++ b/files/el/glossary/hoisting/index.html @@ -0,0 +1,69 @@ +--- +title: Hoisting +slug: Glossary/Hoisting +translation_of: Glossary/Hoisting +--- +<p>Η ανύψωση(Hoisting) είναι ένας όρος που <em>δεν</em> χρησιμοποιείται σε καμία γραπτή κανονιστική προδιαγραφή πριν από την <a href="http://www.ecma-international.org/ecma-262/6.0/index.html">ECMAScript® 2015 Language Specification</a>. Η ανύψωση εφευρέθηκε σαν μια γενική έννοια που περιγράφει το πως δουλεύει το περιβάλλον εκτέλεσης στην JavaScript (ειδικά οι φάσεις της δημιουργίας και της εκτέλεσης) . Αλλά, στην πράξη η έννοια αυτή οδηγεί σε παρεξηγήσεις. Για παράδειγμα, η ανύψωση περιγράφει ότι οι δηλώσεις των μεταβλητών και των μεθόδων μετακινούνται "φυσικά" στην κορυφή του κώδικά, αλλά κάτι τέτοιο δεν συμβαίνει καθόλου. Αυτό που πρακτικά συμβαίνει είναι ότι οι δηλώσεις των μεταβλητών και των μεθόδων τοποθετούνται στην μνήμη κατά τη διάρκεια της φάσης της <u>μεταγλώττισης</u>, αλλά μένουν ακριβώς εκεί όπου δηλώθηκαν μέσα στον κώδικα.</p> + +<h2 id="Μάθε_περισσότερα">Μάθε περισσότερα</h2> + +<h3 id="Τεχνικό_παράδειγμα">Τεχνικό παράδειγμα</h3> + +<p>Ένα από τα πλεονεκτήματα του να τοποθετεί η JavaScript τις δηλώσεις των μεθόδων στη μνήμη πριν να εκτελέσει οποιοδήποτε κωμάτι κώδικα είναι ότι έτσι σου επιτρέπει να χρησιμοποιήσεις τη μέθοδο πριν να την δηλώσεις στον κώδικά σου. Για παράδειγμα:</p> + +<pre class="brush: js">function catName(name) { + console.log("My cat's name is " + name); +} + +catName("Tigger"); +/* +Το αποτέλεσμα του παραπάνω κώδικα είναι: "My cat's name is Tigger" +*/ +</pre> + +<p>Το παραπάνω απόσπασμα κώδικα είναι όπως θα προσδοκούσες να έχεις γράψει τον κώδικα για να δουλέψει. Τώρα, ας δούμε τι γίνεται όταν καλούμε την μέθοδο πριν την γράψουμε:</p> + +<pre class="brush: js">catName("Chloe"); + +function catName(name) { + console.log("My cat's name is " + name); +} +/* +Το αποτέλεσμα του παραπάνω κώδικα είναι: "My cat's name is Chloe" +*/ +</pre> + +<p>Ενώ στον κώδικά μας πρώτα καλούμε την μέθοδο, προτού δηλωθεί η μέθοδος, ο κώδικας εξακολουθεί να δουλεύει. Αυτό συμβαίνει εξ αιτίας του τρόπου που δουλεύει το περιβάλλον εκτέλεσης στην JavaScript.</p> + +<p>Η ανύψωση δουλεύει επίσης καλά και με άλλους τύπους δεδομένων και μεταβλητών. Οι μεταβλητές μπορούν να αρχικοποιούνται και να χρησιμοποιούνται πριν δηλωθούν. Αλλά δεν μπορούν να χρησιμοποιηθούν χωρίς να έχουν αρχικοποιηθεί.</p> + +<h3 id="Τεχνικό_παράδειγμα_2">Τεχνικό παράδειγμα</h3> + +<pre class="brush: js">num = 6; +num + 7; +var num; +/* δεν δίνει λάθος εφ' όσον η μεταβλητή num είναι δηλωμένη */ + +</pre> + +<p><u>Η JavaScript ανυψώνει μόνο δηλώσεις όχι αρχικοποιήσεις.</u> Αν χρησιμοποιείς μία μεταβλητή που δηλώνεται και αρχικοποιείται μετά από την χρήση της, η τιμή της θα είναι undefined. Τα παρακάτω δύο παραδείγματα δείχνουν αυτή τη συμπεριφορά.</p> + +<pre class="brush: js">var x = 1; // Initialize x +console.log(x + " " + y); // '1 undefined' +var y = 2; + + +// Ο παρακάτω κώδικας θα συμπεριφερθεί το ίδιο όπως και ο προηγούμενος κώδικας: +var x = 1; // Initialize x +var y; // Declare y +console.log(x + " " + y); // '1 undefined' +y = 2; // Initialize y +</pre> + +<h3 id="Τεχνικές_αναφορές">Τεχνικές αναφορές</h3> + +<ul> + <li><a href="https://www.udemy.com/understand-javascript/">JavaScript: Understanding the Weird Parts</a> - Udemy.com Course</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/var">var statement</a> - MDN</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function statement</a> - MDN</li> +</ul> diff --git a/files/el/glossary/html/index.html b/files/el/glossary/html/index.html new file mode 100644 index 0000000000..8eb9befa39 --- /dev/null +++ b/files/el/glossary/html/index.html @@ -0,0 +1,47 @@ +--- +title: HTML +slug: Glossary/HTML +tags: + - HTML + - Γλωσσάρι +translation_of: Glossary/HTML +--- +<p>Η HTML (HyperText Markup Language) είναι μια γλώσσα που περιγράφει τη δομή μιας ιστοσελίδας.</p> + +<h2 id="Σύντομο_ιστορικό">Σύντομο ιστορικό</h2> + +<p>Το 1990, στο πλαίσιο του οράματός του για τον {{glossary("World Wide Web","Ιστό")}}, ο Tim Berners-Lee επινόησε την έννοια {{glossary("hypertext", "υπερκείμενο")}}, την οποία τυποποίησε ένα έτος αργότερα, ορίζοντας μια γλώσσα επισημείωσης η οποία βασιζόταν κυρίως στην {{glossary("SGML")}}. Η {{glossary("IETF")}} άρχισε να προδιαγράφει την HTML το 1993 και τελικά, μετά από αρκετά σχέδια, κυκλοφόρησε την έκδοση 2.0 το 1995. Το 1994 ο Berners-Lee ίδρυσε το {{glossary("W3C")}} ως φορέα ανάπτυξης του Ιστού. Το 1996, το W3C ανέλαβε όσες εργασίες σχετίζονταν με την HTML και ένα έτος αργότερα δημοσίευσε τη Σύσταση HTML 3.2. Το 1999 κυκλοφόρησε η HTML 4.0, η οποία καθιερώθηκε ως πρότυπο {{glossary("ISO")}} το 2000.</p> + +<p>Εκείνη την εποχή, το W3C σχεδόν εγκατέλειψε την HTML και πρόκρινε την {{glossary("XHTML")}}, δίνοντας αφορμή για την ίδρυση ενός ανεξάρτητου ομίλου με την ονομασία {{glossary("WHATWG")}} το 2004. Χάρη στο WHATWG συνεχίστηκε η δουλειά για την {{glossary("HTML5")}}. Οι δύο οργανισμοί κυκλοφόρησαν το πρώτο σχέδιο της γλώσσας το 2008 και το τελικό πρότυπο το 2014.</p> + +<h2 id="Δομή_και_σύνταξη">Δομή και σύνταξη</h2> + +<p>Ένα έγγραφο HTML είναι ένα έγγραφο κειμένου το οποίο απαρτίζεται από {{glossary("element","στοιχεία")}}. Ένα στοιχείο οριοθετείται από δύο {{Glossary("tag","ετικέτες")}}, καθεμιά από τις οποίες περικλείεται σε γωνιώδεις αγκύλες (<code><></code>). Ορισμένα, όμως, στοιχεία είναι <em>κενά</em>, δηλαδή δεν περιέχουν κείμενο –για παράδειγμα, το στοιχείο {{htmlelement("img")}}.</p> + +<p>Οι ετικέτες της HTML μπορούν να εμπλουτιστούν με {{Glossary("attribute","χαρακτηριστικά")}}, με τα οποία παρέχονται πρόσθετες πληροφορίες που επηρεάζουν τον τρόπο με τον οποίο ο περιηγητής ερμηνεύει το στοιχείο:</p> + +<p><img alt="Detail of the structure of an HTML element" src="https://mdn.mozillademos.org/files/7659/anatomy-of-an-html-element.png" style="height: 181px; width: 609px;"></p> + +<p>Ένα αρχείο HTML αποθηκεύεται με επέκταση <code>.htm</code> ή <code>.html</code>, διακομίζεται από έναν {{Glossary("Server","διακομιστή Ιστού")}} και αποδίδεται από έναν {{Glossary("Browser","περιηγητή Ιστού")}}.</p> + +<h2 id="Περισσότερα">Περισσότερα</h2> + +<h3 id="Γενικές_γνώσεις">Γενικές γνώσεις</h3> + +<ul> + <li>{{interwiki("wikipedia", "HTML", "HTML")}} στη Βικιπαίδεια</li> +</ul> + +<h3 id="Εκμάθηση_HTML">Εκμάθηση HTML</h3> + +<ul> + <li><a href="http://developer.mozilla.org/en-US/Learn/HTML">Πρόγραμμα της Mozilla για την εκμάθηση της HTML</a></li> + <li><a href="http://www.codecademy.com/en/tracks/web" rel="external">Πρόγραμμα του codecademy.com για την εκμάθηση του Ιστού</a></li> +</ul> + +<h3 id="Τεχνικές_παραπομπές">Τεχνικές παραπομπές</h3> + +<ul> + <li><a href="/en-US/docs/Web/HTML">Έγγραφα του MDN για την HTML</a></li> + <li><a href="http://www.w3.org/TR/html5/" rel="external">Προδιαγραφή της HTML</a></li> +</ul> diff --git a/files/el/glossary/index.html b/files/el/glossary/index.html new file mode 100644 index 0000000000..74ef2ee208 --- /dev/null +++ b/files/el/glossary/index.html @@ -0,0 +1,24 @@ +--- +title: Glossary +slug: Glossary +tags: + - Γλωσσάρι + - αρχάριοι + - ευρετήριο +translation_of: Glossary +--- +<div style="max-width: 300px; float: right; margin: 0 0 .5em 1em;">{{LearnBox({"title":"Μάθε έναν νέο όρο:"})}}</div> + +<p>Για τις τεχνολογίες τού Ιστού υπάρχουν πάρα πολλοί όροι και ακρωνύμια, που χρησιμοποιούνται στην τεκμηρίωση και στον κώδικα. Στο παρόν γλωσσάρι δίνονται ορισμοί λέξεων και ακρωνυμίων που χρειάζεται να γνωρίζει κάποιος για να κατανοεί επαρκώς τον Ιστό και να συμβάλλει σε αυτόν.</p> + +<p>{{GlossaryList({"split":"h3", "css":"multiColumnList"})}}</p> + +<h2 id="Συνεισφορά_στο_γλωσσάρι">Συνεισφορά στο γλωσσάρι</h2> + +<p>Αυτό το γλωσσάρι βρίσκεται διαρκώς υπό επεξεργασία και εμπλουτισμό. Μπορείς να συνεισφέρεις <a href="/en-US/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">γράφοντας νέους όρους</a> ή βελτιώνοντας τους υπάρχοντες. Μπορείς να ξεκινήσεις εύκολα πατώντας το παρακάτω κουμπί ή επιλέγοντας έναν από τους προτεινόμενους όρους, παρακάτω.</p> + +<p><strong><a href="/en-US/docs/new?parent=4391">Προσθήκη νέου όρου στο γλωσσάρι</a></strong></p> + +<p>{{GlossaryList({"terms":["character encoding","DMZ","event","HMAC","condition","modem","OVP","TTL","Unicode"], "filter":"notdefined", "css":"multiColumnList"})}}</p> + +<p>Για να μάθεις περισσότερα για το πώς μπορείς να συνεισφέρεις στο γλωσσάρι, δες τη <a href="/en-US/docs/MDN/Doc_status/Glossary">σελίδα κατάστασης του γλωσσαρίου</a>.</p> diff --git a/files/el/glossary/java/index.html b/files/el/glossary/java/index.html new file mode 100644 index 0000000000..29c41a3eae --- /dev/null +++ b/files/el/glossary/java/index.html @@ -0,0 +1,14 @@ +--- +title: Java +slug: Glossary/Java +translation_of: Glossary/Java +--- +<p>H Java είναι μία {{glossary("OOP", "αντικειμενοστραφής")}}, φορητή γλώσσα {{Glossary("computer programming", "προγραμματισμού")}} βασισμένη σε {{Glossary("class", "κλάσεις")}}, σχεδιασμένη για ελάχιστες εξαρτήσεις στην υλοποίηση.</p> + +<h2 id="Μάθε_περισσότερα">Μάθε περισσότερα</h2> + +<h3 id="Γενικές_γνώσεις">Γενικές γνώσεις</h3> + +<ul> + <li>{{interwiki("wikipedia", "Java (programming language)", "Java")}} στην Wikipedia</li> +</ul> diff --git a/files/el/glossary/ltr/index.html b/files/el/glossary/ltr/index.html new file mode 100644 index 0000000000..be8f1d2c79 --- /dev/null +++ b/files/el/glossary/ltr/index.html @@ -0,0 +1,6 @@ +--- +title: ltr +slug: Glossary/ltr +translation_of: Glossary/ltr +--- +<p>ltr (από τα αριστερά προς τα δεξιά) είναι μια παράμετρος του {{glossary("locale")}} που μας δείχνει ότι το κείμενο γράφεται από τα αριστερά προς τα δεξιά. Π.χ., το <code>en-US</code> locale (Αγγλικά των Ηνωμένων Πολιτειών) καθορίζει από-αριστερά-προς-τα-δεξιά.</p> diff --git a/files/el/glossary/null/index.html b/files/el/glossary/null/index.html new file mode 100644 index 0000000000..1a92b8d8f9 --- /dev/null +++ b/files/el/glossary/null/index.html @@ -0,0 +1,25 @@ +--- +title: 'Null' +slug: Glossary/Null +translation_of: Glossary/Null +--- +<p>Στην επιστήμη των υπολογιστών, η τιμή <strong><code>null</code></strong> αντιπροσωπεύει την σκόπιμη αναφορά σε κάτι που δεν υπάρχει ή είναι μη έγκυρο αντικείμενο ή διεύθυνση. Η ακριβής σημασία της τιμής του null ποικίλει ανάλογα με την κάθε γλώσσα.</p> + +<p>Στην {{Glossary("JavaScript")}}, το null είναι μία απο τις {{Glossary("Primitive", "primitive values")}}, καθώς η συμπεριφορά της είναι πρωτόγονη. Απο την άλλη, ο σκοπός της είναι κάθε αλλο παρά πρωτόγονος, καθώς κάθε αντικείμενο προέρχεται απο την τιμή <code>null</code> και επομένως, ο έλεγχος του <code>typeof</code> επιστρέφει <code>"object"</code>:</p> + +<pre class="brush: js">typeof null === 'object'; // true</pre> + +<h2 id="Μάθετε_περισσότερα">Μάθετε περισσότερα</h2> + +<h3 id="Γενικές_γνώσεις">Γενικές γνώσεις</h3> + +<ul> + <li>{{Interwiki("wikipedia", "Null pointer")}} στη Wikipedia</li> +</ul> + +<h3 id="Τεχνική_αναφορά">Τεχνική αναφορά</h3> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Data_structures">JavaScript data types and data structures</a></li> + <li>The JavaScript global object: {{jsxref("null")}}</li> +</ul> diff --git a/files/el/glossary/δείκτης/index.html b/files/el/glossary/δείκτης/index.html new file mode 100644 index 0000000000..018de44537 --- /dev/null +++ b/files/el/glossary/δείκτης/index.html @@ -0,0 +1,11 @@ +--- +title: Δείκτης +slug: Glossary/Δείκτης +tags: + - MDN Meta + - Γλωσσάριο + - Δείκτης + - Προσανατολισμός +translation_of: Glossary/Index +--- +<p>{{Index("/en-US/docs/Glossary")}}</p> diff --git a/files/el/glossary/προσβασιμότητα/index.html b/files/el/glossary/προσβασιμότητα/index.html new file mode 100644 index 0000000000..3f083f6e91 --- /dev/null +++ b/files/el/glossary/προσβασιμότητα/index.html @@ -0,0 +1,32 @@ +--- +title: Προσβασιμότητα +slug: Glossary/Προσβασιμότητα +tags: + - Γλωσσάριο + - Προσβασιμότητα +translation_of: Glossary/Accessibility +--- +<p><em>Η Προσβασιμότητα Ιστού</em> (<strong>A11Y</strong>) αναφέρεται στις καλύτερες τεχνικές διατήρησης της λειτουργικότητας μιας ιστοσελίδας παρά τους φυσικούς και τεχνικούς περιορισμούς. Η Προσβασιμότητα Ιστού ορίζεται τυπικά και συζητείται στο {{Glossary("W3C")}} διά μέσου της {{Glossary("WAI","Πρωτοβουλίας Προσβασιμότητας Διαδικτύου")}} (ΠΠΔ).</p> + +<h2 id="Learn_more">Learn more</h2> + +<h3 id="General_knowledge">General knowledge</h3> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility">Πηγές "Προσβασιμότητας Ιστού" του MDN</a></li> + <li><<{{Interwiki("wikipedia", "Web accessibility")}}>> στην <a href="https://el.wikipedia.org/wiki/%CE%A0%CF%8D%CE%BB%CE%B7:%CE%9A%CF%8D%CF%81%CE%B9%CE%B1" rel="external">Βικιπέδια</a></li> +</ul> + +<h3 id="Learn_web_accessibility">Learn web accessibility</h3> + +<ul> + <li><a href="http://webaim.org/" rel="external">Προσβασιμότητα Ιστού In Mind</a></li> +</ul> + +<h3 id="Technical_reference">Technical reference</h3> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/ARIA">Η ARIA τεκμηρίωση στο MDN</a></li> + <li><a href="http://www.w3.org/WAI/" rel="external">Η αρχική σελίδα της Πρωτοβουλίας της Προσβασιμότητας Ιστού στο MDN</a></li> + <li><a href="http://www.w3.org/TR/wai-aria/" rel="external">Η σύσταση WAI-ARIA</a></li> +</ul> diff --git a/files/el/learn/common_questions/index.html b/files/el/learn/common_questions/index.html new file mode 100644 index 0000000000..4aafae4a32 --- /dev/null +++ b/files/el/learn/common_questions/index.html @@ -0,0 +1,135 @@ +--- +title: Common questions +slug: Learn/Common_questions +tags: + - CodingScripting + - Infrastructure + - Learn + - NeedsTranslation + - TopicStub + - Web + - WebMechanics +translation_of: Learn/Common_questions +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">This section of the Learning Area is designed to provide answers to common questions that may come up, which are not necessarily part of the structured core learning pathways (e.g. the <a href="/en-US/docs/Learn/HTML">HTML</a> or <a href="/en-US/docs/Learn/CSS">CSS</a> learning articles.) These articles are designed to work on their own.</p> + +<h2 id="How_the_Web_works">How the Web works</h2> + +<p>This section covers web mechanics —questions relating to general knowledge of the Web ecosystem and how it works.</p> + +<dl> + <dt> + <h3 id="How_does_the_Internet_work"><a href="/en-US/docs/Learn/Common_questions/How_does_the_Internet_work">How does the Internet work?</a></h3> + </dt> + <dd>The <strong>Internet</strong> is the backbone of the Web, the technical infrastructure that makes the Web possible. At its most basic, the Internet is a large network of computers which communicate all together. This article discusses how it works, at a basic level.</dd> + <dt> + <h3 id="What_is_the_difference_between_webpage_website_web_server_and_search_engine"><a href="/en-US/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">What is the difference between webpage, website, web server, and search engine?</a></h3> + </dt> + <dd>In this article we describe various web-related concepts: webpages, websites, web servers, and search engines. These terms are often confused by newcomers to the Web, or are incorrectly used. Let's learn what they each mean!</dd> + <dt> + <h3 id="What_is_a_URL"><a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">What is a URL?</a></h3> + </dt> + <dd>With {{Glossary("Hypertext")}} and {{Glossary("HTTP")}}, URL is one of the key concepts of the Web. It is the mechanism used by {{Glossary("Browser","browsers")}} to retrieve any published resource on the web.</dd> + <dt> + <h3 id="What_is_a_domain_name"><a href="/en-US/docs/Learn/Common_questions/What_is_a_domain_name">What is a domain name?</a></h3> + </dt> + <dd>Domain names are a key part of the Internet infrastructure. They provide a human-readable address for any web server available on the Internet.</dd> + <dt> + <h3 id="What_is_a_web_server"><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">What is a web server?</a></h3> + </dt> + <dd>The term "Web server" can refer to the hardware or software that serves web sites to clients across the Web — or both of them working together. In this article we go over how web servers work, and why they're important.</dd> + <dt> + <h3 id="What_are_hyperlinks"><a href="/en-US/docs/Learn/Common_questions/What_are_hyperlinks">What are hyperlinks?</a></h3> + </dt> + <dd>In this article, we'll go over what hyperlinks are and why they matter.</dd> +</dl> + +<h2 id="Tools_and_setup">Tools and setup</h2> + +<p>Questions related to the tools/software you can use to build websites.</p> + +<dl> + <dt> + <h3 id="How_much_does_it_cost_to_do_something_on_the_Web"><a href="/en-US/docs/Learn/Common_questions/How_much_does_it_cost">How much does it cost to do something on the Web?</a></h3> + </dt> + <dd>When you're launching a website, you may spend nothing or your costs may go through the roof. In this article we discuss how much everything costs and what you get for what you pay (or don't pay).</dd> + <dt> + <h3 id="What_software_do_I_need_to_build_a_website"><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">What software do I need to build a website?</a></h3> + </dt> + <dd>In this article we explain which software components you need when you're editing, uploading, or viewing a website.</dd> + <dt> + <h3 id="What_text_editors_are_available"><a href="/en-US/docs/Learn/Common_questions/Available_text_editors">What text editors are available?</a></h3> + </dt> + <dd>In this article we highlight some things to think about when choosing and installing a text editor for web development.</dd> + <dt> + <h3 id="What_are_browser_developer_tools"><a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools?</a></h3> + </dt> + <dd>Every browser features a set of devtools for debugging HTML, CSS, and other web code. This article explains how to use the basic functions of your browser's devtools.</dd> + <dt> + <h3 id="How_do_you_make_sure_your_website_works_properly"><a href="/en-US/docs/Learn/Common_questions/Checking_that_your_web_site_is_working_properly">How do you make sure your website works properly?</a></h3> + </dt> + <dd>So you've published your website online — very good! But are you sure it works properly? This article provides some basic troubleshooting steps.</dd> + <dt> + <h3 id="How_do_you_set_up_a_local_testing_server"><a href="/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">How do you set up a local testing server?</a></h3> + </dt> + <dd> + <div> + <p>This article explains how to set up a simple local testing server on your machine, and the basics of how to use it.</p> + </div> + </dd> + <dt> + <h3 id="How_do_you_upload_files_to_a_web_server"><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">How do you upload files to a web server?</a></h3> + </dt> + <dd>This article shows how to publish your site online with <a class="glossaryLink" href="https://developer.mozilla.org/en-US/docs/Glossary/FTP" title="FTP: FTP (File Transfer Protocol) is the standard network protocol for transferring files from one host to another over the Internet through TCP.">FTP</a> tools — one of the most common ways to get a website online so others can access it from their computers.</dd> + <dt> + <h3 id="How_do_I_use_GitHub_Pages"><a href="/en-US/docs/Learn/Common_questions/Using_GitHub_Pages">How do I use GitHub Pages?</a></h3> + </dt> + <dd>This article provides a basic guide to publishing content using GitHub's gh-pages feature.</dd> + <dt> + <h3 id="How_do_you_host_your_website_on_Google_App_Engine"><a href="/en-US/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">How do you host your website on Google App Engine?</a></h3> + </dt> + <dd>Looking for a place to host your website? Here's a step-by-step guide to hosting your website on Google App Engine.</dd> + <dt> + <h3 id="What_tools_are_available_to_debug_and_improve_website_performance"><a href="/en-US/docs/Tools/Performance">What tools are available to debug and improve website performance?</a></h3> + </dt> + <dd>This set of articles shows you how to use the Developer Tools in Firefox to debug and improve performance of your website, using the tools to check the memory usage, the JavaScript call tree, the amount of DOM nodes being rendered, and more.</dd> +</dl> + +<h2 id="Design_and_accessibility">Design and accessibility</h2> + +<p>This section lists questions related to aesthetics, page structure, accessibility techniques, etc.</p> + +<dl> + <dt> + <h3 id="How_do_I_start_to_design_my_website"><a href="/en-US/docs/Learn/Common_questions/Thinking_before_coding">How do I start to design my website?</a></h3> + </dt> + <dd>This article covers the all-important first step of every project: define what you want to accomplish with it.</dd> + <dt> + <h3 id="What_do_common_web_layouts_contain"><a href="/en-US/docs/Learn/Common_questions/Common_web_layouts">What do common web layouts contain?</a></h3> + </dt> + <dd>When designing pages for your website, it's good to have an idea of the most common layouts. This article runs thorugh some typical web layouts, looking at the parts that make up each one.</dd> + <dt> + <h3 id="What_is_accessibility"><a href="/en-US/docs/Learn/Common_questions/What_is_accessibility">What is accessibility?</a></h3> + </dt> + <dd>This article introduces the basic concepts behind web accessibility.</dd> + <dt> + <h3 id="How_can_we_design_for_all_types_of_users"><a href="/en-US/docs/Learn/Common_questions/Design_for_all_types_of_users">How can we design for all types of users?</a></h3> + </dt> + <dd>This article provides basic techniques to help you design websites for any kind of user — quick accessibility wins, and other such things.</dd> + <dt> + <h3 id="What_HTML_features_promote_accessibility"><a href="/en-US/docs/Learn/Common_questions/HTML_features_for_accessibility">What HTML features promote accessibility?</a></h3> + </dt> + <dd>This article describes specific features of HTML that can be used to make a web page more accessible to people with different disabilities.</dd> +</dl> + +<h2 id="HTML_CSS_and_JavaScript_questions">HTML, CSS and JavaScript questions</h2> + +<p>For common solutions to HTML/CSS/JavaScript problems, try the following articles:</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto">Use HTML to solve common problems</a></li> + <li><a href="/en-US/docs/Learn/CSS/Howto">Use CSS to solve common problems</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Howto">Use JavaScript to solve common problems</a></li> +</ul> diff --git a/files/el/learn/common_questions/πώς_δουλεύει_το_διαδίκτυο/index.html b/files/el/learn/common_questions/πώς_δουλεύει_το_διαδίκτυο/index.html new file mode 100644 index 0000000000..ecbf0f41eb --- /dev/null +++ b/files/el/learn/common_questions/πώς_δουλεύει_το_διαδίκτυο/index.html @@ -0,0 +1,97 @@ +--- +title: Πώς δουλεύει το Διαδίκτυο; +slug: Learn/Common_questions/Πώς_δουλεύει_το_Διαδίκτυο +tags: + - Αρχάριος + - Εκμάθηση + - Μηχανισμοί Ιστού +translation_of: Learn/Common_questions/How_does_the_Internet_work +--- +<div class="summary"> +<p>Αυτό το άρθρο συζητά τι είναι το Διαδίκτυο και πώς δουλεύει.</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Προαπαιτούμενα:</th> + <td>Κανένα, αλλά σας παροτρύνουμε να διαβάσετε το <a href="/en-US/docs/Learn/Thinking_before_coding">Άρθρο στη θέσπιση στόχων</a> πρώτα.</td> + </tr> + <tr> + <th scope="row">Ζητούμενο:</th> + <td>Θα μάθετε τα βασικά για την τεχνική υποδομή του Ιστού και τη διαφορά μεταξύ Διαδικτύου και Ιστού.</td> + </tr> + </tbody> +</table> + +<h2 id="Περίληψη">Περίληψη</h2> + +<p>Το Διαδίκτυο είναι η ραχοκοκαλιά του Ιστού, η τεχνική υποδομή που καθιστά τον Ιστό δυνατό. Στη βάση του, το Διαδίκτυο είναι ένα μεγάλο δίκτυο από υπολογιστές που επικοινωνούν όλοι μεταξύ τους.</p> + +<p><a href="http://en.wikipedia.org/wiki/Internet#History" rel="external">Η ιστορία του Διαδικτύου είναι κάπως ασαφής</a>. Ξεκίνησε στα 1960 ως ένα ερευνητικό έργο χρηματοδοτούμενο απ' τον στρατό των ΗΠΑ, μετά εξελίχθηκε σε μια δημόσια υποδομή στα 1980 με την υποστήριξη πολλών δημοσίων πανεπιστημίων και ιδιωτικών εταιριών. Οι διάφορες τεχνολογίες που υποστηρίζουν το Διαδίκτυο έχουν εξελιχθεί με το χρόνο, αλλά ο τρόπος που δουλεύει δεν έχει αλλάξει και πολύ: Διαδίκτυο είναι ένας τρόπος να συνδέεις υπολογιστές όλους μεταξύ τους, και να εξασφαλίζεις ότι, ό,τι κι αν συμβεί, βρίσκουν ένα τρόπο να παραμένουν συνδεδεμένοι.</p> + +<h2 id="Διαδραστική_Μαθηση">Διαδραστική Μαθηση</h2> + +<ul> + <li><a href="https://www.youtube.com/watch?v=7_LPdttKXPc" rel="external">Πώς δουλεύει το διαδίκτυο, σε 5 λεπτά</a>: Ένα 5 λεπτών βίντεο για την κατανόηση των πολύ βασικών εννοιών του Διαδικτύου απ' τον Άαρον Τίτους.</li> +</ul> + +<h2 id="Βαθύτερη_κατάδυση">Βαθύτερη κατάδυση</h2> + +<h3 id="Ένα_απλό_δίκτυο">Ένα απλό δίκτυο</h3> + +<p>Όταν δύο υπολογιστές χρειάζεται να επικοινωνήσουν, πρέπει να τους ενώσεις, είτε φυσικά (συνήθως με ένα <a href="http://en.wikipedia.org/wiki/Ethernet_crossover_cable" rel="external">καλώδιο Ethernet</a>) είτε ασύρματα (για παράδειγμα με <a href="http://en.wikipedia.org/wiki/WiFi" rel="external">WiFi</a> ή <a href="http://en.wikipedia.org/wiki/Bluetooth" rel="external">Bluetooth</a> συστήματα). Όλοι οι σύγχρονοι υπολογιστές μπορούν να υποστηρίξουν οποιεσδήποτε από αυτές τις συνδέσεις.</p> + +<div class="note"> +<p><strong>Σημείωση:</strong> Για το υπόλοιπο αυτού του άρθρου, θα μιλήσουμε μόνο για φυσικά καλώδια, αλλά τα ασύρματα δίκτυα δουλεύουν παρόμοια.</p> +</div> + +<p><img alt="Two computers linked together" src="https://mdn.mozillademos.org/files/8441/internet-schema-1.png" style="height: 152px; width: 600px;"></p> + +<p>Ένα τέτοιο δίκτυο δεν είναι περιορισμένο σε δύο υπολογιστές. Μπορείτε να συνδέσετε όσους υπολογιστές επιθυμείτε. Αλλά γίνεται πολύπλοκο γρήγορα. Εάν προσπαθείτε να συνδέσετε, πείτε, δέκα υπολογιστές, χρειάζετε 45 καλώδια, με εννέα πρίζες σε κάθε υπολογιστή!</p> + +<p><img alt="Ten computers all together" src="https://mdn.mozillademos.org/files/8443/internet-schema-2.png" style="height: 576px; width: 600px;"></p> + +<p>Για να λυθεί αυτό το πρόγραμμα, κάθε υπολογστής σε ένα δίκτυο είναι συνδεδεμένος σε ένα ειδικό μικρό υπολογιστή που ονομάζεται <em>δρομολογητής</em> (<em>router</em>). Αυτός ο <em>δρομολογητής</em> έχει μόνο μια δουλειά: σαν ένα σηματοδότη σε σιδηροδρομικό σταθμό, εξασφαλίζει ότι ένα μήνυμα σταλμένο από έναν υπολογιστή φθάνει στο σωστό υπολογιστή προορισμού. Για να στείλει ένα μήνυμα στον υπολογιστή Β, ο υπολογιστής Α πρέπει να στείλει το μήνυμα στο δρομολογητή, ο οποίος με τη σειρά του προωθεί το μήνυμα στον υπολογιστή Β και σιγουρεύεται ότι το μήνυμα δεν παραδώθηκε στον υπολογιστή C.</p> + +<p>Μόλις προσθέσουμε ένα δρομολογητή στο σύστημα, το δίκτυο μας των 10 υπολογιστών απαιτεί μόνο 10 καλώδια: μία μονή πρίζα για κάθε υπολογιστή και ένα δρομολογητή με 10 βύσματα.</p> + +<p><img alt="Ten computers with a router" src="https://mdn.mozillademos.org/files/8445/internet-schema-3.png" style="height: 576px; width: 600px;"></p> + +<h3 id="Ένα_δίκτυο_δικτύων">Ένα δίκτυο δικτύων</h3> + +<p>Μέχρι εδώ καλά. Αλλά τι γίνεται με εκατοντάδες, χιλιάδες, εκατομμύριους υπολογιστές; Φυσικά ένας μόνος <em>δρομολογητής</em> δεν κλιμακώνεται τόσο πολύ, αλλά, αν διαβάσετε προσεκτικά, είπαμε ότι ένας<em> δρομολογητής</em> είναι ένας υπολογιστής όπως όλοι οι άλλοι, οπότε τι μας αποτρέπει απ' την ένωση δύο <em>δρομολογητών</em> μαζί; Τίποτα, οπότε ας το κάνουμε.</p> + +<p><img alt="Two routers linked together" src="https://mdn.mozillademos.org/files/8447/internet-schema-4.png"></p> + +<p>Συνδέοντας υπολογιστές σε δρομολογητές, είμαστε ικανοί να κλιμακώσουμε απεριόριστα.</p> + +<p><img alt="Routers linked to routers" src="https://mdn.mozillademos.org/files/8449/internet-schema-5.png" style="height: 563px; width: 600px;"></p> + +<p>Ένα τέτοιο δίκτυο έρχεται πολύ κοντά σε αυτό που ονομάζουμε το Διαδίκτυο, αλλά μας λείπει κάτι. Φτιάξαμε ένα δίκτυο για τους δικούς μας σκοπούς. Υπάρχουν και άλλα δικτύα εκεί έξω: οι φίλοι σας, οι γείτονές σας, όλοι μπορούν να έχουν το δικό τους δίκτυο από υπολογιστές. Αλλά δεν είναι πραγματικά εφικτό να εγκαταστήσετε καλώδια μεταξύ του σπιτιού σας και του υπόλοιπου κόσμου, όποτε πώς το διαχειρίζεστε; Λοιπόν, υπάρχουν ήδη καλώδια συνδεδεμένα με το σπίτι σας, για παράδειγμα, ηλεκτρικής ενέργειας και τηλεφώνου. Η τηλεφωνική υποδομή ήδη συνδέει το σπίτι σας με οποιονδήποτε στον κόσμο οπότε είναι το τέλειο καλώδιο που χρειαζόμαστε. Για να συνδέσουμε το δίκτυό μας στην τηλεφωνική υποδομή, χρειαζόμαστε ένα ειδικό κομμάτι εξοπλισμού που λέγεται <em>μόντεμ.</em> Αυτό το <em>μόντεμ</em> μετατρέπει την πληροφορία από το δίκτυό μας σε πληροφορία διαχειρίσιμη απ' την τηλεφωνική υποδομή και τούμπαλιν.</p> + +<p><img alt="A router linked to a modem" src="https://mdn.mozillademos.org/files/8451/internet-schema-6.png" style="height: 340px; width: 600px;"></p> + +<p>Οπότε είμαστε συνδεδεμένοι στην τηλεφωνική υποδομή. Το επόμενο βήμα είναι να στείλουμε μηνύματα από το δίκτυό μας στο δίκτυο που θέλουμε να συνδεθούμε. Για να το κάνουμε αυτό, θα συνδέσουμε το δίκτυό μας σε έναν Πάροχο Διαδικτυακών Υπηρεσιών (Internet Service Provider). Ένας Πάροχος Διαδικτυακών Υπηρεσιών (ISP) είναι μια εταιρία που διαχειρίζεται μερικούς ειδικούς <em>δρομολογητές</em> που συνδέονται όλοι μεταξύ τους και μπορούν επίσης να προσπελάσουν τους δρομολογητές άλλων Παρόχων. Οπότε το μήνυμα απ' το δίκτυό μας μεταφέρεται μέσω του δικτύου των δικτύων των Παρόχων στο δίκτυο προορισμού. Το Διαδίκτυο αποτελείται από όλη αυτήν την υποδομή των δικτύων.</p> + +<p><img alt="Full Internet stack" src="https://mdn.mozillademos.org/files/8453/internet-schema-7.png" style="height: 1293px; width: 340px;"></p> + +<h3 id="Εύρεση_υπολογιστών">Εύρεση υπολογιστών</h3> + +<p>Εάν θέλετε να στείλετε ένα μήνυμα σε έναν υπολογιστή, πρέπει να διευκρινίσετε σε ποιον. Επομένως οποιoσδήποτε υπολογιστής συνδεδεμένος σε ένα δίκτυο έχει μια μοναδική διεύθυνση για την αναγνώρισή του, που λέγεται «διεύθυνση IP» (όπου το IP σημαίνει <em>Πρωτόκολλο Διαδικτύου - Internet Protocol</em>). Είναι μια διεύθυνση αποτελούμενη από μια σειρά τεσσάρων αριθμών χωριζόμενων από τελείες, για παράδειγμα: <code>192.168.2.10</code>.</p> + +<p>Αυτό είναι απολύτως φυσιολογικό για υπολογιστές, αλλά εμείς τα ανθρώπινα όντα δυσκολευόμαστε στη θύμηση τέτοιων διευθύνσεων. Για να γίνουν τα πράγματα ευκολότερα, μπορούμε να δώσουμε ψευδώνυμο σε μια διεύθυνση IP με ένα ανθρωπίνως αναγνώσιμο όνομα που λέγεται <em>όνομα τομέα</em> (<em>domain name</em>)<em>. </em>Για παράδειγμα, <code>google.com</code> είναι το όνομα τομέα που χρησιμοποιείται έναντι της IP διεύθυνσης <code>173.194.121.32</code>. Οπότε χρησιμοποιώντας το όνομα τομέα είναι ο ευκολότερος τρόπος για εμάς να συνδεόμαστε με έναν υπολογιστή μέσω του Διαδικτύου.</p> + +<p><img alt="Show how a domain name can alias an IP address" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p> + +<h3 id="Διαδίκτυο_και_ο_Ιστός">Διαδίκτυο και ο Ιστός</h3> + +<p>Όπως μπορείτε να παρατηρήσετε, όταν περιηγούμαστε στον Ιστό με έναν Περιηγητή Ιστού (Web browser), συνήθως χρησιμοποιούμε το όνομα τομέα για να συνδεθούμε σε έναν ιστότοπο. Αυτό σημαίνει ότι το Διαδίκτυο και ο Ιστός είναι το ίδιο πράγμα; Δεν είναι τόσο απλό. Όπως είδαμε, το Διαδίκτυο είναι η τεχνική υποδομή που επιτρέπει εκατομμύριους υπολογιστές να είναι συνδεδεμένοι όλοι μεταξύ τους. Μεταξύ αυτών των υπολογιστών, μερικοί υπολογιστές (ονομαζόμενοι (<em>Διακομιστές Ιστού - Web Servers</em>) μπορούν να στείλουν μηνύματα κατανοητά μόνο σε περιηγητές ιστού.<em> </em>Το <em>Διαδίκτυο </em>είναι μια υποδομή, ενώ ο Ιστός είναι μια υπηρεσία δημιουργημένη πάνω στην υποδομή. Αξίζει να σημειωθεί ότι υπάρχουν αρκετές άλλες υπηρεσίες δημιουργημένες μέσα στο Διαδίκτυο, όπως το η-ταχυδρομείο (email) και το {{Glossary("IRC")}}.</p> + +<h2 id="Επόμενα_βήματα">Επόμενα βήματα</h2> + +<ul> + <li><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">Πώς δουλεύει ο Ιστός</a></li> + <li><a href="/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine">Κατανοώντας τη διαφορά μεταξύ ιστοσελίδας, ιστοτόπου, και μηχανής αναζήτησης</a></li> + <li><a href="/en-US/docs/Learn/Understanding_domain_names">Κατανοώντας τα ονόματα τομέα</a></li> +</ul> diff --git a/files/el/learn/common_questions/σελίδες_τόποι_διακομιστές_και_μηχανές_αναζήτησης/index.html b/files/el/learn/common_questions/σελίδες_τόποι_διακομιστές_και_μηχανές_αναζήτησης/index.html new file mode 100644 index 0000000000..ac2d66edfe --- /dev/null +++ b/files/el/learn/common_questions/σελίδες_τόποι_διακομιστές_και_μηχανές_αναζήτησης/index.html @@ -0,0 +1,127 @@ +--- +title: >- + Ποια είναι η διαφορά μεταξύ ιστοσελίδας, ιστότοπου, διακομιστή ιστού, και + μηχανής αναζήτησης; +slug: Learn/Common_questions/Σελίδες_τόποι_διακομιστές_και_μηχανές_αναζήτησης +tags: + - Αρχάριος + - Μηχανισμοί Ιστού + - Χρειάζεται Διαδραστικό Μάθημα +translation_of: Learn/Common_questions/Pages_sites_servers_and_search_engines +--- +<div class="summary"> +<p><span class="seoSummary">Σε αυτό το άρθρο περιγράφουμε διάφορες έννοιες σχετικά με τον ιστό: ιστότοποι, ιστοσελίδες, διακομιστές ιστού, και μηχανές αναζήτησης. Αυτοί οι όροι συχνά μπερδεύονται απ' τους νεοφερμένους στον ιστό, ή χρησιμοποιούνται λανθασμένα. Ας μάθουμε τι σημαίνει ο κάθε ένας.</span></p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Προαπαιτούμενα:</th> + <td>Θα πρέπει να γνωρίζεις <a href="/en-US/Learn/How_the_Internet_works">πώς δουλεύει το Διαδίκτυο</a>.</td> + </tr> + <tr> + <th scope="row">Ζητούμενο:</th> + <td>Ικανοί να περιγράψετε τις διαφορές μεταξύ μιας ιστοσελίδας, ενός ιστότοπου, ενός διακομιστή ιστού, και μιας μηχανής αναζήτησης.</td> + </tr> + </tbody> +</table> + +<h2 id="Περίληψη">Περίληψη</h2> + +<p>Όπως με κάθε πεδίο γνώσης, ο ιστός έρχεται με πολλές ασυναρτησίες. Μην ανησυχείτε, δε θα σας κατακλύσουμε με όλες αυτές (έχουμε ένα <a href="/en-US/docs/Glossary">γλωσσάρι</a> αν είστε περίεργοι). Ωστόσο, υπάρχουν μερικοί βασικοί όροι που πρέπει να καταλάβετε στο ξεκίνημα, αφού θα ακούσετε αυτές τις εκφράσεις συνεχώς καθώς συνεχίζετε να διαβάζετε. Είναι εύκολο να μπερδέψετε αυτούς τους όρους μερικές φορές, αφού αναφέρονται σε σχετικές μα διαφορετικές λειτουργικότητες. Στην πραγματικότητα, θα δείτε μερικές φορές αυτούς τους όρους να καταχρώνται σε δελτία ειδήσεων και αλλού, οπότε το να τους μπερδέψετε είναι κατανοητό.</p> + +<p>Θα καλύψουμε αυτούς τους όρους και τεχνολογίες με περισσότερη λεπτομέρεια καθώς προχωρούμε κι άλλο, αλλά αυτοί οι γρήγοροι ορισμοί θα είναι μια σπουδαία αρχή για σας:</p> + +<dl> + <dt>ιστοσελίδα</dt> + <dd>Ένα έγγραφο που μπορεί να απεικονιστεί σε ένα πρόγραμμα περιήγησης όπως το Firefox, το Google Chrome, το Opera, το Microsoft Internet Explorer ή Edge, ή το Safari της Apple. Αυτές επίσης συνηθίζεται να λέγονται απλά «σελίδες».</dd> + <dt>ιστότοπος</dt> + <dd>Μια συλλογή ιστοσελίδων που είναι ομαδοποιημένες και συνήθως συνδεδεμένες με διάφορους τρόπους. Συνήθως λέγεται ένας «ιστότοπος» ή απλά ένας «τόπος».</dd> + <dt>διακομιστής ιστού</dt> + <dd>Ένας υπολογιστής που φιλοξενεί έναν ιστότοπο στο Διαδίκτυο.</dd> + <dt>μηχανή αναζήτησης</dt> + <dd>Ένας ιστότοπος που σας βοηθάει να βρείτε άλλες ιστοσελίδες, όπως η Google, η Bing, η Yahoo.</dd> +</dl> + +<p>Ας δούμε μια απλή αναλογία — μια δημόσια βιβλιοθήκη. Αυτά είναι που κάνετε γενικά όταν επισκέπτεστε μια βιβλιοθήκη:</p> + +<ol> + <li>Βρίσκετε ένα ευρετήριο αναζήτησης και ψάχνετε τον τίτλο του βιβλίου που θέλετε.</li> + <li>Σημειώνετε τον αριθμό καταλόγου του βιβλίου.</li> + <li>Πηγαίνετε στο συγκεκριμένο τμήμα που περιέχει το βιβλίο, βρίσκετε το σωστό αριθμό καταλόγου, και παίρνετε το βιβλίο.</li> +</ol> + +<p>Ας συγκρίνουμε τη βιβλιοθήκη με ένα διακομιστή ιστού:</p> + +<ul> + <li>Η βιβλιοθήκη είναι σαν έναν εξυπηρετητή ιστού. Έχει διάφορα τμήματα, τα οποία είναι παρόμοια με έναν εξυπηρετητή ιστού που φιλοξενεί πολλαπλούς ιστότοπους.</li> + <li>Τα διαφορετικά τμήματα (φυσική, μαθηματικά, ιστορία, κ.λπ.) στη βιβλιοθήκη είναι σαν τους ιστότοπους. Κάθε τμήμα είναι σαν ένας μοναδικός ιστότοπος (δύο τμήματα δεν περιέχουν ίδια βιβλία).</li> + <li>Τα βιβλία στα τμήματα είναι σαν τις ιστοσελίδες. Ένας ιστότοπος μπορεί να έχει πολλές ιστοσελίδες, π.χ., το τμήμα Φυσικής (ο ιστότοπος) θα έχει βιβλία περί θερμοκρασίας, ήχου, θερμοδυναμικής, στατικές, κ.λπ. (οι ιστοσελίδες).</li> + <li>Το ευρετήριο αναζήτησης είναι σα μια μηχανή αναζήτησης. Κάθε βιβλίο έχει τη δική του μοναδική θέση στη βιβλιοθήκη (δύο βιβλία δε γίνεται να είναι στο ίδιο μέρος) που καθορίζεται απ' τον αριθμό καταλόγου.</li> + <li>Ομοίως, οι ιστοσελίδες έχουν κι αυτές μοναδικές διευθύνσεις. Αυτές οι μοναδικές διευθύνσεις χρησιμοποιούνται για την ανάκτηση μιας ιστοσελίδας από ένα διακομιστή ιστού πληκτρολογώντας τη διεύθυνση στη γραμμή διεύθυνσης ενός φυλλομετρητή (Mozilla Firefox, Safari, Google chrome, κ.λπ.).</li> +</ul> + +<dl> + <dt> </dt> +</dl> + +<h2 id="Διαδραστική_μάθηση">Διαδραστική μάθηση</h2> + +<p><em>Δεν υπάρχει διαδραστική μάθηση ακόμα. <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">Παρακαλούμε, σκεφτείτε να συνεισφέρετε</a>.</em></p> + +<h2 id="Βαθύτερη_κατάδυση">Βαθύτερη κατάδυση</h2> + +<p>Λοιπόν, ας σκάψουμε βαθύτερα στο πώς αυτοί οι τέσσερις όροι σχετίζονται και γιατί συγχέονται μερικές φορές μεταξύ τους.</p> + +<h3 id="ιστοσελίδα">ιστοσελίδα</h3> + +<p>Μια ιστοσελίδα είναι απλά ένα έγγραφο απεικονιζόμενο από έναν {{Glossary("φυλλομετρητή")}}. Τέτοια έγγραφα είναι γραμμένα σε {{Glossary("HTML")}} γλώσσα (την οποία θα εξετάσουμε περαιτέρω με περισσότερη λεπτομέρεια σε <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">άλλα άρθρα</a>). Μια ιστοσελίδα μπορεί να ενσωματώσει μια ποικιλία από διαφορετικούς τύπους πόρων όπως:</p> + +<ul> + <li><em>πληροφορία στυλ (style information)</em> — ελέγχοντας την εμφάνιση και την αίσθηση μιας σελίδας</li> + <li><em>δέσμες ενεργειών (scripts</em>) — που προσθέτουν διαδραστικότητα στη σελίδα</li> + <li><em>πολυμέσα (media</em>) — εικόνες, ήχους, και βίντεο.</li> +</ul> + +<div class="note"> +<p><strong>Σημείωση: </strong>Οι φυλλομετρητές μπορούν ακόμη να εμφανίσουν άλλα έγγραφα όπως {{Glossary("PDF")}} αρχεία ή εικόνες, αλλά ο όρος <strong>ιστοσελίδα</strong> αναφέρεται συγκεκριμένα σε HTML έγγραφα. Αλλιώς, χρησιμοποιούμε μόνο τον όρο<strong> έγγραφο</strong>.</p> +</div> + +<p>Όλες οι ιστοσελίδες διαθέσιμες στο διαδίκτυο είναι προσβάσιμες στον ιστό μέσω μιας μοναδικής διεύθυνσης. Για να προσπελάσετε μια σελίδα, απλά πληκτρολογείτε τη διεύθυνσή της στη γραμμή διεύθυνσης του προγράμματος περιήγησής σας:</p> + +<p style="text-align: center;"><img alt="Example of a web page address in the browser address bar" src="https://mdn.mozillademos.org/files/8529/web-page.jpg" style="height: 239px; width: 650px;"></p> + +<p>Ένας <em>ιστότοπος</em> είναι μια συλλογή συνδεδεμένων ιστοσελίδων (μαζί με τους σχετικούς της πόρους) που μοιράζονται ένα μοναδικό όνομα τομέα. Κάθε ιστοσελίδα δοθείσης του ιστότοπου παρέχει ρητούς συνδέσμους—τις περισσότερες φορές στη μορφή κομματιών κειμένου που είναι δυνατό να γίνει κλικ—που επιτρέπουν το χρήστη να μετακινηθεί από μία σελίδα του ιστότοπου σε μία άλλη.</p> + +<p>Για να προσπελάσετε έναν ιστότοπο, πληκτρολογήστε το όνομα τομέα του στη γραμμή διεύθυνσης του φυλλομετρητή σας, και το πρόγραμμα περιήγησης θα εμφανίσει την κύρια ιστοσελίδα του ιστότοπου, ή <em>αρχική σελίδα - homepage </em>(ανεπίσημα αναφέρεται ως «η αρχική - the home»):</p> + +<p><img alt="Example of a web site domain name in the browser address bar" src="https://mdn.mozillademos.org/files/8531/web-site.jpg" style="display: block; height: 365px; margin: 0px auto; width: 650px;"></p> + +<p>Οι έννοιες της <em>ιστοσελίδας</em> και του <em>ιστότοπου</em> είναι ιδιαίτερα εύκολο να μπερδευτούν σε έναν ιστότοπο που περιέχει μόνο μια ιστοσελίδα. Ένας τέτοιος ιστότοπος μερικές φορές καλείται <em>μονοσέλιδος ιστότοπος ή single-page website.</em></p> + +<h3 id="Διακομιστής_ιστού">Διακομιστής ιστού</h3> + +<p>Ένας <em>διακομιστής ιστού </em>είναι ένας υπολογιστής που φιλοξενεί έναν ή περισσότερους ιστότοπους. «Φιλοξενώ» σημαίνει ότι όλες οι <em>ιστοσελίδες</em> και τα υποστηριζόμενα αρχεία τους είναι διαθέσιμα σε αυτόν τον υπολογιστή. Ο <em>διακομιστής ιστού</em> θα στείλει οποιαδήποτε ιστοσελίδα από τον ιστότοπο που φιλοξενεί σε οποιοδήποτε πρόγραμμα περιήγησης του χρήστη, ανά αίτηση του χρήστη.</p> + +<p>Μην μπερδεύετε τους <em>ιστότοπους </em>και τους <em>διακομιστές ιστού</em>. Για παράδειγμα, αν ακούσετε κάποιον να λέει, «Ο ιστότοπός μου δεν ανταποκρίνεται», στην πραγματικότητα σημαίνει ότι ο <em>διακομιστής ιστού</em> δεν ανταποκρίνεται και επομένως ο <em>ιστότοπος</em> δεν είναι διαθέσιμος. Πιο σημαντικά, αφού ένας διακομιστής ιστού μπορεί να φιλοξενήσει πολλαπλούς ιστότοπους, ο όρος <em>διακομιστής ιστού</em> δε χρησιμοποιείται ποτέ για να καθορίσει έναν ιστότοπο, μιας και θα προκαλούσε μεγάλη σύγχυση. Στο προηγούμενο μας παράδειγμα, αν λέγαμε, «Ο διακομιστής ιστού μου δεν ανταποκρίνεται», σημαίνει ότι δεν υπάρχει κανένας διαθέσιμος ιστότοπος σε αυτόν τον διακομιστή ιστού.</p> + +<h3 id="Μηχανή_αναζήτησης">Μηχανή αναζήτησης</h3> + +<p>Οι μηχανές αναζήτησης είναι μια κοινή πηγή σύγχυσης στον ιστό. Μια μηχανή αναζήτησης είναι ένα ειδικό είδος ιστότοπου που βοηθά τους χρήστες να βρουν ιστοσελίδες από <em>άλλους</em> ιστότοπους.</p> + +<p>Υπάρχουν πολλές εκεί έξω:<a href="https://www.google.com/"> Google</a>, <a href="https://www.bing.com/">Bing</a>, <a href="https://www.yandex.com/">Yandex</a>, <a href="https://duckduckgo.com/">DuckDuckGo</a>, και πολλές ακόμα. Μερικές είναι γενικού σκοπού, άλλες είναι εξειδικευμένες για συγκεκριμένα θέματα. Χρησιμοποιείστε οποιαδήποτε προτιμάτε.</p> + +<p>Πολλοί αρχάριοι του ιστού μπερδεύουν τις μηχανές αναζήτησης με τα προγράμματα περιήγησης. Ας το ξεκαθαρίσουμε: Ένα <strong><em>πρόγραμμα περιήγησης</em></strong> είναι ένα κομμάτι λογισμικού που ανακτά και εμφανίζει ιστοσελίδες· μια <em><strong>μηχανή αναζήτησης</strong></em> είναι ένας ιστότοπος που βοηθά τους ανθρώπους να βρουν ιστοσελίδες από άλλους ιστότοπους. Η σύγχυση προκύπτει επειδή, τη πρώτη φορά που κάποιος ανοίγει ένα πρόγραμμα περιήγησης, ο φυλλομετρητής δείχνει την αρχική σελίδα μιας μηχανής αναζήτησης. Αυτό βγάζει νόημα, γιατί, προφανώς, το πρώτο πράγμα που θέλετε να κάνετε με ένα πρόγραμμα περιήγησης είναι να βρείτε μια ιστοσελίδα για να δείτε. Μην συγχέετε την υποδομή (π.χ., το πρόγραμμα περιήγησης) με την υπηρεσία (π.χ., τη μηχανή αναζήτησης). Η διάκριση θα σας βοηθήσει αρκετά, αλλά ακόμα και μερικοί επαγγελματίες μιλάνε αόριστα, οπότε μη νιώθετε ανήσυχα γι' αυτό.</p> + +<p>Εδώ βλέπετε ένα στιγμιότυπο του Firefox που δείχνει την περιοχή αναζήτησης της Google ως την προκαθορισμένη σελίδα έναρξης:</p> + +<p><img alt="Example of Firefox nightly displaying a custom Google page as default" src="https://mdn.mozillademos.org/files/8533/search-engine.jpg" style="display: block; height: 399px; margin: 0px auto; width: 650px;"></p> + +<h2 id="Επόμενα_βήματα">Επόμενα βήματα</h2> + +<ul> + <li>Σκάψτε βαθύτερα: <a href="/en-US/docs/Learn/What_is_a_web_server">Τι είναι ένας διακομιστής ιστού</a></li> + <li>Δείτε πώς οι ιστοσελίδες είναι συνδεδεμένες σε έναν ιστότοπο: <a href="/en-US/docs/Learn/Understanding_links_on_the_web">Κατανοώντας τους συνδέσμους στον ιστό</a></li> +</ul> + +<p> </p> diff --git a/files/el/learn/common_questions/τι_είναι_οι_υπερσύνδεσμοι/index.html b/files/el/learn/common_questions/τι_είναι_οι_υπερσύνδεσμοι/index.html new file mode 100644 index 0000000000..b63ba8a117 --- /dev/null +++ b/files/el/learn/common_questions/τι_είναι_οι_υπερσύνδεσμοι/index.html @@ -0,0 +1,91 @@ +--- +title: Τι είναι οι υπερσύνδεμοι; +slug: Learn/Common_questions/Τι_είναι_οι_υπερσύνδεσμοι +translation_of: Learn/Common_questions/What_are_hyperlinks +--- +<div class="summary"> +<p>Σ' αυτό το άρθρο, θα εξετάσουμε τι είναι οι υπερσύνδεσμοι και γιατί έχουν σημασία.</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Προαπαιτούμενα:</th> + <td>Θα πρέπει να ξέρετε <a dir="ltr" href="https://developer.mozilla.org/el/docs/Learn/Common_questions/%CE%A0%CF%8E%CF%82_%CE%B4%CE%BF%CF%85%CE%BB%CE%B5%CF%8D%CE%B5%CE%B9_%CF%84%CE%BF_%CE%94%CE%B9%CE%B1%CE%B4%CE%AF%CE%BA%CF%84%CF%85%CE%BF" lang="el">πώς δουλεύει το Διαδίκτυο</a> και να είστε οικίοι με τη <a dir="ltr" href="https://developer.mozilla.org/el/docs/Learn/Common_questions/%CE%A3%CE%B5%CE%BB%CE%AF%CE%B4%CE%B5%CF%82_%CF%84%CF%8C%CF%80%CE%BF%CE%B9_%CE%B4%CE%B9%CE%B1%CE%BA%CE%BF%CE%BC%CE%B9%CF%83%CF%84%CE%AD%CF%82_%CE%BA%CE%B1%CE%B9_%CE%BC%CE%B7%CF%87%CE%B1%CE%BD%CE%AD%CF%82_%CE%B1%CE%BD%CE%B1%CE%B6%CE%AE%CF%84%CE%B7%CF%83%CE%B7%CF%82" lang="el">διαφορά μεταξύ ιστοσελίδας, ιστότοπου, διακομιστή ιστού, και μηχανής αναζήτησης</a>.</td> + </tr> + <tr> + <th scope="row">Ζητούμενο:</th> + <td>Μάθετε για τους συνδέσμους στον ιστό και γιατί έχουν σημασία.</td> + </tr> + </tbody> +</table> + +<h2 id="Περίληψη">Περίληψη</h2> + +<p>Οι Υπερσύνδεσμοι, συνήθως λέγονται σύνδεσμοι, είναι μια θεμελιώδης έννοια πίσω απ' τον Ιστό. Για να εξηγήσουμε τι είναι οι σύνδεσμοι, πρέπει να κάνουμε ένα βήμα πίσω στα πολύ βασικά της αρχιτεκτονικής του Ιστού.</p> + +<p>Πίσω στο 1989, ο Τιμ Μπέρνερς-Λι, ο εφευρέτης του Ιστού, μίλησε για τους τρεις πυλώνες που στέκεται ο Ιστός:</p> + +<ol> + <li>{{Glossary("URL")}}, ένα σύστημα διευθύνσεων που καταγράφει τα έγγραφα Ιστού</li> + <li>{{Glossary("HTTP")}}, ένα πρωτόκολλο επικοινωνίας για να βρίσκει έγγραφα όταν δίνονται με το URL τους.</li> + <li>{{Glossary("HTML")}}, μια μορφή εγγράφου που επιτρέπει τους ενσωματωμένους <em>υπερσυνδέσμους</em>.</li> +</ol> + +<p>Όπως μπορείτε να δείτε στους τρεις πυλώνες, όλα στον Ιστό περιστρέφονται γύρω από έγγραφα και πώς να τα προσπελάσουμε. Ο αρχικός σκοπός του Ιστού ήταν να παρέχει έναν εύκολο τρόπο να φτάνετε, να διαβάζετε, και να πλοηγήστε σε έγγραφα κειμένου. Από τότε, ο Ιστός έχει εξελιχθεί για να παρέχει πρόσβαση σε εικόνες, βίντεο, και δυαδικά δεδομένα, αλλά αυτές οι βελτιώσεις έχουν αλλάξει ελάχιστα τους τρεις πυλώνες.</p> + +<p>Πριν τον Ιστό, ήταν αρκετά δύσκολο να προσπελάσετε έγγραφα και να μεταφέρεστε από το ένα σε άλλο. Όντας ανθρωπίνως αναγνώσιμα, τα URL έκαναν τα πράγματα ευκολότερα, αλλά είναι δύσκολο να πληκτρολογήσετε ένα μακρύ URL όποτε θέλετε να προσπελάσετε ένα έγγραφο. Εδώ είναι που οι υπερσύνδεσμοι άλλαξαν τα πάντα. Οι σύνδεσμοι μπορούν να συσχετίσουν οποιαδήποτε συμβολοσειρά κειμένου με ένα URL, έτσι ώστε ο χρήστης να μπορεί ακαριαία να φτάσει το έγγραφο προορισμού ενεργοποιώντας το σύνδεσμο.</p> + +<p>Οι σύνδεσμοι ξεχωρίζουν από το περιβάλλοντα κείμενο με το να είναι υπογραμμισμένοι και σε μπλε κείμενο. Χτυπήστε ελαφρά ή κάντε κλικ σε έναν σύνδεσμο για να τον ενεργοποιήσετε, ή αν χρησιμοποιείτε ένα πληκτρολόγιο, πατήστε Tab μέχρι ο σύνδεσμος να είναι στο επίκεντρο και πατήστε Enter ή το πλήκτρο κενού (Spacebar).</p> + +<p><img alt="Example of a basic display and effect of a link in a web page" src="https://mdn.mozillademos.org/files/8625/link-1.png" style="height: 492px; width: 477px;"></p> + +<p>Οι σύνδεσμοι είναι η πρωτοπορία που έκανε τον Ιστό τόσο χρήσιμο και πετυχημένο. Στο υπόλοιπο αυτού του άρθρου, συζητάμε τους διάφορους τύπους συνδέσμων και την σημασία τους στη σύγχρονη σχεδίαση Ιστού (Web design).</p> + +<h2 id="Deeper_dive">Deeper dive</h2> + +<p>As we said, a link is a text string tied to a URL, and we use links to allow easy jumping from one document to another. That said, there are some nuances worth considering:</p> + +<h3 id="Types_of_links">Types of links</h3> + +<dl> + <dt>Internal link</dt> + <dd>A link between two webpages, where both webpages belong to your website, is called an internal link. Without internal links, there's no such thing as a website (unless, of course, it's a one-page website).</dd> + <dt>External link</dt> + <dd>A link from your webpage to someone else's webpage. Without external links, there is no Web, since the Web is a network of webpages. Use external links to provide information besides the content available through your webpage.</dd> + <dt>Incoming links</dt> + <dd>A link from someone else's webpage to your site. It's the opposite of an external link. Note that you don't have to link back when someone links to your site.</dd> +</dl> + +<p>When you're building a website, focus on internal links, since those make your site usable. Find a good balance between having too many links and too few. We'll talk about designing website navigation in another article, but as a rule, whenever you add a new webpage, make sure at least one of your other pages links to that new page. On the other hand, if your site has more than about ten pages, it's counter-productive to link to every page from every other page.</p> + +<p>When you're starting out, you don't have to worry about external and incoming links as much, but they are very important if you want search engines to find your site. (See below for more details.)</p> + +<h3 id="Anchors">Anchors</h3> + +<p>Most links tie two webpages together. <strong>Anchors </strong>tie two sections of one document together. When you follow a link pointing to an anchor, your browser jumps to another part of the current document instead of loading a new document. However, you make and use anchors the same way as other links.</p> + +<p><img alt="Example of a basic display and effect of an anchor in a web page" src="https://mdn.mozillademos.org/files/8627/link-2.png" style="height: 492px; width: 477px;"></p> + +<h3 id="Links_and_Search_Engines">Links and Search Engines</h3> + +<p>Links matter both to your users and to search engines. Every time search engines crawl a webpage, they index the website by following the links available on the webpage. Search engines not only follow links to discover the various pages of the website, but they also use the link's visible text to determine which search queries are appropriate for reaching the target webpage.</p> + +<p>Links influence how readily a search engine will link to your site. The trouble is, it's hard to measure search engines' activities. Companies naturally want their sites to rank highly in search results. We know the following about how search engines determine a site's rank:</p> + +<ul> + <li>A link's <em>visible text</em> influences which search queries will find a given URL.</li> + <li>The more <em>incoming links</em> a webpage can boast of, the higher it ranks in search results.</li> + <li><em>External links </em>influence the search ranking both of source and target webpages, but it is unclear by how much.</li> +</ul> + +<p><a href="http://en.wikipedia.org/wiki/Search_engine_optimization">SEO</a> (search engine optimization) is the study of how to make websites rank highly in search results. Improving a website's use of links is one helpful SEO technique.</p> + +<h2 id="Next_steps">Next steps</h2> + +<p>Now you'll want to set up some webpages with links.</p> + +<ul> + <li>To get some more theoretical background, learn about <a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">URLs and their structure</a>, since every link points to a URL.</li> + <li>Want something a bit more practical? The <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a> article of our <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module explains how to implement links in detail.</li> +</ul> diff --git a/files/el/learn/getting_started_with_the_web/index.html b/files/el/learn/getting_started_with_the_web/index.html new file mode 100644 index 0000000000..f40626603a --- /dev/null +++ b/files/el/learn/getting_started_with_the_web/index.html @@ -0,0 +1,58 @@ +--- +title: Ξεκινώντας με τον Παγκοσμιο Ιστό +slug: Learn/Getting_started_with_the_web +translation_of: Learn/Getting_started_with_the_web +--- +<div>{{LearnSidebar}}</div> + +<div class="summary"> +<p>To <em>Ξεκινώντας με τον Παγκόσμιο Ιστό </em>αποτελεί μια συνοπτική, εισαγωγική σειρά άρθρων που παρουσιάζει τις πρακτικές πτυχές της ανάπτυξης ιστοσελίδων. Θα στήσετε τα εργαλεία που χρειάζεστε για να δημιουργήσετε μια απλή ιστοσελίδα και για να δημοσιεύσετε τον δικό σας απλό κώδικα.</p> +</div> + +<h2 id="Η_ιστορία_του_πρώτου_σας_ιστότοπου">Η ιστορία του πρώτου σας ιστότοπου</h2> + +<p>Χρειάζεται πολύ δουλειά για να δημιουργήσετε έναν επαγγελματικό ιστότοπο, οπότε αν δεν έχετε καθόλου εμπειρία στην ανάπτυξη ιστοσελίδων, σας ενθαρρύνουμε να ξεκινήσετε από κάτι μικρό. Δεν θα δημιουργήσετε ένα νέο Facebook αμέσως, αλλά από την άλλη δεν θα είναι δύσκολο να δημιουργήσετε τον δικό σας απλό ιστότοπο online, οπότε θα ξεκινήσουμε από εκεί.</p> + +<p>Ακολουθώντας τα άρθρα που παρατίθενται παρακάτω, θα πάτε από το μηδέν στην πρώτη σας ιστοσελίδα online. Ας ξεκινήσουμε!</p> + +<h3 id="Εγκατάσταση_βασικού_λογισμικού"><a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Εγκατάσταση βασικού λογισμικού</a></h3> + +<p>Υπάρχουν πολλά εργαλεία που μπορείτε να διαλέξετε για την ανάπτυξη ενός ιστοτόπου. Εάν μόλις ξεκινάτε, ίσως να μπερδευτείτε από την πληθώρα προγραμμάτων επεξεργασίας κώδικα, από τα πλαίσια και τα εργαλεία ελέγχου που υπάρχουν εκεί έξω. Στην ενότητα <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Εγκατάσταση βασικού λογισμικού</a>, σας παρουσιάζουμε βήμα προς βήμα τον τρόπο εγκατάστασης μόνον του λογισμικού που χρειάζεστε για να ξεκινήσετε με τη βασική ανάπτυξη ιστοσελίδων.</p> + +<h3 id="What_will_your_website_look_like"><a href="/en-US/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">What will your website look like?</a></h3> + +<p>Πριν ξεκινήσετε να γράφετε κώδικα για τον ιστότοπό σας, θα πρέπει πρώτα να τον σχεδιάσετε. Τι πληροφορία θα παρουσιάσετε; Ποιές γραμματοσειρές και ποιά χρώματα θα χρησιμοποιήσετε; <a href="/en-US/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Πως θα φαίνεται ο ιστότοπός σας;</a> Περιγράφουμε μια απλή μέθοδο που μπορείτε να ακολουθήσετε για να σχεδιάσετε τόσο το περιεχόμενο όσο και την εμφάνιση του ιστότοπού σας. </p> + +<h3 id="Ενασχόληση_με_τα_αρχεία"><a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Ενασχόληση με τα αρχεία</a></h3> + +<p>Ένας ιστότοπος αποτελείται από πολλά αρχεία: περιεχόμενο κειμένου, κώδικα, φύλλα στυλ, περιεχόμενο πολυμέσων κ.ο.κ. Όταν χτίζετε έναν ιστότοπο, πρέπει να συγκεντρώσετε όλα αυτά τα αρχεία σε μια λογική δομή και να βεβαιωθείτε ότι μπορούν να "μιλούν" μεταξύ τους. Η ενότητα <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Ενασχόληση με αρχεία</a> εξηγεί πώς να οργανώσετε μια λογική δομή αρχείων για τον ιστότοπό σας και ποια θέματα θα πρέπει να γνωρίζετε.</p> + +<h3 id="Τα_βασικά_της_HTML"><a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">Τα βασικά της HTML</a></h3> + +<p>Η γλώσσα HTML (Hypertext Markup Language, Γλώσσα Σήμανσης Υπερκειμένου) είναι ο κώδικας που χρησιμοποιείτε για να δομήσετε το περιεχομένό σας στον Παγκόσμιο Ιστό και με τον οποί του δίνετε νόημα και σκοπό. Για παράδειγμα, το περιεχόμενό μου είναι ένα σύνολο παραγράφων ή μια λίστα με κουκκίδες; Έχω τοποθετήσει εικόνες στη σελίδα μου; Έχω έναν πίνακα δεδομένων; Η ενότητα <a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">Τα βασικά της HTML</a> παρέχει αρκετές πληροφορίες για να εξοικειώθείτε με τη γλώσσα HTML, χωρίς να σας κουράσει.</p> + +<h3 id="Τα_βασικά_των_CSS"><a href="/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics">Τα βασικά των CSS</a></h3> + +<p>Τα Cascading Stylesheets (CSS, Επικαλυπτόμενα Φύλλα Στυλ ή αλλιώς Φύλλα Διαδοχικού Στυλ) είναι ο κώδικας που χρησιμοποιείτε για να δώσετε στυλ στον ιστότοπό σας. Για παράδειγμα, θέλετε το κείμενο να είναι μαύρο ή κόκκινο; Πού πρέπει να εμφανισθεί το περιεχόμενο στην οθόνη; Ποιες εικόνες φόντου και ποια χρώματα θα πρέπει να χρησιμοποιηθούν για να διακοσμήσετε τον ιστότοπό σας; Η ενότητα <a href="/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics">Τα βασικά των CSS</a> σας μεταφέρουν σε αυτό που χρειάζεστε για να ξεκινήσετε.</p> + +<h3 id="Τα_βασικά_της_JavaScript"><a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Τα βασικά της JavaScript</a></h3> + +<p>Η JavaScript είναι η γλώσσα προγραμματισμού που χρησιμοποιείτε για να προσθέσετε διαδραστικές λειτουργίες στον ιστότοπό σας. Μερικά παραδείγματα θα μπορούσαν να είναι τα παιχνίδια, τα πράγματα που συμβαίνουν όταν πιέζονται κουμπιά ή εισάγονται δεδομένα σε φόρμες, τα δυναμικά εφέ styling, τα κινούμενα σχέδια και πολλά άλλα. Η ενότητα <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Τα βασικά της JavaScript</a> δίνουν μια ιδέα για το τι είναι δυνατό με αυτή τη συναρπαστική γλώσσα και πώς να ξεκινήσετε.</p> + +<h3 id="Δημοσίευση_του_ιστότοπού_σας"><a href="/en-US/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Δημοσίευση του ιστότοπού σας</a></h3> + +<p>Μόλις τελειώσετε με τη σύνταξη του κώδικα και την οργάνωση των αρχείων που αποτελούν τον ιστότοπό σας, πρέπει να τα δημοσιεύσετε όλα online, ώστε να μπορούν να τα βρουν οι χρήστες. Η ενότητα <a href="/en-US/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Δημοσίευση του κώδικα </a>περιγράφει τον τρόπο με τον οποίο μπορείτε να ανεβάσετε το δείγμα του απλού κώδικα σας στον παγκόσμιο ιστό με την ελάχιστη δυνατή προσπάθεια.</p> + +<h3 id="Πως_λειτουργεί_ο_Παγκόσμιος_Ιστός"><a href="/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Πως λειτουργεί ο Παγκόσμιος Ιστός</a></h3> + +<p>Όταν επισκέφτεσθε τον αγαπημένο σας ιστότοπο, συμβαίνουν πολλά και περίπλοκα πράγματα στο παρασκήνιο, τα οποία μπορεί να μην γνωρίζετε. Η ενότητα <a href="/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Πώς λειτουργεί ο Παγκόσμιος Ιστός</a> περιγράφει συνοπτικά το τι συμβαίνει όταν βλέπετε μια ιστοσελίδα στον υπολογιστή σας.</p> + +<h2 id="Δείτε_επίσης">Δείτε επίσης</h2> + +<p><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web Demystified</a>: Μια εξαιρετική σειρά βίντεο που εξηγεί τα θεμελιώδη στοιχεία του ιστού και που στοχεύει σε πλήρως αρχάριους στην ανάπτυξη ιστού. Δημιουργήθηκε από τον <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a>.</p> + +<div class="note"> +<h2 id="Feedback">Feedback</h2> + +<p>Βοηθήστε μας να βελτιώσουμε τους οδηγούς και τα tutorials σαν και αυτό εδώ συμπληρώνοντας το σχετικό <a href="https://www.surveygizmo.com/s3/4871248/MDN-Guides-Survey">ερωτηματολόγιο</a>.</p> +</div> diff --git a/files/el/learn/html/forms/index.html b/files/el/learn/html/forms/index.html new file mode 100644 index 0000000000..215164d6a6 --- /dev/null +++ b/files/el/learn/html/forms/index.html @@ -0,0 +1,83 @@ +--- +title: HTML forms +slug: Learn/HTML/Forms +tags: + - Beginner + - Featured + - Forms + - Guide + - HTML + - Landing + - Learn + - NeedsTranslation + - TopicStub + - Web +translation_of: Learn/Forms +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">This module provides a series of articles that will help you master HTML forms. HTML forms are a very powerful tool for interacting with users; however, for historical and technical reasons, it's not always obvious how to use them to their full potential. In this guide, we'll cover all aspects of HTML forms, from structure to styling, from data handling to custom widgets.</p> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>Before starting this module, you should at least work through our <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>. At this point you should find the {{anch("Basic guides")}} easy to understand, and also be able to make use of our <a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">Native form widgets</a> guide.</p> + +<p>The rest of the module however is a bit more advanced — it is easy to put form widgets on a page, but you can't actually do much with them without using some advanced form features, CSS, and JavaScript. Therefore, before you look at the other sections we'd recommend that you go away and learn some <a href="/en-US/docs/Learn/CSS">CSS</a> and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> first.</p> + +<div class="note"> +<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Basic_guides">Basic guides</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Your first HTML form</a></dt> + <dd>The first article in our series provides your very first experience of creating an HTML form, including designing a simple form, implementing it using the right HTML elements, adding some very simple styling via CSS, and how data is sent to a server.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a></dt> + <dd>With the basics out of the way, we now look in more detail at the elements used to provide structure and meaning to the different parts of a form.</dd> +</dl> + +<h2 id="What_form_widgets_are_available">What form widgets are available?</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">The native form widgets</a></dt> + <dd>We now look at the functionality of the different form widgets in detail, looking at what options are available to collect different types of data.</dd> +</dl> + +<h2 id="Validating_and_submitting_form_data">Validating and submitting form data</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a></dt> + <dd>This article looks at what happens when a user submits a form — where does the data go, and how do we handle it when it gets there? We also look at some of the security concerns associated with sending form data.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></dt> + <dd>Sending data is not enough — we also need to make sure that the data users fill out in forms is in the correct format we need to process it successfully, and that it won't break our applications. We also want to help our users to fill out our forms correctly and don't get frustrated when trying to use our apps. Form validation helps us achieve these goals — this article tells you what you need to know.</dd> +</dl> + +<h2 id="Advanced_guides">Advanced guides</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></dt> + <dd>You'll come across some cases where the native form widgets just don't provide what you need, e.g. because of styling or functionality. In such cases, you may need to build your own form widget out of raw HTML. This article explains how you'd do this and the considerations you need to be aware of when doing so, with a practical case study.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></dt> + <dd>This article looks at ways to use a form to assemble an HTTP request and send it via custom JavaScript, rather than standard form submission. It also looks at why you'd want to do this, and the implications of doing so. (See also Using FormData objects.)</dd> + <dt><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></dt> + <dd>Article covering feature detection, etc. This should be redirected to the cross browser testing module, as the same stuff is covered better there.</dd> +</dl> + +<h2 id="Form_styling_guides">Form styling guides</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></dt> + <dd>This article provides an introduction to styling forms with CSS, including all the basics you might need to know for basic styling tasks.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></dt> + <dd>Here we look at some more advanced form styling techniques that need to be used when trying to deal with some of the more difficult-to-style elements.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></dt> + <dd>This last article provides a handy reference allowing you to look up what CSS properties are compatible with what form elements.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Element#Forms">HTML forms element reference</a></li> + <li><a href="/en-US/docs/Web/HTML/Element/input">HTML <input> types reference</a></li> +</ul> diff --git a/files/el/learn/html/forms/επικύρωση_δεδομένων_φόρμας/index.html b/files/el/learn/html/forms/επικύρωση_δεδομένων_φόρμας/index.html new file mode 100644 index 0000000000..f4d9184454 --- /dev/null +++ b/files/el/learn/html/forms/επικύρωση_δεδομένων_φόρμας/index.html @@ -0,0 +1,869 @@ +--- +title: Επικύρωση δεδομένων φόρμας +slug: Learn/HTML/Forms/Επικύρωση_δεδομένων_φόρμας +translation_of: Learn/Forms/Form_validation +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms/How_to_build_custom_form_widgets", "Learn/HTML/Forms")}}</div> + +<p class="summary">Η επικύρωση των δεδομένω σε φόρμα, εξασφαλίζει ότι οι χρήστες θα συμπληρώσουν τα πεδία της στην σωστή τους μορφή, ώστε να είνα ιβέβαιο πως τα δεδομένα που θα υποβληθούν θα είναι λειτουργήσουν με επιτυχία από τις άλλες εφαρμογές μας. Αυτό το άρθρο, θα διαπραγματευθεί όλα όσα πρέπει να γνωρίζετε σχετικά με την επικύρωση των δεδομένων.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Προαπαιτούμενα:</th> + <td>Γνώση όρων πληροφορικής, επαρκής κατανόηση των τεχνολογιών <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, και <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>.</td> + </tr> + <tr> + <th scope="row">Σκοπός:</th> + <td>Η κατανόηση της σπουδαιότητας της επικύρωσης δεδομένων και πως γίνεται η εφαρμογή της.</td> + </tr> + </tbody> +</table> + +<h2 id="Τι_είναι_η_επικύρωση_δεδομένων_φόρμας">Τι είναι η επικύρωση δεδομένων φόρμας;</h2> + +<p>Αν επισκεφτείτε οποιαδήποτε δημοφιλή ιστοσελίδα με φόρμα εγγραφής, θα διαπιστώσετε ότι σας ενημερώνει όταν δεν εισαγάγετε στη σωστή μορφή τα δεδομένα που απαιτεί. Σας ενημερώνει πως:</p> + +<ul> + <li>«Αυτό το πεδίο είναι υποχρεωτικό» (δεν επιτρέπεται να μείνει κενό)</li> + <li>«Παρακαλώ εισάγετε τον τηλεφωνικό σας αριθμό στην μορφή xxx-xxxx" (υποχρεωτικά τρεις αριθμοί, μετά παύλα και μετά τέσσερις αριθμοί)</li> + <li>«Παρακαλώ εισάγετε μια έγκυρη ηλεκτρονική διεύθυνση» (αν η μορφή της διεύθυνσης δεν είναι της μορφής «κάποιος@παράδειγμα.com»)</li> + <li>«Ο κωδικός ασφαλείας πρέπει να είναι από 8 εως 30 χαρακτήρες, και να περιλαμβάνει κατ' ελάχιστον, ένα κεφαλαίο γράμμα, ένα σύμβολο και έναν αριθμό»</li> +</ul> + +<p>Αυτό καλείται <strong>επικύρωση δεδομένων φόρμας</strong> — όταν εισάγονται δεδομένα, η εφαρμογή ελέγχει ότι τα δεδομένα είναι σωστά. Αν είναι σωστά, η εφαρμογή επιτρέπει τα δεδομένα να υποβληθούν στον εξυπηρετητή και (συνήθως) να αποθηκευτούν σε μια βάση δεδομένων. Αν δεν είναι σωστά τα δεδομένα, ενημερώνει με μήνυμα, εξηγώντας τις διορθώσεις που απαιτούνται. Η επικύρωση δεδομένων φόρμα μπορεί να εφαρμοστεί με διαφορετικούς τρόπους.</p> + +<p>Επιδίωξη είναι η εισαγωγή των δεδομένω να είναι όσο το δυνατόν ευκολότερη. Τότε γιατί επιμένουμε να επικυρώνουμε τα δεδομένα στις φόρμες; Για τους τρεις παρακάτω κυρίως λόγους:</p> + +<ul> + <li><strong>Θέλουμε τα σωστά δεδομένα, στην σωστή μορφή</strong>— οι εφαρμογές θα δυσλειτουργήσουν αν τα δεδομένα των χρηστών αποθηκευτούν σε λανθασμένη μορφή, αν δεν έχουν τις σωστές πληροφορίες ή αν έχουν παραλειφθεί πληροφορίες που απαιτούνται.</li> + <li><strong>We want to protect our users' accounts</strong> — by forcing our users to enter secure passwords, it makes it easier to protect their account information.</li> + <li><strong>We want to protect ourselves</strong> — there are many ways that malicious users can misuse unprotected forms to damage the application they are part of (see <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Website security</a>).</li> +</ul> + +<h3 id="Different_types_of_form_validation">Different types of form validation</h3> + +<p>There are two different types of form validation which you'll encounter on the web:</p> + +<ul> + <li><strong>Client-side validation</strong> is validation that occurs in the browser, before the data has been submitted to the server. This is more user-friendly than server-side validation as it gives an instant response. This can be further subdivided: + + <ul> + <li><strong>JavaScript</strong> validation is coded using JavaScript. It is completely customizable.</li> + <li><strong>Built-in form validation</strong> using HTML5 form validation features. This generally does not require JavaScript. Built-in form validation has better performance, but it is not as customizable as JavaScript.</li> + </ul> + </li> + <li><strong>Server-side validation</strong> is validation which occurs on the server, after the data has been submitted. Server-side code is used to validate the data before it is saved into the database. If the data fails authentication, a response is sent back to the client to tell the user what corrections to make. Server-side validation is not as user-friendly as client-side validation, as it does not provide errors until the entire form has been submitted. However, server-side validation is your application's last line of defense against incorrect or even malicious data. All popular <a href="/en-US/docs/Learn/Server-side/First_steps/Web_frameworks">server-side frameworks</a> have features for <strong>validating</strong> and <strong>sanitizing</strong> data (making it safe).</li> +</ul> + +<p>In the real world, developers tend to use a combination of client-side and server-side validation.</p> + +<h2 id="Using_built-in_form_validation">Using built-in form validation</h2> + +<p>One of the features of <a href="/en-US/docs/HTML/HTML5">HTML5</a> is the ability to validate most user data without relying on scripts. This is done by using <a href="/en-US/docs/HTML/HTML5/Constraint_validation">validation attributes</a> on form elements, which allow you to specify rules for a form input like whether a value needs to be filled in, the minimum and maximum length of the data, whether it needs to be a number, an email address, or something else, and a pattern that it must match. If the entered data follows all those rules, it is considered valid; if not, it is considered invalid.</p> + +<p>When an element is valid:</p> + +<ul> + <li>The element matches the {{cssxref(":valid")}} CSS pseudo-class; this will let you apply a specific style to valid elements.</li> + <li>If the user tries to send the data, the browser will submit the form, provided there is nothing else stopping it from doing so (e.g., JavaScript).</li> +</ul> + +<p>When an element is invalid:</p> + +<ul> + <li>The element matches the {{cssxref(":invalid")}} CSS pseudo-class; this will let you apply a specific style to invalid elements.</li> + <li>If the user tries to send the data, the browser will block the form and display an error message.</li> +</ul> + +<h3 id="Validation_constraints_on_input_elements_—_starting_simple">Validation constraints on input elements — starting simple</h3> + +<p>In this section, we'll look at some of the different HTML5 features that can be used to validate {{HTMLElement("input")}} elements.</p> + +<p>Let's start with a simple example — an input that allows you to choose your favorite fruit out of a choice of banana or cherry. This involves a simple text {{HTMLElement("input")}} with a matching label, and a submit {{htmlelement("button")}}. You can find the source code on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a>, and a live example below:</p> + +<div class="hidden"> +<h6 id="Hidden_code">Hidden code</h6> + +<pre class="brush: html"><form> + <label for="choose">Would you prefer a banana or cherry?</label> + <input id="choose" name="i_like"> + <button>Submit</button> +</form></pre> + +<pre class="brush: css">input:invalid { + border: 2px dashed red; +} + +input:valid { + border: 2px solid black; +}</pre> +</div> + +<p>{{EmbedLiveSample("Hidden_code", "100%", 50)}}</p> + +<p>To begin with, make a copy of <code>fruit-start.html</code> in a new directory on your hard drive.</p> + +<h3 id="The_required_attribute">The required attribute</h3> + +<p>The simplest HTML5 validation feature to use is the {{htmlattrxref("required", "input")}} attribute — if you want to make an input mandatory, you can mark the element using this attribute. When this attribute is set, the form won't submit (and will display an error message) when the input is empty (the input will also be considered invalid).</p> + +<p>Add a <code>required</code> attribute to your input, as shown below:</p> + +<pre class="brush: html"><form> + <label for="choose">Would you prefer a banana or cherry?</label> + <input id="choose" name="i_like" required> + <button>Submit</button> +</form></pre> + +<p>Also take note of the CSS included in the example file:</p> + +<pre class="brush: css">input:invalid { + border: 2px dashed red; +} + +input:valid { + border: 2px solid black; +}</pre> + +<p>This causes the input to have a bright red dashed border when it is invalid, and a more subtle black border when valid. Try out the new behaviour in the example below:</p> + +<p>{{EmbedLiveSample("The_required_attribute", "100%", 50)}}</p> + +<h3 id="Validating_against_a_regular_expression">Validating against a regular expression</h3> + +<p>Another very common validation feature is the {{htmlattrxref("pattern","input")}} attribute, which expects a <a href="/en-US/docs/JavaScript/Guide/Regular_Expressions">Regular Expression</a> as its value. A regular expression (regex) is a pattern that can be used to match character combinations in text strings, so they are ideal for form validation (as well as variety of other uses in JavaScript). Regexs are quite complex and we do not intend to teach you them exhaustively in this article.</p> + +<p>Below are some examples to give you a basic idea of how they work:</p> + +<ul> + <li><code>a</code> — matches one character that is a (not b, not aa, etc.)</li> + <li><code>abc</code> — matches <code>a</code>, followed by <code>b</code>, followed by <code>c</code>.</li> + <li><code>a*</code> — matches the character a, zero or more times (<code>+</code> matches a character one or more times).</li> + <li><code>[^a]</code> — matches one character that is <strong>not</strong> a.</li> + <li><code>a|b</code> — matches one character that is a or b.</li> + <li><code>[abc]</code> — matches one character that is a, b, or c.</li> + <li><code>[^abc]</code> — matches one character that is <strong>not</strong> a, b, or c.</li> + <li><code>[a-z]</code> — matches any character in the range a–z, lower case only (you can use <code>[A-Za-z]</code> for lower and upper case, and <code>[A-Z]</code> for upper case only).</li> + <li><code>a.c</code> — matches a, followed by any character, followed by c.</li> + <li><code>a{5}</code> — matches a, 5 times.</li> + <li><code>a{5,7}</code> — matches a, 5 to 7 times, but no less or more.</li> +</ul> + +<p>You can use numbers and other characters in these expressions too, such as:</p> + +<ul> + <li><code>[ -]</code> — matches a space or a dash.</li> + <li><code>[0-9]</code> — matches any digit in the range 0 to 9.</li> +</ul> + +<p>You can combine these in pretty much any way you want, specifying different parts one after the other:</p> + +<ul> + <li><code>[Ll].*k</code> — A single character that is an upper or lowercase L, followed by zero or more characters of any type, followed by a single lowercase k.</li> + <li><code>[A-Z][A-Za-z' -]+</code> — A single upper case character followed by one or more characters that are an upper or lower case letter, a dash, an apostrophe, or a space. This could be used to validate the city/town names of English-speaking countries, which need to start with a capital letter, but don't contain any other characters. Examples from the UK include Manchester, Ashton-under-lyne, and Bishop's Stortford.</li> + <li><code>[0-9]{3}[ -][0-9]{3}[ -][0-9]{4}</code> — A simple match for a US domestic phone number — three digits, followed by a space or a dash, followed by three digits, followed by a space or a dash, followed by four digits. You might have to make this more complex, as some people write their area code in parentheses, but it works for a simple demonstration.</li> +</ul> + +<p>Anyway, let's implement an example — update your HTML to add a <code>pattern</code> attribute, like so:</p> + +<pre class="brush: html"><form> + <label for="choose">Would you prefer a banana or a cherry?</label> + <input id="choose" name="i_like" required pattern="banana|cherry"> + <button>Submit</button> +</form></pre> + +<div class="hidden"> +<pre class="brush: css">input:invalid { + border: 2px dashed red; +} + +input:valid { + border: 2px solid black; +}</pre> +</div> + +<p>{{EmbedLiveSample("Validating_against_a_regular_expression", "100%", 50)}}</p> + +<p>In this example, the {{HTMLElement("input")}} element accepts one of two possible values: the string "banana" or the string "cherry".</p> + +<p>At this point, try changing the value inside the <code>pattern</code> attribute to equal some of the examples you saw earlier, and look at how that affects the values you can enter to make the input value valid. Try writing some of your own, and see how you get on! Try to make them fruit-related where possible, so your examples make sense!</p> + +<div class="note"> +<p><strong>Note:</strong> Some {{HTMLElement("input")}} element types do not need a {{htmlattrxref("pattern","input")}} attribute to be validated. Specifying the <code>email</code> type for example validates the inputted value against a regular expression matching a well-formed email address (or a comma-separated list of email addresses if it has the {{htmlattrxref("multiple","input")}} attribute). As a further example, fields with the <code>url</code> type automatically require a properly-formed URL.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: The {{HTMLElement("textarea")}} element does not support the {{htmlattrxref("pattern","input")}} attribute.</p> +</div> + +<h3 id="Constraining_the_length_of_your_entries">Constraining the length of your entries</h3> + +<p>All text fields created by ({{HTMLElement("input")}} or {{HTMLElement("textarea")}}) can be constrained in size using the {{htmlattrxref("minlength","input")}} and {{htmlattrxref("maxlength","input")}} attributes. A field is invalid if its value is shorter than the {{htmlattrxref("minlength","input")}} value or longer than the {{htmlattrxref("maxlength","input")}} value. Browsers often don't let the user type a longer value than expected into text fields anyway, but it is useful to have this fine-grained control available.</p> + +<p>For number fields (i.e. <code><input type="number"></code>), the {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} attributes also provide a validation constraint. If the field's value is lower than the {{htmlattrxref("min","input")}} attribute or higher than the {{htmlattrxref("max","input")}} attribute, the field will be invalid.</p> + +<p>Let's look at another example. Create a new copy of the <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a> file.</p> + +<p>Now delete the contents of the <code><body></code> element, and replace it with the following:</p> + +<pre class="brush: html"><form> + <div> + <label for="choose">Would you prefer a banana or a cherry?</label> + <input id="choose" name="i_like" required minlength="6" maxlength="6"> + </div> + <div> + <label for="number">How many would you like?</label> + <input type="number" id="number" name="amount" value="1" min="1" max="10"> + </div> + <div> + <button>Submit</button> + </div> +</form></pre> + +<ul> + <li>Here you'll see that we've given the <code>text</code> field a <code>minlength</code> and <code>maxlength</code> of 6 — the same length as banana and cherry. Entering less characters will show as invalid, and entering more is not possible in most browsers.</li> + <li>We've also given the <code>number</code> field a <code>min</code> of 1 and a <code>max</code> of 10 — entered numbers outside this range will show as invalid, and you won't be able to use the increment/decrement arrows to move the value outside this range.</li> +</ul> + +<div class="hidden"> +<pre>input:invalid { + border: 2px dashed red; +} + +input:valid { + border: 2px solid black; +} + +div { + margin-bottom: 10px; +}</pre> +</div> + +<p>Here is the example running live:</p> + +<p>{{EmbedLiveSample("Constraining_the_length_of_your_entries", "100%", 70)}}</p> + +<div class="note"> +<p><strong>Note</strong>: <code><input type="number"></code> (and other types, like <code>range</code>) can also take a {{htmlattrxref("step", "input")}} attribute, which specifies what increment the value will go up or down by when the input controls are used (like the up and down number buttons).</p> +</div> + +<h3 id="Full_example">Full example</h3> + +<p>Here is a full example to show off usage of HTML's built-in validation features:</p> + +<pre class="brush: html"><form> + <p> + <fieldset> + <legend>Title<abbr title="This field is mandatory">*</abbr></legend> + <input type="radio" required name="title" id="r1" value="Mr"><label for="r1">Mr.</label> + <input type="radio" required name="title" id="r2" value="Ms"><label for="r2">Ms.</label> + </fieldset> + </p> + <p> + <label for="n1">How old are you?</label> + <!-- The pattern attribute can act as a fallback for browsers which + don't implement the number input type but support the pattern attribute. + Please note that browsers that support the pattern attribute will make it + fail silently when used with a number field. + Its usage here acts only as a fallback --> + <input type="number" min="12" max="120" step="1" id="n1" name="age" + pattern="\d+"> + </p> + <p> + <label for="t1">What's your favorite fruit?<abbr title="This field is mandatory">*</abbr></label> + <input type="text" id="t1" name="fruit" list="l1" required + pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range"> + <datalist id="l1"> + <option>Banana</option> + <option>Cherry</option> + <option>Apple</option> + <option>Strawberry</option> + <option>Lemon</option> + <option>Orange</option> + </datalist> + </p> + <p> + <label for="t2">What's your e-mail?</label> + <input type="email" id="t2" name="email"> + </p> + <p> + <label for="t3">Leave a short message</label> + <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea> + </p> + <p> + <button>Submit</button> + </p> +</form></pre> + +<pre class="brush: css">body { + font: 1em sans-serif; + padding: 0; + margin : 0; +} + +form { + max-width: 200px; + margin: 0; + padding: 0 5px; +} + +p > label { + display: block; +} + +input[type=text], +input[type=email], +input[type=number], +textarea, +fieldset { +/* required to properly style form + elements on WebKit based browsers */ + -webkit-appearance: none; + + width : 100%; + border: 1px solid #333; + margin: 0; + + font-family: inherit; + font-size: 90%; + + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +input:invalid { + box-shadow: 0 0 5px 1px red; +} + +input:focus:invalid { + outline: none; +}</pre> + +<p>{{EmbedLiveSample("Full_example", "100%", 420)}}</p> + +<h3 id="Customized_error_messages">Customized error messages</h3> + +<p>As seen in the examples above, each time the user tries to submit an invalid form, the browser displays an error message. The way this message is displayed depends on the browser.</p> + +<p>These automated messages have two drawbacks:</p> + +<ul> + <li>There is no standard way to change their look and feel with CSS.</li> + <li>They depend on the browser locale, which means that you can have a page in one language but an error message displayed in another language.</li> +</ul> + +<table> + <caption>French versions of feedback messages on an English page</caption> + <thead> + <tr> + <th scope="col">Browser</th> + <th scope="col">Rendering</th> + </tr> + </thead> + <tbody> + <tr> + <td>Firefox 17 (Windows 7)</td> + <td><img alt="Example of an error message with Firefox in French on an English page" src="/files/4329/error-firefox-win7.png" style="height: 97px; width: 228px;"></td> + </tr> + <tr> + <td>Chrome 22 (Windows 7)</td> + <td><img alt="Example of an error message with Chrome in French on an English page" src="/files/4327/error-chrome-win7.png" style="height: 96px; width: 261px;"></td> + </tr> + <tr> + <td>Opera 12.10 (Mac OSX)</td> + <td><img alt="Example of an error message with Opera in French on an English page" src="/files/4331/error-opera-macos.png" style="height: 83px; width: 218px;"></td> + </tr> + </tbody> +</table> + +<p>To customize the appearance and text of these messages, you must use JavaScript; there is no way to do it using just HTML and CSS.</p> + +<p>HTML5 provides the <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#the-constraint-validation-api" rel="external">constraint validation API</a> to check and customize the state of a form element. Among other things, it's possible to change the text of the error message. Let's see a quick example:</p> + +<pre class="brush: html"><form> + <label for="mail">I would like you to provide me an e-mail</label> + <input type="email" id="mail" name="mail"> + <button>Submit</button> +</form></pre> + +<p>In JavaScript, you call the <a href="/en-US/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()"><code>setCustomValidity()</code></a> method:</p> + +<pre class="brush: js">var email = document.getElementById("mail"); + +email.addEventListener("input", function (event) { + if (email.validity.typeMismatch) { + email.setCustomValidity("I expect an e-mail, darling!"); + } else { + email.setCustomValidity(""); + } +});</pre> + +<p>{{EmbedLiveSample("Customized_error_messages", "100%", 50)}}</p> + +<h2 id="Validating_forms_using_JavaScript">Validating forms using JavaScript</h2> + +<p>If you want to take control over the look and feel of native error messages, or if you want to deal with browsers that do not support HTML's built-in form validation, you must use JavaScript.</p> + +<h3 id="The_HTML5_constraint_validation_API">The HTML5 constraint validation API</h3> + +<p>More and more browsers now support the constraint validation API, and it's becoming reliable. This API consists of a set of methods and properties available on each form element.</p> + +<h4 id="Constraint_validation_API_properties">Constraint validation API properties</h4> + +<table> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>validationMessage</code></td> + <td>A localized message describing the validation constraints that the control does not satisfy (if any), or the empty string if the control is not a candidate for constraint validation (<code>willValidate</code> is <code>false</code>), or the element's value satisfies its constraints.</td> + </tr> + <tr> + <td><code>validity</code></td> + <td>A {{domxref("ValidityState")}} object describing the validity state of the element.</td> + </tr> + <tr> + <td><code>validity.customError</code></td> + <td>Returns <code>true</code> if the element has a custom error; <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>validity.patternMismatch</code></td> + <td>Returns <code>true</code> if the element's value doesn't match the provided pattern; <code>false</code> otherwise.<br> + <br> + If it returns <code>true</code>, the element will match the {{cssxref(":invalid")}} CSS pseudo-class.</td> + </tr> + <tr> + <td><code>validity.rangeOverflow</code></td> + <td>Returns <code>true</code> if the element's value is higher than the provided maximum; <code>false</code> otherwise.<br> + <br> + If it returns <code>true</code>, the element will match the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} and CSS pseudo-class.</td> + </tr> + <tr> + <td><code>validity.rangeUnderflow</code></td> + <td>Returns <code>true</code> if the element's value is lower than the provided minimum; <code>false</code> otherwise.<br> + <br> + If it returns <code>true</code>, the element will match the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} CSS pseudo-class.</td> + </tr> + <tr> + <td><code>validity.stepMismatch</code></td> + <td>Returns <code>true</code> if the element's value doesn't fit the rules provided by the step attribute; otherwise <code>false</code> .<br> + <br> + If it returns <code>true</code>, the element will match the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} CSS pseudo-class.</td> + </tr> + <tr> + <td><code>validity.tooLong</code></td> + <td>Returns <code>true</code> if the element's value is longer than the provided maximum length; else it wil be false<br> + <br> + If it returns <code>true</code>, the element will match the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} CSS pseudo-class.</td> + </tr> + <tr> + <td><code>validity.typeMismatch</code></td> + <td>Returns true if the element's value is not in the correct syntax; otherwise false.<br> + <br> + If it returns <code>true</code>, the element will match the {{cssxref(":invalid")}} CSS pseudo-class.</td> + </tr> + <tr> + <td><code>validity.valid</code></td> + <td>Returns true if the element's value has no validity problems; false otherwise.<br> + <br> + If it returns <code>true</code>, the element will match the {{cssxref(":valid")}} CSS pseudo-class; the {{cssxref(":invalid")}} CSS pseudo-class otherwise.</td> + </tr> + <tr> + <td><code>validity.valueMissing</code></td> + <td>Returns true if the element has no value but is a required field; false otherwise.<br> + <br> + If it returns <code>true</code>, the element will match the {{cssxref(":invalid")}} CSS pseudo-class.</td> + </tr> + <tr> + <td><code>willValidate</code></td> + <td>Returns <code>true</code> if the element will be validated when the form is submitted; <code>false</code> otherwise.</td> + </tr> + </tbody> +</table> + +<h4 id="Constraint_validation_API_methods">Constraint validation API methods</h4> + +<table> + <thead> + <tr> + <th scope="col">Method</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>checkValidity()</code></td> + <td>Returns <code>true</code> if the element's value has no validity problems; <code>false</code> otherwise. If the element is invalid, this method also causes an {{event("invalid")}} event at the element.</td> + </tr> + <tr> + <td><code>setCustomValidity(<em>message</em>)</code></td> + <td>Adds a custom error message to the element; if you set a custom error message, the element is considered to be invalid, and the specified error is displayed. This lets you use JavaScript code to establish a validation failure other than those offered by the standard constraint validation API. The message is shown to the user when reporting the problem.<br> + <br> + If the argument is the empty string, the custom error is cleared.</td> + </tr> + </tbody> +</table> + +<p>For legacy browsers, it's possible to use a <a href="https://hyperform.js.org/" rel="external">polyfill such as Hyperform </a> to compensate for the lack of support for the constraint validation API. Since you're already using JavaScript, using a polyfill isn't an added burden to your Web site or Web application's design or implementation.</p> + +<h4 id="Example_using_the_constraint_validation_API">Example using the constraint validation API</h4> + +<p>Let's see how to use this API to build custom error messages. First, the HTML:</p> + +<pre class="brush: html"><form novalidate> + <p> + <label for="mail"> + <span>Please enter an email address:</span> + <input type="email" id="mail" name="mail"> + <span class="error" aria-live="polite"></span> + </label> + </p> + <button>Submit</button> +</form></pre> + +<p>This simple form uses the {{htmlattrxref("novalidate","form")}} attribute to turn off the browser's automatic validation; this lets our script take control over validation. However, this doesn't disable support for the constraint validation API nor the application of the CSS pseudo-class {{cssxref(":valid")}}, {{cssxref(":invalid")}}, {{cssxref(":in-range")}} and {{cssxref(":out-of-range")}} classes. That means that even though the browser doesn't automatically check the validity of the form before sending its data, you can still do it yourself and style the form accordingly.</p> + +<p>The <a href="/en-US/docs/Accessibility/ARIA/ARIA_Live_Regions"><code>aria-live</code></a> attribute makes sure that our custom error message will be presented to everyone, including those using assistive technologies such as screen readers.</p> + +<h5 id="CSS">CSS</h5> + +<p>This CSS styles our form and the error output to look more attractive.</p> + +<pre class="brush: css">/* This is just to make the example nicer */ +body { + font: 1em sans-serif; + padding: 0; + margin : 0; +} + +form { + max-width: 200px; +} + +p * { + display: block; +} + +input[type=email]{ + -webkit-appearance: none; + + width: 100%; + border: 1px solid #333; + margin: 0; + + font-family: inherit; + font-size: 90%; + + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +/* This is our style for the invalid fields */ +input:invalid{ + border-color: #900; + background-color: #FDD; +} + +input:focus:invalid { + outline: none; +} + +/* This is the style of our error messages */ +.error { + width : 100%; + padding: 0; + + font-size: 80%; + color: white; + background-color: #900; + border-radius: 0 0 5px 5px; + + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.error.active { + padding: 0.3em; +}</pre> + +<h5 id="JavaScript">JavaScript</h5> + +<p>The following JavaScript code handles the custom error validation.</p> + +<pre class="brush: js">// There are many ways to pick a DOM node; here we get the form itself and the email +// input box, as well as the span element into which we will place the error message. + +var form = document.getElementsByTagName('form')[0]; +var email = document.getElementById('mail'); +var error = document.querySelector('.error'); + +email.addEventListener("input", function (event) { + // Each time the user types something, we check if the + // email field is valid. + if (email.validity.valid) { + // In case there is an error message visible, if the field + // is valid, we remove the error message. + error.innerHTML = ""; // Reset the content of the message + error.className = "error"; // Reset the visual state of the message + } +}, false); +form.addEventListener("submit", function (event) { + // Each time the user tries to send the data, we check + // if the email field is valid. + if (!email.validity.valid) { + + // If the field is not valid, we display a custom + // error message. + error.innerHTML = "I expect an e-mail, darling!"; + error.className = "error active"; + // And we prevent the form from being sent by canceling the event + event.preventDefault(); + } +}, false);</pre> + +<p>Here is the live result:</p> + +<p>{{EmbedLiveSample("Example_using_the_constraint_validation_API", "100%", 130)}}</p> + +<p>The constraint validation API gives you a powerful tool to handle form validation, letting you have enormous control over the user interface above and beyond what you can do just with HTML and CSS alone.</p> + +<h3 id="Validating_forms_without_a_built-in_API">Validating forms without a built-in API</h3> + +<p>Sometimes, such as with legacy browsers or <a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">custom widgets</a>, you will not be able to (or will not want to) use the constraint validation API. In that case, you're still able to use JavaScript to validate your form. Validating a form is more a question of user interface than real data validation.</p> + +<p>To validate a form, you have to ask yourself a few questions:</p> + +<dl> + <dt>What kind of validation should I perform?</dt> + <dd>You need to determine how to validate your data: string operations, type conversion, regular expressions, etc. It's up to you. Just remember that form data is always text and is always provided to your script as strings.</dd> + <dt>What should I do if the form does not validate?</dt> + <dd>This is clearly a UI matter. You have to decide how the form will behave: Does the form send the data anyway? Should you highlight the fields which are in error? Should you display error messages?</dd> + <dt>How can I help the user to correct invalid data?</dt> + <dd>In order to reduce the user's frustration, it's very important to provide as much helpful information as possible in order to guide them in correcting their inputs. You should offer up-front suggestions so they know what's expected, as well as clear error messages. If you want to dig into form validation UI requirements, there are some useful articles you should read: + <ul> + <li>SmashingMagazine: <a href="http://uxdesign.smashingmagazine.com/2012/06/27/form-field-validation-errors-only-approach/" rel="external">Form-Field Validation: The Errors-Only Approach</a></li> + <li>SmashingMagazine: <a href="http://www.smashingmagazine.com/2009/07/07/web-form-validation-best-practices-and-tutorials/" rel="external">Web Form Validation: Best Practices and Tutorials</a></li> + <li>Six Revision: <a href="http://sixrevisions.com/user-interface/best-practices-for-hints-and-validation-in-web-forms/" rel="external">Best Practices for Hints and Validation in Web Forms</a></li> + <li>A List Apart: <a href="http://www.alistapart.com/articles/inline-validation-in-web-forms/" rel="external">Inline Validation in Web Forms</a></li> + </ul> + </dd> +</dl> + +<h4 id="Example_that_doesn't_use_the_constraint_validation_API">Example that doesn't use the constraint validation API</h4> + +<p>In order to illustrate this, let's rebuild the previous example so that it works with legacy browsers:</p> + +<pre class="brush: html"><form> + <p> + <label for="mail"> + <span>Please enter an email address:</span> + <input type="text" class="mail" id="mail" name="mail"> + <span class="error" aria-live="polite"></span> + </label> + <p> + <!-- Some legacy browsers need to have the `type` attribute + explicitly set to `submit` on the `button`element --> + <button type="submit">Submit</button> +</form></pre> + +<p>As you can see, the HTML is almost the same; we just removed the HTML validation features. Note that <a href="/en-US/docs/Accessibility/ARIA">ARIA</a> is an independent specification that's not specifically related to HTML5.</p> + +<h5 id="CSS_2">CSS</h5> + +<p>Similarly, the CSS doesn't need to change very much; we just turn the {{cssxref(":invalid")}} CSS pseudo-class into a real class and avoid using the attribute selector that does not work on Internet Explorer 6.</p> + +<pre class="brush: css">/* This is just to make the example nicer */ +body { + font: 1em sans-serif; + padding: 0; + margin : 0; +} + +form { + max-width: 200px; +} + +p * { + display: block; +} + +input.mail { + -webkit-appearance: none; + + width: 100%; + border: 1px solid #333; + margin: 0; + + font-family: inherit; + font-size: 90%; + + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +/* This is our style for the invalid fields */ +input.invalid{ + border-color: #900; + background-color: #FDD; +} + +input:focus.invalid { + outline: none; +} + +/* This is the style of our error messages */ +.error { + width : 100%; + padding: 0; + + font-size: 80%; + color: white; + background-color: #900; + border-radius: 0 0 5px 5px; + + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.error.active { + padding: 0.3em; +}</pre> + +<h5 id="JavaScript_2">JavaScript</h5> + +<p>The big changes are in the JavaScript code, which needs to do much more of the heavy lifting.</p> + +<pre class="brush: js">// There are fewer ways to pick a DOM node with legacy browsers +var form = document.getElementsByTagName('form')[0]; +var email = document.getElementById('mail'); + +// The following is a trick to reach the next sibling Element node in the DOM +// This is dangerous because you can easily build an infinite loop. +// In modern browsers, you should prefer using element.nextElementSibling +var error = email; +while ((error = error.nextSibling).nodeType != 1); + +// As per the HTML5 Specification +var emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; + +// Many legacy browsers do not support the addEventListener method. +// Here is a simple way to handle this; it's far from the only one. +function addEvent(element, event, callback) { + var previousEventCallBack = element["on"+event]; + element["on"+event] = function (e) { + var output = callback(e); + + // A callback that returns `false` stops the callback chain + // and interrupts the execution of the event callback. + if (output === false) return false; + + if (typeof previousEventCallBack === 'function') { + output = previousEventCallBack(e); + if(output === false) return false; + } + } +}; + +// Now we can rebuild our validation constraint +// Because we do not rely on CSS pseudo-class, we have to +// explicitly set the valid/invalid class on our email field +addEvent(window, "load", function () { + // Here, we test if the field is empty (remember, the field is not required) + // If it is not, we check if its content is a well-formed e-mail address. + var test = email.value.length === 0 || emailRegExp.test(email.value); + + email.className = test ? "valid" : "invalid"; +}); + +// This defines what happens when the user types in the field +addEvent(email, "input", function () { + var test = email.value.length === 0 || emailRegExp.test(email.value); + if (test) { + email.className = "valid"; + error.innerHTML = ""; + error.className = "error"; + } else { + email.className = "invalid"; + } +}); + +// This defines what happens when the user tries to submit the data +addEvent(form, "submit", function () { + var test = email.value.length === 0 || emailRegExp.test(email.value); + + if (!test) { + email.className = "invalid"; + error.innerHTML = "I expect an e-mail, darling!"; + error.className = "error active"; + + // Some legacy browsers do not support the event.preventDefault() method + return false; + } else { + email.className = "valid"; + error.innerHTML = ""; + error.className = "error"; + } +});</pre> + +<p>The result looks like this:</p> + +<p>{{EmbedLiveSample("Example_that_doesn't_use_the_constraint_validation_API", "100%", 130)}}</p> + +<p>As you can see, it's not that hard to build a validation system on your own. The difficult part is to make it generic enough to use it both cross-platform and on any form you might create. There are many libraries available to perform form validation; you shouldn't hesitate to use them. Here are a few examples:</p> + +<ul> + <li>Standalone library + <ul> + <li><a href="http://rickharrison.github.com/validate.js/" rel="external">Validate.js</a></li> + </ul> + </li> + <li>jQuery plug-in: + <ul> + <li><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" rel="external">Validation</a></li> + </ul> + </li> +</ul> + +<h4 id="Remote_validation">Remote validation</h4> + +<p>In some cases it can be useful to perform some remote validation. This kind of validation is necessary when the data entered by the user is tied to additional data stored on the server side of your application. One use case for this is registration forms, where you ask for a user name. To avoid duplication, it's smarter to perform an AJAX request to check the availability of the user name rather than asking the user to send the data, then send back the form with an error.</p> + +<p>Performing such a validation requires taking a few precautions:</p> + +<ul> + <li>It requires exposing an API and some data publicly; be sure it is not sensitive data.</li> + <li>Network lag requires performing asynchronous validation. This requires some UI work in order to be sure that the user will not be blocked if the validation is not performed properly.</li> +</ul> + +<h2 id="Conclusion">Conclusion</h2> + +<p>Form validation does not require complex JavaScript, but it does require thinking carefully about the user. Always remember to help your user to correct the data they provide. To that end, be sure to:</p> + +<ul> + <li>Display explicit error messages.</li> + <li>Be permissive about the input format.</li> + <li>Point out exactly where the error occurs (especially on large forms).</li> +</ul> + +<p>{{PreviousMenuNext("Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms/How_to_build_custom_form_widgets", "Learn/HTML/Forms")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Your first HTML form</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">The native form widgets</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li> +</ul> diff --git a/files/el/learn/html/index.html b/files/el/learn/html/index.html new file mode 100644 index 0000000000..e2fcdc4043 --- /dev/null +++ b/files/el/learn/html/index.html @@ -0,0 +1,58 @@ +--- +title: 'Learning HTML: Guides and tutorials' +slug: Learn/HTML +tags: + - Beginner + - Guide + - HTML + - Intro + - Learn + - NeedsTranslation + - Topic + - TopicStub +translation_of: Learn/HTML +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">To build websites, you should know about {{Glossary('HTML')}} — the fundamental technology used to define the structure of a webpage. HTML is used to specify whether your web content should be recognized as a paragraph, list, heading, link, image, multimedia player, form, or one of many other available elements or even a new element that you define.</p> + +<h2 id="Learning_pathway">Learning pathway</h2> + +<p>Ideally you should start your learning journey by learning HTML. Start by reading <a href="/en-US/docs/Web/Guide/HTML/Introduction">Introduction to HTML</a>. You may then move on to learning about more advanced topics such as:</p> + +<ul> + <li><a href="/en-US/docs/Learn/CSS">CSS</a>, and how to use it to style HTML (for example alter your text size and fonts used, add borders and drop shadows, layout your page with multiple columns, add animations and other visual effects.)</li> + <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, and how to use it to add dynamic functionality to web pages (for example find your location and plot it on a map, make UI elements appear/disappear when you toggle a button, save users' data locally on their computers, and much much more.)</li> +</ul> + +<p>Before starting this topic, you should have at least basic familiarity with using computers, and using the web passively (i.e. just looking at it, consuming the content). You should have a basic work environment set up as detailed in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, and understand how to create and manage files, as detailed in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> — both are parts of our <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> complete beginner's module.</p> + +<p>It is recommended that you work through <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web </a>before attempting this topic, however it isn't absolutely necessary; much of what is covered in the <a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a> article is also covered in our <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module, albeit in a lot more detail.</p> + +<h2 id="Modules">Modules</h2> + +<p>This topic contains the following modules, in a suggested order for working through them. You should definitely start with the first one.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a></dt> + <dd>This module sets the stage, getting you used to important concepts and syntax, looking at applying HTML to text, how to create hyperlinks, and how to use HTML to structure a webpage.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia and embedding</a></dt> + <dd>This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Tables">HTML Tables</a></dt> + <dd>Representing tabular data on a webpage in an understandable, {{glossary("Accessibility", "accessible")}} way can be a challenge. This module covers basic table markup, along with more complex features such as implementing captions and summaries.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Forms">HTML Forms</a></dt> + <dd>Forms are a very important part of the Web — these provide much of the functionality you need for interacting with web sites, e.g. registering and logging in, sending feedback, buying products, and more. This module gets you started with creating the client-side parts of forms.</dd> +</dl> + +<h2 id="Solving_common_HTML_problems">Solving common HTML problems</h2> + +<p><a href="/en-US/docs/Learn/HTML/Howto">Use HTML to solve common problems</a> provides links to sections of content explaining how to use HTML to solve very common problems when creating a webpage: dealing with titles, adding images or videos, emphasizing content, creating a basic form, etc.</p> + +<h2 id="See_also">See also</h2> + +<div class="document-head" id="wiki-document-head"> +<dl> + <dt><a href="/en-US/docs/Web/HTML">HTML (HyperText Markup Language)</a> on MDN</dt> + <dd>The main entry point for HTML documentation on MDN, including detailed element and attribute references — if you want to know what attributes an element has or what values an attribute has, for example, this is a great place to start.</dd> +</dl> +</div> diff --git a/files/el/learn/index.html b/files/el/learn/index.html new file mode 100644 index 0000000000..fb5979aa99 --- /dev/null +++ b/files/el/learn/index.html @@ -0,0 +1,124 @@ +--- +title: Μάθετε προγραμματισμό web +slug: Learn +tags: + - CSS + - HTML + - Web + - Αρχάριος + - Βασικά + - Εισαγωγή + - Εκμάθηση + - Οδηγός + - Προγραμματισμός-ιστού +translation_of: Learn +--- +<p>{{LearnSidebar}}</p> + +<p class="summary">Καλώς ορίσατε στην περιοχή εκμάθησης του MDN. Αυτή η σειρά άρθρων απευθύνεται σε αρχάριους και έχει ως σκοπό να σας προσφέρει όλες τις γνώσεις που θα χρειαστείτε για να ξεκινήσετε με την ανάπτυξη ιστοσελίδων.</p> + +<p>Στόχος της περιοχής εκμάθησης του MDN δεν είναι να σας κάνει "επαγγελματίες", αλλά να σας βοηθήσει να αποκτήσετε κάποια εξοικείωση. Από εκεί και πέρα, θα μπορέσετε να εξελιχθείτε με τη <a href="https://developer.mozilla.org/el">βοήθεια του MDN</a> και άλλων πηγών που αναλύουν πιο σύνθετα θέματα, τα οποία απαιτούν βασικές γνώσεις.</p> + +<p>Αν είστε εντελώς αρχάριοι, ο προγραμματισμός web μπορεί να σας φανεί δύσκολος — εμείς όμως θα σας καθοδηγήσουμε και θα σας παρέχουμε αρκετές λεπτομέρειες, ώστε να αισθανθείτε άνετα και να μάθετε σωστά τα περιεχόμενα. Δεν θα έχετε κανένα πρόβλημα, είτε αν σπουδάζετε ήδη αυτό το αντικείμενο, είτε αν διδάσκετε και ψάχνετε υλικό για την τάξη σας, είτε αν το κάνετε σαν χόμπι, είτε αν θέλετε απλά να μάθετε τον τρόπο λειτουργίας των τεχνολογιών web.</p> + +<h2 id="Τι_νέο_υπάρχει">Τι νέο υπάρχει;</h2> + +<p>Το περιεχόμενο στην περιοχή εκμάθησης εμπλουτίζεται τακτικά. Εκδίδουμε <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Release_notes">σημειώσεις έκδοσης για την περιοχή εκμάθησης</a> για να ενημερώνεστε σχετικά με τις αλλαγές — μην ξεχνάτε να ελέγχετε τακτικά για νέο περιεχόμενο!</p> + +<p>Αν έχετε απορίες όσον αφορά τα θέματα που θέλετε να καλύψουμε ή αυτά που θεωρείτε ότι απουσιάζουν, ενημερώστε μας στο <a href="https://discourse.mozilla.org/c/mdn">φόρουμ μας στο Discourse</a>.</p> + +<h2 id="Από_πού_να_ξεκινήσετε">Από πού να ξεκινήσετε</h2> + +<ul class="card-grid"> + <li><span>Για αρχάριους:</span> Αν είστε αρχάριοι στον προγραμματισμό web, θα σας προτείναμε να ξεκινήσετε με την ενότητα <a href="/en-US/docs/Learn/Getting_started_with_the_web">Ξεκινώντας με το web</a>, η οποία παρέχει μια εισαγωγή στον προγραμματισμό web.</li> + <li><span>Πέρα από τα βασικά:</span> Αν έχετε ήδη μερικές γνώσεις, το επόμενο βήμα είναι να μάθετε λεπτομερώς {{Glossary("HTML")}} και {{Glossary("CSS")}}. Ξεκινήστε με την ενότητα <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">Εισαγωγή στην HTML</a> και έπειτα, συνεχίστε στην ενότητα <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/First_steps">Εισαγωγή στην CSS</a>.</li> + <li><span>Προχωρώντας σε σενάρια:</span>Αν έχετε ήδη εξοικειωθεί με τις HTML και CSS, ή σας ενδιαφέρει κυρίως η συγγραφή κώδικα, μπορείτε να προχωρήσετε στην {{Glossary("JavaScript")}} ή στον προγραμματισμό από την πλευρά του διακομιστή. Ξεκινήστε με τις ενότητες <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps">Πρώτα βήματα στη JavaScript</a> και <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps">Πρώτα βήματα στην πλευρά του διακομιστή</a>.</li> + <li><span>Πλαίσια και εργαλεία:</span>Αφού κατακτήσετε τις βασικές γνώσεις σε HTML, CSS και JavaScript, θα πρέπει να μάθετε τα <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools">εργαλεία προγραμματισμού από την πλευρά του πελάτη</a> και έπειτα, εμβαθύνετε στα <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">πλαίσια JavaScript από την πλευρά του πελάτη</a> και στον <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side">προγραμματισμό ιστοσελίδων από την πλευρά του διακομιστή</a>.</li> +</ul> + +<div class="note"> +<p><strong>Σημείωση</strong>: Το <a href="/en-US/docs/Glossary">γλωσσάρι</a> μας παρέχει ορισμούς όρων. Επίσης, αν έχετε μια συγκεκριμένη απορία σχετικά με τον προγραμματισμό web, η ενότητα <a href="/en-US/docs/Learn/Common_questions">Συχνές ερωτήσεις</a> ίσως μπορεί να σας βοηθήσει.</p> +</div> + +<p>{{LearnBox({"title":"Τυχαίο λεξιλόγιο"})}}</p> + +<h2 id="Καλυπτόμενα_θέματα"><span>Καλυπτόμενα θέματα</span></h2> + +<p>Ακολουθεί μια λίστα με όλα τα θέματα που καλύπτονται στην περιοχή εκμάθησης του MDN.</p> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Ξεκινώντας με το web</a></dt> + <dd>Παρέχεται μια ουσιαστική εισαγωγή στον προγραμματισμό web για αρχάριους.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML">HTML — Κατασκευή του web</a></dt> + <dd>Η HTML είναι η γλώσσα που χρησιμοποιούμε για να κατασκευάσουμε τα διάφορα μέρη του περιεχομένου μας και να καθορίσουμε τη σημασία ή το σκοπό τους. Αυτό το άρθρο εξηγεί την HTML σε βάθος.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS — Διακόσμηση του web</a></dt> + <dd>Η CSS είναι η γλώσσα που χρησιμοποιούμε για να διακοσμήσουμε και να διατάξουμε το περιεχόμενο, καθώς και να προσθέσουμε συμπεριφορές, όπως εφέ κίνησης. Αυτό το άρθρο σας παρέχει βασική εκπαίδευση της CSS.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript — Δυναμικά σενάρια από την πλευρά του πελάτη</a></dt> + <dd>Η JavaScript είναι μια γλώσσα προγραμματισμού σεναρίων που χρησιμοποιούμε για να προσθέσουμε δυναμική λειτουργικότητα σε ιστοσελίδες. Αυτό το άρθρο εξηγεί όλα όσα χρειάζεστε για να εξοικειωθείτε με τη σύνταξη και την κατανόηση της Javascript.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility">Προσβασιμότητα — κάντε το web χρήσιμο για όλους</a></dt> + <dd>Η προσβασιμότητα είναι η πρακτική με την οποία κάνετε το διαδικτυακό περιεχόμενο διαθέσιμο για όσους περισσότερους χρήστες γίνεται, ανεξαρτήτως αναπηρίας, συσκευής, τοποθεσίας ή άλλων παραγόντων. Αυτό το άρθρο παρέχει όλες τις απαραίτητες πληροφορίες.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Performance">Επιδόσεις web — γρήγορες και ανταποκρίσιμες ιστοσελίδες</a></dt> + <dd>Οι επιδόσεις web είναι η τέχνη του να επιτυγχάνει κανείς υψηλή ταχύτητα λήψης των εφαρμογών web, καθώς και καλή ανταποκρισιμότητα κατά την αλληλεπίδραση με το χρήστη, ανεξάρτητα από το εύρος ζώνης του χρήστη, το μέγεθος της οθόνης, το δίκτυο ή τις ικανότητες της συσκευής.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing">Εργαλεία και δοκιμή</a></dt> + <dd>Αυτό το άρθρο καλύπτει τα εργαλεία που χρησιμοποιούν οι προγραμματιστές για να διευκολύνουν τη δουλειά τους, όπως εργαλεία δοκιμής για διαφορετικά προγράμματα περιήγησης, linters, formatters, εργαλεία μεταμόρφωσης, συστήματα ελέγχου εκδόσεων, εργαλεία ανάπτυξης και πλαίσια JavaScript από την πλευρά του πελάτη.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side">Προγραμματισμός ιστοσελίδων από την πλευρά του διακομιστή</a></dt> + <dd>Ακόμα κι αν επικεντρώνεστε στον προγραμματισμό web από την πλευρά του πελάτη, είναι χρήσιμο να γνωρίζετε πώς λειτουργούν οι διακομιστές και οι λειτουργίες του κώδικά τους. Αυτό το άρθρο παρέχει μια γενική εισαγωγή στον τρόπο λειτουργίας του διακομιστή, καθώς και λεπτομερείς οδηγούς, οι οποίοι δείχνουν πώς να αναπτύξετε μια εφαρμογή από πλευράς διακομιστή με τη βοήθεια δύο γνωστών πλαισίων — Django (Python) και Express (node.js).</dd> +</dl> + +<h2 id="Απόκτηση_παραδειγμάτων_κώδικα">Απόκτηση παραδειγμάτων κώδικα</h2> + +<p>Τα παραδείγματα κώδικα που θα συναντήσετε στην περιοχή εκμάθησης είναι όλα <a href="https://github.com/mdn/learning-area/">διαθέσιμα στο GitHub</a>. Αν θέλετε να τα αντιγράψετε όλα στον υπολογιστή σας, ο πιο εύκολος τρόπος είναι να <a href="https://github.com/mdn/learning-area/archive/master.zip">κάνετε λήψη του ZIP του πιο πρόσφατου κύριου branch κώδικα</a>.</p> + +<p>Αν προτιμάτε να αντιγράψετε το αποθετήριο με έναν πιο ευέλικτο τρόπο, που επιτρέπει αυτόματες ενημερώσεις, μπορείτε να ακολουθήσετε τις πιο σύνθετες οδηγίες:</p> + +<ol> + <li><a href="https://git-scm.com/downloads">Κάντε εγκατάσταση του Git</a> στον υπολογιστή σας. Αυτό είναι το λογισμικό συστήματος ελέγχου εκδόσεων, πάνω στο οποίο λειτουργεί το GitHub.</li> + <li>Ανοίξτε τη <a href="https://www.lifewire.com/how-to-open-command-prompt-2618089">γραμμή εντολών</a> (Windows) ή το τερματικό (<a href="https://help.ubuntu.com/community/UsingTheTerminal">Linux</a>, <a href="https://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line">macOS</a>) στον υπολογιστή σας.</li> + <li>Για να αντιγράψετε το αποθετήριο της περιοχής εκμάθησης σε ένα φάκελο με όνομα "learning-area" στην τοποθεσία που δείχνει η γραμμή εντολών ή το τερματικό σας, χρησιμοποιήστε την εξής εντολή: + <pre class="brush: bash notranslate">git clone https://github.com/mdn/learning-area</pre> + </li> + <li>Μπορείτε πλέον να ανοίξετε τον κατάλογο και να βρείτε τα αρχεία που ψάχνετε (είτε μέσω Finder/Εξερεύνησης αρχείων είτε μέσω της <a href="https://en.wikipedia.org/wiki/Cd_(command)">εντολής</a> <a href="https://en.wikipedia.org/wiki/Cd_(command)"><code>cd</code></a>).</li> +</ol> + +<p>Μπορείτε να ενημερώσετε το αποθετήριο <code>learning-area</code> μετά από τυχόν αλλαγές που έγιναν στην κύρια έκδοση στο GitHub, ακολουθώντας τα εξής βήματα:</p> + +<ol> + <li>Στη γραμμή εντολών/τερματικό, μπείτε στον κατάλογο <code>learning-area</code> με την εντολή <code>cd</code>. Για παράδειγμα, αν βρίσκεστε στον γονικό κατάλογο: + + <pre class="brush: bash notranslate">cd learning-area</pre> + </li> + <li>Ενημερώστε το αποθετήριο με την ακόλουθη εντολή: + <pre class="brush: bash notranslate">git pull</pre> + </li> +</ol> + +<h2 id="Επικοινωνήστε_μαζί_μας">Επικοινωνήστε μαζί μας</h2> + +<p>Αν θέλετε να επικοινωνήσετε με εμάς για οτιδήποτε, ο καλύτερος τρόπος είναι να μας αφήσετε ένα μήνυμα στο <a href="https://discourse.mozilla.org/c/mdn">φόρουμ μας στο Discourse</a>. Θα θέλαμε να μας πείτε αν θεωρείτε ότι κάτι είναι λάθος ή λείπει από την ιστοσελίδα, αν έχετε αιτήματα για νέα θέματα εκμάθησης, αν έχετε αιτήματα για βοήθεια με ό,τι δεν κατανοείτε, ή οποιαδήποτε άλλη απορία/ανησυχία.</p> + +<p>Αν σας ενδιαφέρει να βοηθήσετε με την ανάπτυξη/βελτίωση του περιεχομένου, ρίξτε μια ματιά στο <a href="/en-US/docs/Learn/How_to_contribute">πώς να μπορέσετε να βοηθήσετε</a> και να έρθετε σε επικοινωνία μαζί μας! Θα χαρούμε ιδιαίτερα να μιλήσουμε μαζί σας, είτε είστε μαθητής, είτε είστε δάσκαλος, είτε είστε έμπειρος προγραμματιστής web, είτε απλά ενδιαφέρεστε να συμβάλλετε στη βελτίωση της εμπειρίας εκμάθησης.</p> + +<h2 id="Δείτε_επίσης">Δείτε επίσης</h2> + +<dl> + <dt><a href="https://www.mozilla.org/en-US/newsletter/developer/">Mozilla newsletter για προγραμματιστές</a></dt> + <dd>Το newsletter μας για προγραμματιστές web, το οποίο αποτελεί μια εξαιρετική πηγή πληροφοριών για όλα τα επίπεδα εμπειρίας.</dd> + <dt><a href="https://learnjavascript.online/">Learn JavaScript</a></dt> + <dd>Μια εξαίσια πηγή πληροφοριών για νέους προγραμματιστές web — Μάθετε JavaScript σε ένα διαδραστικό περιβάλλον, με σύντομα μαθήματα και διαδραστικά τεστ, ενώ παρέχεται αυτοματοποιημένη αξιολόγηση. Τα πρώτα 40 μαθήματα είναι δωρεάν και μπορείτε να αποκτήσετε ολόκληρη τη σειρά μαθημάτων με μια μικρή εφάπαξ πληρωμή.</dd> + <dt><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web demystified</a></dt> + <dd>Μια θαυμάσια σειρά βίντεο που εξηγεί τα θεμελιώδη θέματα του web και απευθύνεται σε αρχάριους. Δημιουργήθηκε από τον <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a>.</dd> + <dt><a href="https://www.codecademy.com/">Codecademy</a></dt> + <dd>Μια εξαιρετική, διαδραστική ιστοσελίδα για εκμάθηση γλωσσών προγραμματισμού από την αρχή.</dd> + <dt><a href="https://www.bitdegree.org/learn/">BitDegree</a></dt> + <dd>Βασική θεωρία κώδικα με μια διασκεδαστική διαδικασία εκμάθησης. Απευθύνεται κυρίως σε αρχάριους.</dd> + <dt><a href="https://code.org/">Code.org</a></dt> + <dd>Βασική θεωρία και εξάσκηση κώδικα, απευθύνεται κυρίως σε παιδιά/αρχάριους.</dd> + <dt><a href="https://exlskills.com/learn-en/courses">EXLskills</a></dt> + <dd>Δωρεάν μαθήματα ανοικτού κώδικα για τεχνολογικές ικανότητες. Παρέχεται καθοδήγηση και η εκμάθηση επιτυγχάνεται μέσω εργασιών.</dd> + <dt><a href="https://www.freecodecamp.org/">freeCodeCamp.org</a></dt> + <dd>Διαδραστική ιστοσελίδα με οδηγούς και εργασίες για να μάθετε προγραμματισμό web.</dd> + <dt><a href="https://foundation.mozilla.org/en/initiatives/web-literacy/core-curriculum/">Web literacy map</a></dt> + <dd>Ένα πλαίσιο για βασικές γνώσεις σχετικά με το web και ικανότητες, ενώ παρέχει επίσης πρόσβαση σε διδακτικές δραστηριότητες, ταξινομημένες σε κατηγορίες.</dd> + <dt><a href="https://edabit.com/challenges/javascript">Edabit</a></dt> + <dd>Χιλιάδες διαδραστικές προκλήσεις JavaScript.</dd> +</dl> diff --git a/files/el/learn/javascript/index.html b/files/el/learn/javascript/index.html new file mode 100644 index 0000000000..1730d9953f --- /dev/null +++ b/files/el/learn/javascript/index.html @@ -0,0 +1,55 @@ +--- +title: JavaScript +slug: Learn/JavaScript +translation_of: Learn/JavaScript +--- +<div class="note"><span style="background-color: #ffffff; font-size: 14px;">Κατά τη μετάφραση αυτού του κειμένου η ορολογία δεν μεταφράζεται, όταν κάποιος όρος στην αγγλική δεν είναι κατανοητός μπορείται να τον αναζητήσετε στο internet ή στο Glossar**. **Θα υλοποιηθεί σταδιακά.</span></div> + +<p class="summary">Η JavaScript είναι μια γλώσσα προγραμματισμού που επιτρέπει να υλοποιήσετε σύνθετες ενέργειες σε ιστοσελίδες - κάθε φορά που μια ιστοσελίδα κάνει περισσότερα από το να προβάλει στατικό περιεχόμενο - περιέχει δηλαδή έγκαιρα ενημερωμένο περιεχόμενο, ή χάρτες με αλληλεπίδραση ή κινούμενα 2D/3D γραφικά ή κυλιόμενα βίντεο, jukeboxes, κλπ. - μπορείται να στοιχηματίσεται ότι είναι πολύ πιθανό να περιλαμβάνει javascript.</p> + +<h3 id="Διαδρομές_μάθησης"><strong>Διαδρομές μάθησης</strong></h3> + +<p>Η εκμάθηση της JavaScript είναι αποδεδειγμένα δυσκολότερη από άλλες σχετικές τεχνολογίες όπως <a href="/en-US/docs/Learn/HTML">HTML</a> και <a href="/en-US/docs/Learn/CSS">CSS</a>. Πριν προσπαθήσετε να μάθετε JavaScript, πρέπει να είστε εξοικοιωμένοι τουλάχιστο με αυτές τις 2 τεχνολογίες (HTM, CSS), ή και άλλες. Ξεκίνηστε δουλεύοντα στις παρακάτω ενότητες:</p> + +<ul> + <li><a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the Web</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Introduction">Introduction to HTML</a></li> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a></li> +</ul> + +<p>Προηγούμενη εμπειρία με άλλες γλώσσες προγραμματισμού μπορεί να σας βοηθήσει.</p> + +<p>Αφού εξοικιωθείται με τα βασικά της javascript, θα είστε σε θέση να μάθεται περισσότερα για πιο προχωρημένα θέματα, πχ:</p> + +<ul> + <li>JavaScript in depth, as taught in our <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript guide</a></li> + <li><a href="/en-US/docs/Web/API">HTML5 APIs</a></li> +</ul> + +<h3 id="ΕΝΟΤΗΤΕΣ"><strong>ΕΝΟΤΗΤΕΣ</strong></h3> + +<p>Αυτό το θέμα περιέχει τις ακόλουθες ενότητες και προτείνεται να ακολουθήσετε την σειρά τους κατά τη μελέτη σας. </p> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a></dt> + <dd>Στην πρώτο κεφάλαιο, απαντούνται κάποιες βασικές ερωτήσεις όπως "Τι είναι η javascript;" , "Πως εμφανίζεται;", και "Τι μπορείται να κάνετε με αυτήν;", πριν ξεκινήσετε με τα πρώτα παραδείγματα κώδικα. Μετά από αύτό θα αναφερθούν κάποιες βασικά χαρακτηριστικά της γλώσσας με λεπτομέρειες, όπως μεταβλητές (variables), συμβολοσειρές (strings), αριθμοί (numbers) και λίστες (arrays). </dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript building blocks</a></dt> + <dd>Σε αυτό το κεφάλαιο συνεχίζεται η κάλυψη των βασικών χαρακτηριστικών της γλώσσας με έμφαση στους συχνότερα συναντώμενους τύπους μποκ κώδικα όπως είναι υποθέσεις (conditional statements), επαναλήψει (loops), συναρτήσεις (functions), και συμβάντα (events). Εάν έχετε ήδη συναντήσει τα παραπάνω, εδώ θα αναπτυχθούν με λεπτομέρεια.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects">Introducing JavaScript objects</a></dt> + <dd>Στη javascript πολλά πράγματα είναι αντικείμενα (objects), από βασικά στοιχεία της γλώσσας όπως string και arrays μέχρι τα APIs του browser. Μπορείτε επίσης να δημιουργήσετε δικά σας αντικείμενα στα οποία να βάλετε συναρτήσεις και μεταβλητές δημιουργώντας αποτελεσματικό κώδικα. Η αντικειμενοστρεφής φύση της γλώσσας πρέπει να γίνει κατανοητή για να επεκτείνεται τις γνώσεις σας και να γράψετε αποτελεσματικό κώδικα. Γιαυτό έχει δημιουργηθεί και αυτό το κεφάλαιο για να σας βοηθήσει. Εδώ θα διδαχθείται τη θεωρία των αντικειμένων τη σύνταξή τους λεπτομερειακά, θα δείτε πω να κάνετε τα δικά σας αντικείμενα και επεξηγείται τι είναι τα JSON data και πως να δουλεύετε με αυτά.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs</a></dt> + <dd>When writing client-side JavaScript for web sites or applications, you won't go very far before you start to use APIs — interfaces for manipulating different aspects of the browser and operating system the site is running on, or even data from other web sites or services. In this module we will explore what APIs are, and how to use some of the most common APIs you'll come across often in your development work. </dd> +</dl> + +<h2 id="Solving_common_JavaScript_problems">Solving common JavaScript problems</h2> + +<p><a href="/en-US/docs/Learn/JavaScript/Howto">Use JavaScript to solve common problems</a> provides links to sections of content explaining how to use JavaScript to solve very common problems when creating a webpage.</p> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript">JavaScript on MDN</a></dt> + <dd>The main entry point for core JavaScript documentation on MDN — this is where you'll find extensive reference docs on all aspects of the JavaScript language, and some advanced tutorials aimed at experienced JavaScripters.</dd> + <dt><a href="https://www.youtube.com/user/codingmath">Coding math</a></dt> + <dd>An excellent series of video tutorials to teach the math you need to understand to be an effective programmer, by <a href="https://twitter.com/bit101">Keith Peters</a>.</dd> +</dl> diff --git a/files/el/learn/javascript/πρώτα_βήματα/index.html b/files/el/learn/javascript/πρώτα_βήματα/index.html new file mode 100644 index 0000000000..f6ecf9065d --- /dev/null +++ b/files/el/learn/javascript/πρώτα_βήματα/index.html @@ -0,0 +1,66 @@ +--- +title: Τα Πρώτα Βήματα στη JavaScript +slug: Learn/JavaScript/Πρώτα_βήματα +tags: + - JavaScript + - Άρθρο + - Αξιολόγηση + - Αριθμοί + - Αρχάριος + - Ενότητα + - Μεταβλητές + - Οδηγός + - Πίνακες + - Συμβολοσειρές + - μαθηματικά + - προγραμματισμός + - τελεστές +translation_of: Learn/JavaScript/First_steps +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Στην πρώτη ενότητα της JavaScript, απαντούμε πρώτα σε μερικές θεμελιώδεις ερωτήσεις όπως "τι είναι η JavaScript;", "πώς μοιάζει;" και "τι μπορεί να κάνει;", προτού προχωρήσουμε στην πρώτη σας πρακτική εμπειρία συγγραφής JavaScript. Μετά από αυτό, συζητάμε λεπτομερώς μερικά βασικά δομικά στοιχεία , όπως μεταβλητές, αλφαριθμητικά, αριθμούς και πίνακες.</p> + +<h2 id="Προϋποθέσεις">Προϋποθέσεις</h2> + +<p>Πριν ξεκινήσετε αυτήν την ενότητα, δεν χρειάζεστε προηγούμενη γνώση της JavaScript, αλλά θα πρέπει να έχετε κάποια εξοικείωση με την HTML και το CSS. Συνιστάται να εργαστείτε μέσω των παρακάτω ενοτήτων πριν ξεκινήσετε με τη JavaScript:</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Ξεκινώντας με τον Ιστό</a> (που περιλαμβάνει μια πραγματικά <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">βασική εισαγωγή JavaScript</a>).</li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Εισαγωγή στην HTML</a>.</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Εισαγωγή στο CSS</a>.</li> +</ul> + +<div class="note"> +<p><strong>Σημείωση</strong>: Εάν εργάζεστε σε έναν υπολογιστή / ταμπλέτα / άλλη συσκευή όπου δεν έχετε τη δυνατότητα να δημιουργήσετε τα δικά σας αρχεία, μπορείτε να δοκιμάσετε (τα περισσότερα) παραδείγματα κώδικα σε ένα online πρόγραμμα κωδικοποίησης όπως το <a href="http://jsbin.com/">JSBin</a> ή το <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Οδηγοί">Οδηγοί</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">Τί είναι η JavaScript</a>;</dt> + <dd>Καλώς ορίσατε στο μάθημα JavaScript για αρχάριους του MDN! Σε αυτό το πρώτο άρθρο θα εξετάσουμε τη JavaScript από ένα υψηλό επίπεδο, απαντώντας σε ερωτήσεις όπως "τι είναι;" και "τι κάνει;" και να βεβαιωθείτε ότι είστε άνετοι με το σκοπό της JavaScript.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">Μια πρώτη ματιά στη JavaScript</a></dt> + <dd>Τώρα που έχετε μάθει μερικά πράγματα σχετικά με τη θεωρία της JavaScript και τι μπορείτε να κάνετε με αυτή, θα σας δώσουμε μια σειρά μαθημάτων με τα βασικά χαρακτηριστικά της JavaScript μέσω ενός πλήρως πρακτικού οδηγού. Εδώ θα δημιουργήσετε ένα απλό παιχνίδι "Μάντεψε τον αριθμό", βήμα προς βήμα.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">Τι πήγε λάθος; Αντιμετώπιση προβλημάτων στη JavaScript</a></dt> + <dd>Όταν δημιουργήσατε το παιχνίδι "Μάντεψε τον αριθμό" στο προηγούμενο άρθρο, μπορεί να διαπιστώσατε ότι δεν λειτούργησε. Μην φοβηθείτε - αυτό το άρθρο στοχεύει να σας εξοικονομήσει από το βγάλσιμο των μαλλιών σας πάνω από τέτοια προβλήματα, παρέχοντάς σας μερικές απλές συμβουλές για το πώς μπορείτε να βρείτε και να διορθώσετε σφάλματα σε προγράμματα JavaScript.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Αποθήκευση των πληροφοριών που χρειάζεστε - Μεταβλητές</a></dt> + <dd>Αφού διαβάσατε τα τελευταία άρθρα, πρέπει τώρα να είστε σε θέση να γνωρίζετε τι είναι η JavaScript, τι μπορεί να κάνει για εσάς, πώς την χρησιμοποιείτε παράλληλα με άλλες τεχνολογίες ιστού και ποια είναι τα βασικά χαρακτηριστικά της από ένα υψηλό επίπεδο. Σε αυτό το άρθρο θα φτάσουμε στα πραγματικά βασικά, εξετάζοντας πώς να δουλέψουμε με τα πιο βασικά δομικά στοιχεία της JavaScript - Μεταβλητές.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Βασικά μαθηματικά σε JavaScript - αριθμοί και τελεστές </a></dt> + <dd>Σε αυτό το σημείο του μαθήματος συζητάμε για τα μαθηματικά στη JavaScript - πώς μπορούμε να συνδυάσουμε τους τελεστές και άλλα χαρακτηριστικά για να χειριστούμε επιτυχώς τους αριθμούς.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Χειρισμός κειμένου - συμβολοσειρές στη JavaScript</a></dt> + <dd>Στη συνέχεια θα στρέψουμε την προσοχή μας σε συμβολοσειρές - έτσι λέγονται κομμάτια κειμένου στον προγραμματισμό. Σε αυτό το άρθρο θα εξετάσουμε όλα τα συνηθισμένα πράγματα που πρέπει να γνωρίζετε σχετικά με τις συμβολοσειρές κατά την εκμάθηση της JavaScript, όπως η δημιουργία συμβολοσειρών, η διαφυγή εισαγωγικών σε συμβολοσειρές και η σύνδεσή τους μαζί.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Χρήσιμες μέθοδοι συμβολοσειρών</a></dt> + <dd>Τώρα εξετάσαμε τα βασικά στοιχεία των συμβολοσειρών, ας ανεβάσουμε ταχύτητα και ας αρχίσουμε να σκεφτόμαστε τι χρήσιμες λειτουργίες μπορούμε να κάνουμε σε συμβολοσειρές με ενσωματωμένες μεθόδους, όπως η εύρεση του μήκους μιας συμβολοσειράς κειμένου, η ένωση και η διαίρεση των συμβολοσειρών, αντικαθιστώντας ένα χαρακτήρα σε μια συμβολοσειρά με έναν άλλο και πολλά άλλα.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Πίνακες</a></dt> + <dd>Στο τελευταίο άρθρο αυτής της ενότητας, θα εξετάσουμε τους πίνακες - ένας τακτικός τρόπος αποθήκευσης μιας λίστας στοιχείων δεδομένων κάτω από ένα ενιαίο όνομα μεταβλητής. Εδώ εξετάζουμε γιατί αυτό είναι χρήσιμο, στη συνέχεια θα διερευνήσουμε πώς να δημιουργήσουμε ένα πίνακα, να ανακτήσουμε, να προσθέσουμε και να αφαιρέσουμε στοιχεία που είναι αποθηκευμένα σε έναν πίνακα και πολλά άλλα.</dd> +</dl> + +<h2 id="Αξιολόγηση">Αξιολόγηση</h2> + +<p>Η παρακάτω αξιολόγηση θα ελέγξει την κατανόησή σας στα βασικά της JavaScript που καλύπτονται στους παραπάνω οδηγούς.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Ανόητη γεννήτρια ιστοριών</a> </dt> + <dd>Σε αυτήν την αξιολόγηση, θα είστε επιφορτισμένοι με τη χρήση κάποιων από τις γνώσεις που έχετε πάρει στα άρθρα αυτής της ενότητας και την εφαρμογή της στη δημιουργία μιας διασκεδαστικής εφαρμογής που δημιουργεί τυχαίες ανόητες ιστορίες. Καλα να περνατε!</dd> +</dl> diff --git a/files/el/mdn/about/index.html b/files/el/mdn/about/index.html new file mode 100644 index 0000000000..6e6e0dedd1 --- /dev/null +++ b/files/el/mdn/about/index.html @@ -0,0 +1,111 @@ +--- +title: Σχετικά με το MDN +slug: MDN/About +translation_of: MDN/About +--- +<div>{{MDNSidebar}}</div> + +<div>{{IncludeSubNav("/en-US/docs/MDN")}}</div> + +<p>Το MDN Web Docs είναι μια εξελισσόμενη πλατφόρμα εκμάθησης για τις διαδικτυακές τεχνολογίες και το λογισμικό που τροφοδοτεί το διαδίκτυο, καθώς και τα εξής:</p> + +<ul> + <li>Διαδικτυακά πρότυπα, όπως τα <a href="/en-US/docs/CSS" title="/en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/HTML" title="/en-US/docs/HTML">HTML</a> και <a href="/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></li> + <li><a href="/en-US/docs/Apps" title="/en-US/docs/Apps">Ανάπτυξη εφαρμογών ανοικτού ιστού</a></li> + <li><a href="/en-US/docs/Add-ons" title="/en-US/docs/Add-ons">Ανάπτυξη προσθέτων του Firefox</a></li> +</ul> + +<h2 id="Η_αποστολή_μας">Η αποστολή μας</h2> + +<p>Η αποστολή του MDN είναι απλή: παροχή αναγκαίων πληροφοριών στους προγραμματιστές, ώστε να αναπτύξουν έργα στο <a href="/en-US/docs/Web">ανοικτό διαδίκτυο</a>. Αν είναι μια ανοικτή τεχνολογία που αφορά το διαδίκτυο, θέλουμε να την καταγράψουμε.</p> + +<p>Επιπλέον, παρέχουμε τεκμηρίωση σχετικά με τα <a href="/en-US/docs/Mozilla">προϊόντα της Mozilla</a> και το πώς <a href="/en-US/docs/Mozilla">να αναπτύξετε και να συνεισφέρετε στα έργα της Mozilla</a>.</p> + +<p>Αν δεν είστε σίγουροι εάν ένα συγκεκριμένο θέμα πρέπει να καλυφθεί στο MDN, διαβάστε το "<a href="/en-US/docs/Project:MDN/Contributing/Does_this_belong">Does this belong on MDN?</a>".</p> + +<h2 id="Πώς_μπορείτε_να_βοηθήσετε">Πώς μπορείτε να βοηθήσετε</h2> + +<p>Δεν χρειάζεται να ξέρετε από προγραμματισμό—ή πολύ καλό προγραμματισμό—για να μπορέσετε να βοηθήσετε το MDN! Έχουμε πολλούς τρόπους με τους οποίους μπορείτε να βοηθήσετε, from reviewing articles to be sure they make sense, to contributing text, to adding sample code. In fact, there are so many ways to help that we have a <a href="/en-US/docs/MDN/Getting_started">Getting Started</a> page that helps you pick tasks to do, based on your interests and how much time you have to spare!</p> + +<p>You can also help by <a href="/en-US/docs/MDN/About/Promote">promoting MDN</a> on your own blog or website.</p> + +<h2 id="The_MDN_community">The MDN community</h2> + +<p>Our community is a global one! We have amazing contributors all around the world, in a number of languages. If you'd like to learn more about us, or if you need help of any kind with MDN, feel free to check out our <a href="https://discourse.mozilla-community.org/c/mdn">discussion forum</a> or <a href="irc://irc.mozilla.org#mdn">IRC channel</a>! You can also keep up with what we're up to by following our Twitter account, <a href="http://twitter.com/MozDevNet">@MozDevNet</a>. You can also send tweets our way if you see something wrong or if you'd like to offer feedback (or great big thank yous) to our writers and contributors!</p> + +<h2 id="Using_MDN_Web_Docs_content">Using MDN Web Docs content</h2> + +<p>MDN's content is available free of charge, and under open source licenses.</p> + +<h3 id="Copyrights_and_licenses">Copyrights and licenses</h3> + +<p>MDN's content is entirely available under various open source licenses. This section covers the types of content we provide and what licenses are in effect for each.</p> + +<h4 id="Τεκμηρίωση_και_άρθρα">Τεκμηρίωση και άρθρα</h4> + +<p><strong>MDN wiki documents</strong> have been prepared with the contributions of many authors, both within and outside the Mozilla Foundation. Unless otherwise indicated, the content is available under the terms of the <a class="external text" href="http://creativecommons.org/licenses/by-sa/2.5/" rel="nofollow" title="http://creativecommons.org/licenses/by-sa/2.5/">Creative Commons Attribution-ShareAlike license</a> (CC-BY-SA), v2.5 or any later version. Please attribute "Mozilla Contributors" and include a hyperlink (online) or URL (in print) to the specific wiki page for the content being sourced. For example, to provide attribution for this article, you can write:</p> + +<blockquote><a href="https://developer.mozilla.org/en-US/docs/MDN/About">About MDN</a> by <a href="https://developer.mozilla.org/en-US/docs/MDN/About$history">Mozilla Contributors</a> is licensed under <a href="http://creativecommons.org/licenses/by-sa/2.5/">CC-BY-SA 2.5</a>.</blockquote> + +<p>Note that in the example, "Mozilla Contributors" links to the history of the cited page. See <a href="http://wiki.creativecommons.org/Marking/Users">Best practices for attribution</a> for further explanation.</p> + +<div class="note"> +<p>See <a href="/en-US/docs/MDN_content_on_WebPlatform.org" title="/en-US/docs/MDN_content_on_WebPlatform.org">MDN content on WebPlatform.org</a> for information about how to reuse and attribute MDN content on that site.</p> +</div> + +<h4 id="Δείγματα_και_τμήματα_κώδικα">Δείγματα και τμήματα κώδικα</h4> + +<p>Code samples added on or after August 20, 2010 are in the <a class="external" href="http://creativecommons.org/publicdomain/zero/1.0/" title="http://wiki.creativecommons.org/Public_domain">public domain</a> (<a href="https://creativecommons.org/publicdomain/zero/1.0/">CC0</a>). No licensing notice is necessary, but if you need one, you can use: "Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/".</p> + +<p>Code samples added to this wiki before August 20, 2010 are available under the <a class="external" href="http://www.opensource.org/licenses/mit-license.php" title="http://www.opensource.org/licenses/mit-license.php">MIT license</a>; you should insert the following attribution information into the MIT template: "© <date of last wiki page revision> <name of person who put it in the wiki>".</p> + +<h4 id="Συνεισφορές">Συνεισφορές</h4> + +<p>If you wish to contribute to this wiki, you must make your documentation available under the Attribution-ShareAlike license (or occasionally an alternative license already specified by the page you are editing), and your code samples available under <a href="http://creativecommons.org/publicdomain/zero/1.0/" title="http://creativecommons.org/publicdomain/zero/1.0/">Creative Commons CC-0</a> (a Public Domain dedication). Adding to this wiki means you agree that your contributions will be made available under those licenses.</p> + +<p>Some older content was made available under a license other than the licenses noted above; these are indicated at the bottom of each page by way of an <a class="internal" href="/Archive/Meta_docs/Examples/Alternate_License_Block" title="Project:En/Examples/Alternate License Block">Alternate License Block</a>.</p> + +<div class="warning"> +<p>Δεν μπορούν να δημιουργηθούν νέες σελίδες με διαφορετικές άδειες.</p> +</div> + +<p><strong>Copyright for contributed materials remains with the author unless the author assigns it to someone else</strong>.</p> + +<p>If you have any questions or concerns about anything discussed here, please contact <a class="external" href="mailto:mdn-admins@mozilla.org?subject=MDN%20licensing%20question" rel="nofollow" title="mailto:eshepherd@mozilla.com">the MDN administrators</a>.</p> + +<h4 id="Λογότυπα_και_εμπορικά_σήματα">Λογότυπα και εμπορικά σήματα</h4> + +<hr> +<p>The rights in the trademarks, logos, service marks of the Mozilla Foundation, as well as the look and feel of this web site, are not licensed under the Creative Commons license, and to the extent they are works of authorship (like logos and graphic design), they are not included in the work that is licensed under those terms. If you use the text of documents, and wish to also use any of these rights, or if you have any other questions about complying with our licensing terms for this collection, you should contact the Mozilla Foundation here: <a class="external text" href="mailto:licensing@mozilla.org" rel="nofollow" title="mailto:licensing@mozilla.org">licensing@mozilla.org</a>.</p> + +<h3 id="Σύνδεση_στο_MDN">Σύνδεση στο MDN</h3> + +<p>Δείτε αυτό το άρθρο για καθοδήγηση σχετικά με τη <a href="/en-US/docs/MDN/About/Linking_to_MDN">σύνδεση στο MDN</a> για καλύτερες πρακτικές κατά τη σύνδεση.</p> + +<h2 id="Λήψη_περιεχομένου">Λήψη περιεχομένου</h2> + +<p>Μπορείτε να κάνετε λήψη ενός <a href="https://mdn-downloads.s3-us-west-2.amazonaws.com/developer.mozilla.org.tar.gz">πλήρους tarball του MDN</a> (2.1 GB από το Φεβρουάριο του 2017).</p> + +<h3 id="Μεμονωμένες_σελίδες">Μεμονωμένες σελίδες</h3> + +<p>Μπορείτε να ανακτήσετε το περιεχόμενο μιας μόνο σελίδας στο MDN προσθέτοντας <a href="/en-US/docs/MDN/Contribute/Tools/Document_parameters#URL_parameters">παραμέτρους URL</a> για να καθορίσετε ποια μορφή θέλετε.</p> + +<h3 id="Εργαλεία_τρίτων">Εργαλεία τρίτων</h3> + +<p>Μπορείτε να δείτε το περιεχόμενο του MDN μέσω εργαλείων τρίτων, όπως το <a href="http://kapeli.com/dash">Dash</a> (για macOS) και το <a href="http://zealdocs.org/">Zeal</a> (για Linux και Windows).</p> + +<p>Το <a href="https://kapeli.com/">Kapeli</a> δημοσιεύει επίσης <a href="https://kapeli.com/mdn_offline">έγγραφα του MDN εκτός σύνδεσης</a>, που καλύπτουν τα: HTML, CSS, JavaScript, SVG και XSLT.</p> + +<h2 id="Reporting_problems_with_MDN_Web_Docs">Reporting problems with MDN Web Docs</h2> + +<p>See <a href="/en-US/docs/MDN/Contribute/Howto/Report_a_problem">How to report a problem on MDN</a>.</p> + +<h2 id="History_of_MDN_Web_Docs">History of MDN Web Docs</h2> + +<p>The MDN Web Docs (previously <em>Mozilla Developer Network (MDN)</em>, previously <em>Mozilla Developer Center (MDC)</em>, a.k.a. <em>Devmo</em>) project started in early 2005, when the <a class="external" href="http://www.mozillafoundation.org">Mozilla Foundation</a> obtained a license from AOL to use the original Netscape <a href="https://web.archive.org/web/*/devedge.netscape.com" title="Project:en/DevEdge">DevEdge</a> content. The DevEdge content was mined for still-useful material, which was then migrated by volunteers into this wiki so it would be easier to update and maintain.</p> + +<p>You can find more history of MDN on our <a href="/en-US/docs/MDN_at_ten">10th anniversary celebration</a> page, including an oral history by some of the people who were involved.</p> + +<h2 id="Σχετικά_με_τη_Mozilla">Σχετικά με τη Mozilla</h2> + +<p>Αν θέλετε να μάθετε περισσότερα σχετικά με το ποιοι είμαστε, το πώς να γίνετε μέλος της <em>Mozilla</em> ή απλά το πού θα μάς βρείτε, έχετε έρθει στο σωστό μέρος. Για να μάθετε τι μάς κινητοποιεί και μάς διαφοροποιεί, παρακαλούμε επισκεφθείτε τη σελίδα <a href="http://www.mozilla.org/en-US/mission/">αποστολής</a> μας.</p> diff --git a/files/el/mdn/contribute/getting_started/index.html b/files/el/mdn/contribute/getting_started/index.html new file mode 100644 index 0000000000..a4de2cf3e8 --- /dev/null +++ b/files/el/mdn/contribute/getting_started/index.html @@ -0,0 +1,116 @@ +--- +title: Ξεκινώντας στο MDN +slug: MDN/Contribute/Getting_started +tags: + - MDN Meta + - Αρχάριος + - Αρχίζοντας + - Εισαγωγή + - Οδηγός +translation_of: MDN/Contribute/Getting_started +--- +<div class="blockIndicator warning"> + +</div> + +<p>{{MDNSidebar}}</p> + +<div>{{IncludeSubnav("/el-GR/docs/MDN")}}</div> + +<div><font><font>Είμαστε μια ανοιχτή κοινότητα προγραμματιστών και συγγραφέων που δημιουργούμε πόρους για ένα καλύτερο διαδίκτυο, ανεξαρτήτως μάρκας, προγράμματος περιήγησης, ή πλατφόρμας. </font><font>Οποιοσδήποτε μπορεί να συνεισφέρει και να μάς κάνει δυνατότερους. </font><font>Μαζί, μπορούμε να συνεχίσουμε να οδηγούμε την καινοτομία στο διαδίκτυο για να υπηρετήσουμε το γενικότερο καλό. </font><font>Όλα ξεκινούν εδώ, μαζί σας.</font></font></div> + +<div></div> + +<p><span><font><font>Κάθε μέρος του MDN (από τον κώδικα που καθιστά την ιστοσελίδα λειτουργική, έως και την τεκμηρίωση, τα δείγματα κώδικα και τα έτοιμα παραδείγματα) έχει δημιουργηθεί από μια κοινότητα προγραμματιστών και συγγραφέων. </font><font>Ο καθένας έχει κάτι να προσφέρει και ελπίζουμε ότι θα ενωθείτε μαζί μας!</font></font></span></p> + +<h2 id="3_απλά_βήματα_για_το_MDN"><span><font><font>3 απλά βήματα για το MDN</font></font></span></h2> + +<p><span class="seoSummary"><font><font>Το MDN είναι ένα wiki, όπου </font></font><strong><font><font>ο καθένας</font></font></strong><font><font> μπορεί να προσθέσει και να επεξεργαστεί το περιεχόμενο. </font><font>Δεν χρειάζεται να είστε προγραμματιστής ή να γνωρίζετε πολλά για την τεχνολογία. </font><font>Υπάρχουν πολλά πράγματα που πρέπει να γίνουν, από απλές εργασίες, όπως η επιθεώρηση κειμένων και η διόρθωση λαθών, έως και πολύπλοκες, όπως η σύνταξη των εγγράφων των API. Αυτός ο οδηγός θα σάς βοηθήσει να ξεκινήσετε και θα σάς κατευθύνει έτσι, ώστε να βρείτε τρόπους για να βελτιώσετε κι <em>εσείς </em>το περιεχόμενο του MDN.</font></font></span></p> + +<p><font><font>Η συνεισφορά είναι εύκολη και ασφαλής. </font><font>Ακόμα και αν κάνετε κάποιο λάθος, αυτό μπορεί να διορθωθεί εύκολα· </font><font>αν δεν ξέρετε ακριβώς πώς πρέπει να είναι τα πράγματα, ή η γραμματική σας δεν είναι και τόσο καλή, μην ανησυχείτε γι 'αυτό! </font><font>Έχουμε μια ομάδα ατόμων, των οποίων η δουλειά είναι να εξασφαλίζουν ότι το περιεχόμενο του MDN είναι όσο το δυνατόν καλύτερο. </font><font>Κάποιος θα είναι μαζί σας για να βεβαιωθεί ότι η εργασία σας είναι τακτοποιημένη και καλογραμμένη. </font><font>Μοιραστείτε τις γνώσεις σας, ακολουθήστε τις δυνάμεις σας και εμπιστευτείτε την υπόλοιπη κοινότητα, που θα σάς βοηθήσει να βελτιώσετε ακόμη περισσότερο την εργασία σας.</font></font></p> + +<h3 id="Βήμα_1_Δημιουργήστε_ένα_λογαριασμό_στο_MDN"><font><font>Βήμα 1: Δημιουργήστε ένα λογαριασμό στο MDN</font></font></h3> + +<p><font><font>Για να ξεκινήσετε τη συνεισφορά σας στο MDN, θα πρέπει να έχετε ένα λογαριασμό στο MDN. </font><font>Για περισσότερες λεπτομέρειες, παρακαλούμε δείτε </font></font><a href="/el-GR/docs/MDN/Contribute/Howto/Dhmiourgia_logariasmou_MDN"><font><font>πώς μπορείτε να δημιουργήσετε ένα λογαριασμό</font></font></a><font><font>. Σημειώστε ότι θα</font></font> <a href="https://github.com/join">χρειαστείτε ένα λογαριασμό GitHub</a> πριν μπορέσετε να δημιουργήσετε ένα λογαριασμό MDN, αφού χρησιμοποιούμε το GitHub για πιστοποίηση, προς το παρόν.</p> + +<h3 id="Βήμα_2_Επιλέξτε_μια_εργασία"><font><font>Βήμα 2: Επιλέξτε μια εργασία</font></font></h3> + +<p><font><font>Τώρα που έχετε συνδεθεί, διαβάστε τις περιγραφές</font></font> των διαφορετικών τύπων εργασιών στην {{anch("Πιθανοί τύποι εργασιών", "παρακάτω λίστα")}} και αποφασίστε ποιος τύπος σάς ταιριάζει περισσότερο. Μπορείτε να επιλέξετε οποιαδήποτε εργασία επιθυμείτε και να ξεκινήσετε τη συνεισφορά σας.</p> + +<p>Αν η εργασία σας συμπεριλαμβάνει τη δημιουργία νέων σελίδων, παρακαλούμε δείτε το {{SectionOnPage("/en-US/docs/MDN/Contribute/Howto/Create_and_edit_pages", "Getting page creation permissions")}} για σημαντικές πληροφορίες σχετικά με το πώς να λάβετε δικαιώματα για την προσθήκη νέων σελίδων· για λόγους ασφαλείας, οι νέοι λογαριασμοί δεν έχουν αυτή την ικανότητα από προεπιλογή.</p> + +<h3 id="Βήμα_3_Κάντε_την_εργασία"><font><font>Βήμα 3: Κάντε την εργασία</font></font></h3> + +<p><font><font>Μόλις αποφασίσετε τι είδους εργασία θέλετε να κάνετε, βρείτε μια συγκεκριμένη σελίδα, παράδειγμα κώδικα κ.λπ., για να εργαστείτε και απλά κάντε το!</font></font></p> + +<p><font><font>Μην σάς ανησυχεί η τελειότητα· </font><font>άλλοι συνεισφέροντες του MDN είναι εδώ για να σάς βοηθήσουν να διορθώσετε τα λάθη που ξεγλίστρησαν. </font><font>Αν έχετε ερωτήσεις στην πορεία, δείτε την </font></font><a href="/el-GR/docs/MDN/Community"><font><font>κοινοτική</font></font></a><font><font> σελίδα για πληροφορίες σχετικά με τις λίστες αλληλογραφίας και τα κανάλια συνομιλιών, όπου μπορείτε να βρείτε απαντήσεις.</font></font></p> + +<div class="note"> +<p><font><font>Αν θέλετε να πειραματιστείτε με την επεξεργασία του MDN για να κάνετε κάτι "πραγματικό", έχουμε μια σελίδα </font></font><strong><a href="/el-GR/docs/Sandbox"><font><font>Sandbox</font></font></a></strong><font><font> όπου μπορείτε να παίξετε. Παρακαλούμε περιορίστε τα πειράματά σας σε αυτή τη σελίδα. </font><font>Παρακαλούμε μην κάνετε περιττές αλλαγές στις σελίδες περιεχομένου, μόνο και μόνο για να δείτε τι θα συμβεί, </font><font>κάτι που δημιουργεί ένα χάος για τους άλλους να καθαρίσουν, ή ακόμη χειρότερα, συγχύζει τους αναγνώστες που προσπαθούν απλά να μάθουν κάτι ή ψάχνουν κάτι.</font></font></p> +</div> + +<p><font><font>Όταν τελειώσετε με την επιλεγμένη εργασία σας, μη διστάσετε να επιλέξετε ένα άλλο στοιχείο, ή δείτε παρακάτω τα </font></font><a href="#Other_things_you_can_do_on_MDN"><font><font>άλλα πράγματα που μπορείτε να κάνετε στο </font></font></a><font><font>MDN.</font></font></p> + +<h2 id="Πιθανοί_τύποι_εργασιών"><font><font>Πιθανοί τύποι εργασιών</font></font></h2> + +<p><font><font>Υπάρχουν πολλοί δρόμοι που μπορείτε να ακολουθήσετε για να συνεισφέρετε στο MDN, ανάλογα με το σύνολο των ικανοτήτων και των ενδιαφερόντων σας. Ακόμα κι αν ορισμένες εργασίες ενδέχεται να είναι αποκαρδιωτικές, έχουμε πολλές απλές δραστηριότητες που διατίθενται. </font><font>Πολλές από αυτές απαιτούν μόνο πέντε λεπτά (ή και λιγότερο!) από το χρόνο σας. </font><font>Παρακάτω, μαζί με την εργασία και τη σύντομη περιγραφή της, θα βρείτε τον κατά προσέγγιση χρόνο που απαιτεί ο κάθε τύπος εργασίας συνήθως.</font></font></p> + +<h3 id="Επιλογή_1_Μου_αρέσουν_οι_λέξεις"><font><font>Επιλογή 1: Μου αρέσουν οι λέξεις</font></font></h3> + +<p><font><font>Μπορείτε να μάς βοηθήσετε να αξιολογήσουμε ή να τροποποιήσουμε τα υπάρχοντα έγγραφα και να εφαρμόσουμε τις σωστές ετικέτες.</font></font></p> + +<ul> + <li><a href="/el-GR/docs/MDN/Contribute/Howto/Set_the_summary_for_a_page"><font><font>Ρύθμιση περίληψης για μια σελίδα</font></font></a><font><font> (5-15 λεπτά)</font></font></li> + <li><a href="/el-GR/docs/MDN/Contribute/Howto/Do_an_editorial_review"><font><font>Αξιολογήσεις επεξεργασίας</font></font></a><font><font> (5-30 λεπτά)</font></font></li> + <li><a href="/el-GR/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary"><font><font>Προσθήκη νέας καταχώρησης στο Γλωσσάριο</font></font></a><font><font> (15-60 λεπτά)</font></font></li> + <li><a href="/el-GR/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web"><font><font>Σύνταξη άρθρου για να βοηθήσετε τους συνανθρώπους σας να μάθουν για το διαδίκτυο</font></font></a><font><font> (1-3 ώρες)</font></font></li> + <li><a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Tag">Προσθήκη/Αφαίρεση ετικετών από σελίδες</a> (15-60 λεπτά)</li> +</ul> + +<div class="note"><font><font>Αν αξιολογείτε άρθρα ή συντάσσετε καινούρια, σάς ζητούμε να εξετάσετε τον </font></font><a href="/el-GR/docs/MDN/Contribute/Guidelines/Style_guide"><font><font>Οδηγό στυλ</font></font></a><font><font>. </font><font>Έτσι, θα διασφαλιστεί η συνοχή των άρθρων.</font></font></div> + +<h3 id="Επιλογή_2_Μου_αρέσει_ο_κώδικας"><font><font>Επιλογή 2: Μου αρέσει ο κώδικας</font></font></h3> + +<p><font><font>Χρειαζόμαστε περισσότερα δείγματα κώδικα! </font><font>Μπορείτε, επίσης, να βοηθήσετε στην ανάπτυξη της πλατφόρμας της ιστοσελίδα μας,</font><font> <a href="/el-GR/docs/MDN/Kuma">Kuma</a>, ή να βοηθήσετε στον εμπλουτισμό της βάσης δεδομένων μας σχετικά με τα δεδομένα συμβατότητας των προγραμμάτων περιήγησης.</font></font></p> + +<ul> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Convert_code_samples_to_be_live"><font><font>Μετατροπή δειγμάτων κώδικα για να είναι "ζωντανά"</font></font></a><font><font> (30 λεπτά)</font></font></li> + <li><a href="https://wiki.mozilla.org/Webdev/GetInvolved/developer.mozilla.org">Διαβάστε τον οδηγό "Συνεισφορά"</a> (30 λεπτά)</li> + <li><a href="http://kuma.readthedocs.org/en/latest/installation.html"><font><font>Δημιουργία ενός περιβάλλοντος ανάπτυξης του Kuma</font></font></a><font><font> (1 ώρα)</font></font></li> + <li><a href="https://github.com/mozilla/kuma#readme"><font><font>Αποστολή διορθώσεων κώδικα στην βάση κώδικα του Kuma</font></font></a><font><font> (1 ώρα)</font></font></li> + <li><a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Add_or_update_browser_compatibility_data">Προσθήκη ή ενημέρωση δεδομένων <font><font>συμβατότητας των προγραμμάτων περιήγησης</font></font></a> (30 λεπτά)</li> +</ul> + +<h3 id="Επιλογή_3_Μου_αρέσουν_και_οι_λέξεις_και_ο_κώδικας"><font><font>Επιλογή 3: Μου αρέσουν και οι λέξεις και ο κώδικας</font></font></h3> + +<p><font><font>Έχουμε εργασίες που απαιτούν τεχνικές και γλωσσικές δεξιότητες, όπως η σύνταξη νέων άρθρων, η εξέταση της τεχνικής ακρίβειας, ή η προσαρμογή εγγράφων.</font></font></p> + +<ul> + <li><a href="/el-GR/docs/MDN/About/Promote"><font><font>Προώθηση του MDN στη δική σας ιστοσελίδα</font></font></a><font><font> (5 λεπτά)</font></font></li> + <li><a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Remove__Experimental__Macros">Αφαίρεση "πειραματικών" μακροεντολών από στοιχεία που δεν είναι πλέον πειραματικά</a> (5-30 λεπτά)</li> + <li><a href="/el-GR/docs/MDN/Contribute/Howto/Do_a_technical_review"><font><font>Τεχνικές αξιολογήσεις</font></font></a><font><font> (30 λεπτά)</font></font></li> + <li><a href="/el-GR/docs/MDN/Contribute/Howto/Create_and_edit_pages"><font><font>Σύνταξη νέου άρθρου σχετικά με ένα θέμα που απαιτείται τώρα</font></font></a><font><font> (1 ώρα ή περισσότερο)</font></font></li> + <li><a href="/el-GR/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web"><font><font>Δημιουργία διαδραστικής άσκησης για να βοηθήσετε τους συνανθρώπους σας να μάθουν για το διαδίκτυο</font></font></a><font><font> (1 ώρα ή περισσότερο)</font></font></li> + <li><a href="/el-GR/docs/MDN/Contribute/Howto/Resolve_a_mentored_developer_doc_request"><font><font>Διόρθωση σφάλματος στην τεκμηρίωση</font></font></a><font><font> από την </font></font><a href="http://www.joshmatthews.net/bugsahoy/?mdn=1"><font><font>κατηγορία MDN στο Ahoy Bugs</font></font></a><font><font> (1 ώρα ή περισσότερο)</font></font></li> +</ul> + +<h3 id="Επιλογή_4_Θέλω_το_MDN_στη_γλώσσα_μου"><font><font>Επιλογή 4: Θέλω το MDN στη γλώσσα μου</font></font></h3> + +<p><font><font>Όλες οι εργασίες μεταφράσεων στο MDN γίνονται απο την καταπληκτική κοινότητά των εθελοντών μας.</font></font></p> + +<ul> + <li><a href="/el-GR/docs/MDN/Contribute/Localize/Translating_pages"><font><font>Μετάφραση σελίδων</font></font></a><font><font> (2 ώρες) (Δείτε </font></font><font><font>τις </font></font><a href="https://developer.mozilla.org/en-US/docs/MDN/Doc_status/l10nPriority">κορυφαίες προτεραιότητες</a>)</li> + <li><font><font>Σύνδεση με άλλους μεταφραστές από τα </font></font><a href="/el-GR/docs/MDN/Contribute/Localize/Localization_projects"><font><font>έργα μετάφρασης</font></font></a><font><font> (30 λεπτά)</font></font></li> +</ul> + +<h3 id="Επιλογή_5_Βρήκα_κάποιες_λανθασμένες_πληροφορίες_αλλά_δεν_ξέρω_πώς_να_τις_φτιάξω"><font><font>Επιλογή 5: Βρήκα κάποιες λανθασμένες πληροφορίες, αλλά δεν ξέρω πώς να τις φτιάξω</font></font></h3> + +<p><font><font>Μπορείτε να αναφέρετε προβλήματα </font></font><a class="external" href="https://bugzilla.mozilla.org/form.doc"><font><font>καταθέτοντας ένα σφάλμα τεκμηρίωσης</font></font></a><font><font>. </font><font>(5 λεπτά)</font></font></p> + +<h2 id="Άλλα_πράγματα_που_μπορείτε_να_κάνετε_στο_MDN"><font><font>Άλλα πράγματα που μπορείτε να κάνετε στο MDN</font></font></h2> + +<ul> + <li><a href="/el-GR/docs/MDN/Community"><font><font>Συμμετοχή στην κοινότητα του MDN</font></font></a><font><font>.</font></font></li> + <li><a href="/el-GR/profile"><font><font>Συμπλήρωση του προφίλ σας</font></font></a><font><font> έτσι, ώστε οι άλλοι να μπορούν να μάθουν περισσότερα για εσάς.</font></font></li> + <li><font><font>Μάθετε περισσότερα σχετικά με τη </font></font><a href="/el-GR/docs/MDN/Contribute"><font><font>συνεισφορά στο </font></font></a><font><font>MDN.</font></font></li> +</ul> diff --git a/files/el/mdn/contribute/howto/dhmiourgia_logariasmou_mdn/index.html b/files/el/mdn/contribute/howto/dhmiourgia_logariasmou_mdn/index.html new file mode 100644 index 0000000000..e01eefbff2 --- /dev/null +++ b/files/el/mdn/contribute/howto/dhmiourgia_logariasmou_mdn/index.html @@ -0,0 +1,42 @@ +--- +title: Δημιουργία λογαριασμού MDN +slug: MDN/Contribute/Howto/Dhmiourgia_logariasmou_MDN +tags: + - MDN Meta + - Αρχάριος + - Οδηγός + - Τεκμηρίωση +translation_of: MDN/Contribute/Howto/Create_an_MDN_account +--- +<div>{{MDNSidebar}}</div><p><span class="seoSummary">Για να επεξεργαστείτε περιεχόμενο στο MDN, θα χρειαστείτε ένα προφίλ MDN. Δεν χρειάζεστε προφίλ αν θέλετε μόνο να διαβάσετε και να αναζητήσετε τα έγγραφα του MDN. Αυτός ο οδηγός θα σάς βοηθήσετε να ρυθμίσετε το προφίλ MDN σας.</span></p> + +<div class="pull-aside"> +<div class="moreinfo"> +<p><strong>Γιατί το MDN απαιτεί τη διεύθυνση email μου;</strong><br> + <br> + Η διεύθυνση email σας χρησιμοποιείται για την ανάκτηση του λογαριασμού σας, αλλά και από τους διαχειριστές του MDN, αν χρειαστεί να επικοινωνήσουν μαζί σας σχετικά με το λογαριασμό σας ή τη δραστηριότητά σας στην ιστοσελίδα.</p> + +<p>Επιπλέον, μπορείτε να ενεργοποιήσετε τις ειδοποιήσεις (όπως <a href="/en-US/docs/MDN/Contribute/Howto/Watch_a_page">όταν αλλάζουν ορισμένες σελίδες</a>) και τα μηνύματα (για παράδειγμα, αν επιλέξετε να συμμετάσχετε στην ομάδα δοκιμών beta μας, ενδέχεται να λαμβάνετε emails σχετικά με τις νέες λειτουργίες που απαιτούν δοκιμή).<br> + <br> + Η διεύθυνση email σας δεν εμφανίζεται ποτέ στο MDN και θα χρησιμοποιηθεί σύμφωνα με την <a href="https://www.mozilla.org/privacy/websites/">πολιτική απορρήτου</a> μας.</p> + +<div class="note">Αν συνδεθείτε στο MDN μέσω GitHub και χρησιμοποιείτε μια διεύθυνση email "noreply" στο GitHub, δεν θα λαμβάνετε μηνύματα (αλλά και ειδοποιήσεις όταν κάνετε εγγραφή σε σελίδες) από το MDN.</div> +</div> +</div> + +<ol> + <li>Στο πάνω μέρος κάθε σελίδας στο MDN, θα βρείτε το κουμπί <strong>Σύνδεση</strong>. Μετακινήστε τον κέρσορά σας σε αυτό (ή πατήστε το, αν χρησιμοποιείτε κινητή συσκευή) για να εμφανιστεί μια λίστα με τις υπηρεσίες πιστοποίησης που υποστηρίζονται για τη σύνδεση στο MDN.</li> + <li>Επιλέξτε μια υπηρεσία με την οποία θα συνδεθείτε. Προς το παρόν, μόνο το GitHub είναι διαθέσιμο. Σημειώστε ότι αν επιλέξετε το GitHub, θα συμπεριληφθεί ένας σύνδεσμος για το προφίλ GitHub σας στη δημόσια σελίδα του προφίλ MDN σας.</li> + <li>Ακολουθήστε τις υποδείξεις του GitHub για να συνδέσετε το λογαριασμό σας με το MDN.</li> + <li>Μόλις η υπηρεσία πιστοποίησης σάς επιστρέψει στο MDN, θα σάς ζητηθεί να εισαγάγετε ένα όνομα χρήστη και μια διεύθυνση email. <em>Το όνομα χρήστη σας θα εμφανίζεται δημοσίως έτσι, ώστε να αναγνωριστεί η εργασία σας. Μην χρησιμοποιείτε τη διεύθυνση email σας ως το όνομα χρήστη σας</em><strong>.</strong></li> + <li>Κάντε κλικ στο <strong>Δημιουργία προφίλ MDN</strong>.</li> + <li>Αν η διεύθυνση email που καθορίσατε στο βήμα 4 δεν είναι ίδια με αυτή που χρησιμοποιείτε με την υπηρεσία πιστοποίησης, παρακαλούμε ελέγξτε τα emails σας και κάντε κλικ στο σύνδεσμο του email επιβεβαίωσης που σάς αποστείλαμε.</li> +</ol> + +<p>Αυτό ήταν! Έχετε αποκτήσει ένα λογαριασμό MDN και μπορείτε να αρχίσετε αμέσως την επεξεργασία σελίδων!</p> + +<p>Μπορείτε να κάνετε κλικ στο όνομά σας στο πάνω μέρος οποιασδήποτε σελίδας του MDN για να δείτε το δημόσιο προφίλ σας. Από εδώ, μπορείτε να κάνετε κλικ στο <strong>Επεξεργασία</strong> για να κάνετε αλλαγές ή προσθήκες στο προφίλ σας.</p> + +<div class="note"> +<p>Τα νέα ονόματα χρήστη δεν μπορούν να περιέχουν κενά ή το χαρακτήρα "@". Θυμηθείτε ότι το όνομα χρήστη σας θα εμφανίζεται δημοσίως έτσι, ώστε να αναγνωριστεί η εργασία σας.</p> +</div> diff --git a/files/el/mdn/contribute/howto/index.html b/files/el/mdn/contribute/howto/index.html new file mode 100644 index 0000000000..782028400e --- /dev/null +++ b/files/el/mdn/contribute/howto/index.html @@ -0,0 +1,16 @@ +--- +title: 'MDN web docs: How-to guides' +slug: MDN/Contribute/Howto +tags: + - Documentation + - Landing + - MDN Meta + - NeedsTranslation + - TopicStub +translation_of: MDN/Contribute/Howto +--- +<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> + +<p>These articles provide step-by-step guides to accomplishing specific goals when contributing to MDN.</p> + +<p>{{LandingPageListSubpages}}</p> diff --git a/files/el/mdn/contribute/index.html b/files/el/mdn/contribute/index.html new file mode 100644 index 0000000000..8e44caade3 --- /dev/null +++ b/files/el/mdn/contribute/index.html @@ -0,0 +1,20 @@ +--- +title: Contributing to MDN +slug: MDN/Contribute +tags: + - Guide + - Landing + - MDN Meta + - NeedsTranslation + - TopicStub +translation_of: MDN/Contribute +--- +<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> + +<p>Welcome! By visiting this page, you've taken the first step toward becoming a contributor to MDN!</p> + +<p><span class="seoSummary">The guides listed here cover all aspects of contributing to MDN, including style guides, guides to using our editor and tools, and more. Please make sure you have read (and are compliant with) the <a href="https://www.mozilla.org/en-US/about/legal/terms/mozilla/">Mozilla Terms</a> before editing or creating any pages. </span></p> + +<p>If you haven't contributed to MDN previously, the <a href="/en-US/docs/MDN/Getting_started">Getting Started</a> guide can help you pick a task to jump in and help with.</p> + +<p>{{LandingPageListSubPages()}}</p> diff --git a/files/el/mdn/index.html b/files/el/mdn/index.html new file mode 100644 index 0000000000..90c3910de3 --- /dev/null +++ b/files/el/mdn/index.html @@ -0,0 +1,75 @@ +--- +title: 'Project:Αποσαφηνισμοί' +slug: MDN +tags: + - Landing + - MDN Meta + - 'l10n:priority' +translation_of: MDN +--- +<div>{{MDNSidebar}}</div><h2 id="Εισαγωγή">Εισαγωγή</h2> + +<p>Οι <strong>Αποσαφηνισμοί</strong> στο MDC wiki είναι η διαδικασία επίλυσης <em>ασαφειών</em><em>,</em> αναφερόμενοι στα θέματα που δημιουργούνται όταν άρθρα σχετικά με δύο ή περισσότερα αντικείμενα έχουν τον ίδιο "φυσικό" τίτλο.</p> + +<p>Κάθε σελίδα μέσα στο wiki θα πρέπει να έχει έναν μοναδικό τίτλο. Αυτό μπορεί να προκαλέσει προβλήματα όταν δύο σελίδες, θεωρητικά, έχουν τον ίδιο ακριβώς τίτλο. Για παράδειγμα, το <a href="/en/indexOf" title="en/indexOf">indexOf</a> είναι μια μέθοδος και για String αλλά και για Array objects στην JavaScript.</p> + +<div class="note"><span class="highlightred"><strong>Σημείωση</strong>: η ακόλουθη πολιτική έχει αλλάξει από την πρώτη της έκδοση.</span></div> + +<p>Όπως και στην Wikipedia, διαφοροποιούμε τις σελίδες τοποθετώντας περιεχόμενο σε παρενθέσεις μετά το όνομα (π.χ., "Mercury (planet)"). Ωστόσο, κάποιοι χρήστες που θα ψάξουν πληροφορίες για το "indexOf" είναι πολύ πιθανό να έρθουν στο Devmo και να γράψουν "indexOf" μέσα στο search box. Η αναζήτηση θα δώσει αποτελέσματα για όλες τις σελίδες που περιέχουν την λέξη "indexOf", κάτι που δεν θα βοηθούσε γενικότερα, δεδομένου ότι θα εμφανιστεί σε τίτλους, άρθρα, οδηγούς, δείγματα κώδικα, και αναφορές μέσα σε όλο το wiki. Με σκοπό να βοηθήσουμε όσους ψάχνουν κάτι τέτοιο να το βρούνε πιο εύκολα, ξεκινήσαμε να προσθέτουμε σελίδες αποσαφηνισμού (disambiguation pages) στο wiki.</p> + +<h3 id="When_to_create_a_disambiguation_page" name="When_to_create_a_disambiguation_page">Πότε να δημιουργήσετε μια σελίδα αποσαφηνισμού</h3> + +<p>Οι σελίδες αποσαφηνισμού θα πρέπει να δημιουργούνται μόνο για να επιλύσουν κάποιο θέμα ασάφειας ανάμεσα σε δύο ή περισσότερες σελίδες.</p> + +<h3 id="How_to_create_a_disambiguation_page" name="How_to_create_a_disambiguation_page">Πώς να δημιουργήσετε μια σελίδα αποσαφηνισμού</h3> + +<p>Οι σελίδες αποσαφηνισμού είναι σχεδιασμένες ξεχωριστά από τους συντάκτες να συνδέονται με όλες τις σελίδες που ο χρήστης μπορεί να ψάχνει για έναν όρο. Αυτό βοηθάει τους χρήστες να βρούν γρήγορα αυτό που ψάχνουν.</p> + +<p>Για να δημιουργήσετε μια σελίδα αποσαφηνισμού, απλώς δημιουργήστε μια σελίδα όπου ο τίτλος της θα είναι ο ασαφής όρος; για παράδειγμα, <a href="/en/indexOf" title="en/indexOf">indexOf</a>.</p> + +<h3 id="What_to_include_in_a_disambiguation_page" name="What_to_include_in_a_disambiguation_page">Τι να προσθέσετε σε μια σελίδα αποσαφηνισμού</h3> + +<p>Όταν δημιουργείτε μια σελίδα αποσαφηνισμού, θα πρέπει να κάνετε τα ακόλουθα:</p> + +<h4 id="Short_introductory_line" name="Short_introductory_line">Σύντομος πρόλογος μιας γραμμής</h4> + +<p>Προσθέστε μια σειρά σύντομου προλόγου στην αρχή, όπως για παράδειγμα "το<strong> indexOf</strong> είναι μια μέθοδος για διάφορα JavaScript objects:", "το <strong>indexOf</strong> χρησιμοποιείται με διάφορους τρόπους:", ή, πιο απλά, "το <strong>indexOf</strong> μπορεί να σημαίνει πολλά πράγματα:".</p> + +<h4 id="The_.22disambig.22_template" name="The_.22disambig.22_template">Το "disambig" template</h4> + +<p>Προσθέστε την <a href="/Project:en/Custom_Templates#Template:disambig" title="Project:en/Custom_Templates#Template:disambig">disambig template</a> στο τέλος της σελίδας. Αυτό εισάγει μια standard σημείωση καθώς και την κατηγορία αποσαφηνισμού.</p> + +<h4 id="Linked_list_of_ambiguous_page_titles" name="Linked_list_of_ambiguous_page_titles">Συνδεδεμένη λίστα τίτλων μια ασαφούς σελίδας</h4> + +<p>Απλώς προσθέστε μια linked list από τους τίτλους μιας ασαφούς σελίδας, με μια σύντομη περιγραφή για το καθένα. Θα αναφερόμαστε στην σελίδα <a href="/en/indexOf" title="en/indexOf">indexOf</a> για περισσ.</p> + +<p>Σε περίπτωση που το παραπάνω δεν είναι εύκολα χρήσιμο, μπορείτε να αναδιατάξετε τις πληροφορίες σε νέα λογικά τμήματα στην σελίδα.</p> + +<h3 id="Best_Practices" name="Best_Practices">Καλύτερες πρακτικές</h3> + +<ol> + <li>Οι σελίδες αποσαφηνισμού θα να δείχνουν μόνο σε σελίδες που υπάρχουν μέσα στο wiki.</li> + <li>Μην βάζετε συνδέσμους σε άλλες σελίδες στην σύνοψη των σελίδων αποσαφηνισμού. Για παράδειγμα, μην κάνετε αυτό: "<em><a href="/en/indexOf" title="en/indexOf">indexOf</a> - <a href="/en/DOM/form.method" title="en/DOM/form.method">method</a> for the <a href="/en/String" title="en/String">String</a> object in <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a></em>". Απλά αφήστε το ως "<em><a href="/en/indexOf" title="en/indexOf">indexOf</a> - method for the String object in JavaScript</em>". Τα επιπρόσθετα links δεν βοηθάνε σε κάτι σε μια σελίδα αποσαφηνισμού.</li> + <li>Μικρύνετε τον τίτλο του συνδέσμου, αν είναι απαραίτητο, για τον όρο που πρόκειται να αποσαφηνιστεί. Αντί να δείχνετε στο <a href="/en/JavaScript/Reference/Global_Objects/String/indexOf" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String/indexOf">Core JavaScript 1.5 Reference:Objects:String:indexOf</a>, χρησιμοποιείστε εναλλακτικά την πιο σύντομη μορφή <a href="/en/JavaScript/Reference/Global_Objects/String/indexOf" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String/indexOf">indexOf</a>.</li> + <li>Οι σελίδες αποσαφηνισμού δεν προσφέρονται για τακτικές "free association". <strong>Χρησιμοποιείστε τες προσεκτικά και μόνο όταν χρειάζεται.</strong></li> +</ol> + +<h3 id="Fixing_links_to_disambiguated_topics" name="Fixing_links_to_disambiguated_topics">Διορθώνοντας συνδέσμους σε θέματα αποσαφηνισμού</h3> + +<p>Αφού έχετε δημιουργήσει μια disambiguation page, κάντε κλικ στον σύνδεσμο "What links here" για να δείτε αν οποιαδήποτε σελίδα οδηγεί στην νέα disambiguation page. Σ'αυτήν την περίπτωση, παρακαλούμε πηγαίνετε σε αυτές τις σελίδες και αλλάξτε τα links όπου είναι δυνατό, ώστε να δείχνουν στην σωστή σελίδα μέσα στο wiki.</p> + +<p>Για παράδειγμα, αν μια σελίδα που αναφέρεται στην μέθοδο JavaScript String object's <code>indexOf</code>, συνδέεται με την <a href="/en/indexOf" title="en/indexOf">indexOf</a> σελίδα disambiguation, αυτό το link θα πρέπει να αλλάξει έτσι ώστε να δείχνει κατευθείαν στην σελίδα <a href="/en/JavaScript/Reference/Global_Objects/String/indexOf" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String/indexOf">Core JavaScript 1.5 Reference:Objects:String:indexOf</a>.</p> + +<p>Εάν δημιουργείτε μια σελίδα αποσαφηνισμού που θα περιλαμβάνει links που οδηγούν σε μια υπάρχουσα σελίδα, κάντε κλικ στο "What links here" για να βρείτε όλες τις σελίδες που συνδέονται με την σελίδα που πρόκειται να μετακινήσετε. Σιγουρευτείτε ότι εκείνες οι σελίδες δεν θα υποστούν αλλαγές πριν κάνετε την μεταφορά.</p> + +<p><strong>Ο κώδικας τιμής για την δημιουργία σελίδων αποσαφηνισμού είναι να διορθωθούν όλα τα links που συνδέονται με αυτή.</strong></p> + +<h3 id="If_you_need_help_or_have_questions" name="If_you_need_help_or_have_questions">Εάν χρειάζεστε βοήθεια ή έχετε ερωτήσεις</h3> + +<p>Εάν δεν γνωρίζετε πώς να ονομάσετε ή να αποσαφηνίσετε μια σελίδα, παρακαλούμε επικοινωνήστε με email στον <a class="link-mailto" href="mailto:eshepherd@mozilla.com" title="mailto:eshepherd@mozilla.com">Eric Shepherd</a> ή στείλτε το στην <a class="external" href="http://mail.mozilla.org/listinfo/devmo-general">devmo-general mailing list</a>.</p> + +<p>Εναλλακτικά, μπείτε στο IRC στον server <code>irc.mozilla.org</code> και ρωτήστε κάποιον στο κανάλι <code><a class="link-irc" href="irc://irc.mozilla.org/#devmo">#devmo</a></code>.</p> + +<h3 id="For_more_information" name="For_more_information">Για περισσότερες πληροφορίες</h3> + +<p>Η σελίδα <a class="external" href="http://en.wikipedia.org/wiki/Disambiguation">Wikipedia Disambiguation page</a> περιέχει συνοπτικά τις πολιτικές και τους τρόπους προσέγγισης. Σημειώστε ότι οι πολιτικές μας δεν συμφωνούν απόλυτα.</p> diff --git a/files/el/mdn_at_ten/index.html b/files/el/mdn_at_ten/index.html new file mode 100644 index 0000000000..37882489ed --- /dev/null +++ b/files/el/mdn_at_ten/index.html @@ -0,0 +1,37 @@ +--- +title: MDN at 10 +slug: MDN_at_ten +translation_of: MDN_at_ten +--- +<p class="summary">Celebrate 10 years of documenting your Web.</p> + +<div class="column-container"> +<div class="column-8"> +<h2 id="The_history_of_MDN">The history of MDN</h2> + +<p>In early 2005, a small team of idealists set out to create a new, free, community-built online resource for all Web developers. Their brilliant but offbeat idea grew into today’s Mozilla Developer Network—the premier resource for all open Web technologies. Ten years later, our global community is bigger than ever, and together we’re still creating documentation, sample code and learning resources for all open Web technologies, including CSS, HTML, JavaScript and everything else that makes the open Web as powerful as it is.</p> + +<p><a class="learnmore" href="/en-US/docs/MDN_at_ten/History_of_MDN">Learn more <span class="offscreen">about the history</span></a></p> + + +<h2 id="Contributing_to_MDN">Contributing to MDN</h2> + +<p>For ten years, the MDN community has been documenting the open Web. From fixing simple typos to writing entire suites of an entirely new API, everyone has something to offer and no contribution is too large or too small. We have over 90,000 pages of content that have been written or translated by members of our outstanding community of Mozillians. You can become one of them.</p> + +<p><a class="learnmore" href="/en-US/docs/MDN_at_ten/Contributing_to_MDN">Learn more <span class="offscreen">about contributing</span></a></p> + +<p> </p> + +<p> </p> +</div> + +<div class="column-4">{{TenthCampaignQuote}}</div> + +<h2 id="Subnav">Subnav</h2> + +<ol> + <li><a href="/en-US/docs/MDN_at_ten/">MDN at 10</a></li> + <li><a href="/en-US/docs/MDN_at_ten/History_of_MDN">The history of MDN</a></li> + <li><a href="/en-US/docs/MDN_at_ten/Contributing_to_MDN">Contributing to MDN</a></li> +</ol> +</div> diff --git a/files/el/mozilla/connect/index.html b/files/el/mozilla/connect/index.html new file mode 100644 index 0000000000..cc02cc1ede --- /dev/null +++ b/files/el/mozilla/connect/index.html @@ -0,0 +1,124 @@ +--- +title: Connect with Mozilla +slug: Mozilla/Connect +translation_of: Mozilla/Connect +--- +<div class="summary"> +<p><span class="seoSummary">Enable, inspire and collaborate to make the Web the primary platform used to create experiences across all connected devices.</span></p> +</div> + +<div> +<div class="column-container dev-program-callouts dev-program-block dev-program-first dev-program-column-wrapper"> +<div class="dev-program-callout"> +<div class="callout-link-container"> +<h2 id="Hacks_blog">Hacks blog</h2> + +<p>A key resource for people developing for the Open Web, the Mozilla Hacks blog offers news and discussion of the latest in Web technologies and browser features.</p> + +<div class="callout-link-wrapper"><a class="callout-link ignore-external" href="https://hacks.mozilla.org/" style="white-space: normal;">Read it now </a></div> +</div> +</div> + +<div class="dev-program-callout"> +<div class="callout-link-container"> +<h2 id="Feedback_channels">Feedback channels</h2> + +<p>Do you have a <a href="http://mzl.la/devtools">great idea for the Developer Tools</a>? Let us know and help shape the future features!</p> + +<p>Building things and need help? Ask away on Stack Overflow!<br> + <span class="smaller"><strong>{{anch("Developer discussions", "Search the Q&A below")}}</strong></span></p> + +<div class="callout-link-wrapper"><a class="callout-link ignore-external" href="http://stackoverflow.com/r/mozilla" style="white-space: normal;">Mozilla Q&A on Stack Overflow </a></div> +</div> +</div> + +<div class="dev-program-callout"> +<div class="callout-link-container"> +<h2 id="Join_MDN">Join MDN</h2> + +<p>Sign up for MDN! You will able to <a href="/en-US/docs/MDN/Contribute">edit the documentation</a> here, create a profile to show off your work, and get access to features over time as we roll them out.</p> + +<div class="callout-link-wrapper"><a class="callout-link" href="/profile/edit" style="white-space: normal;">Join or login </a></div> +</div> +</div> +</div> + +<div class="dev-program-explanation dev-program-block"> +<h2 id="Connect_with_Mozilla">Connect with Mozilla</h2> + +<p>Developers are creating the future by building services and apps for people all over the world. The goal of Mozilla Developer Relations is to help developers to use open and standardized web technologies to succeed in achieving their goals. In addition to the documentation here on MDN, we offer help and other resources towards this goal, through various channels. We invite you to connect, learn, and share your knowledge.</p> + +<p>We are offering help through <a href="http://stackoverflow.com/r/mozilla">Q&A on Stack Overflow</a>, to solve specific technical issues and challenges you might have. We also have a newsletter keeping you informed about the latest happenings in the web scene around web apps and more. <a href="https://marketplace.firefox.com/developers/#newsletter-signup">Subscribe to the Apps & Hacks newsletter.</a></p> + +<p>If you share Mozilla's <a href="https://www.mozilla.org/en-US/mission/">mission</a> and <a href="https://www.mozilla.org/en-US/about/manifesto/">principles</a> and want to help spread them to more developers, check out the ways you can <a href="https://wiki.mozilla.org/Engagement/Developer_Engagement/Technical_Evangelism/Get_Involved">get involved with technical evangelism</a>, and join our <a href="https://lists.mozilla.org/listinfo/evangelism">evangelism discussion group</a>.</p> + +<p>We have a lot of plans and ideas for iteratively expanding our Developer Relations offerings, and we want you involved as we do so! So, <a href="http://stackoverflow.com/r/mozilla">follow the tags on Stack Overflow</a>, <a href="https://hacks.mozilla.org/">subscribe to the Hacks blog</a>, <a href="https://marketplace.firefox.com/developers/#newsletter-signup">subscribe to the newsletter, </a>and <a href="/profile/edit">sign up for an account</a>!</p> + +<h2 id="Join_Mozilla" style="line-height: 30px;"><strong>Join Mozilla</strong></h2> + +<p>If you want to go beyond <em>connecting</em> with Mozilla, you can <em>join</em> Mozilla and help realize <a href="https://www.mozilla.org/mission/">Mozilla's mission of building a better Internet</a>. As a developer, you have skills to contribute in many areas, as well as the opportunity to enhance your skills. Mozilla is an open source project, so we "default to open." You can "view source" and contribute to our software development projects, like the Firefox browser for desktop and Android, Firefox OS, and Mozilla's websites. You can become part of an international community and get recognition for your efforts. Here are some of the advantages of contributing to the Mozilla project.</p> + +<h3 id="Opportunity_to_learn_something_new"><strong>Opportunity to learn something new </strong></h3> + +<div> +<p>In writing code for an open source project, you may face problems you have not encountered before, which present learning opportunities for you. You can try out new tools and techniques in an open source project. If for example, if you have never done unit testing, and cannot get permission to do so at work then coding for an open source project would be an excellent place to learn more about it. Contributing to open source gives you the opportunity to collaborate with and get to know many people around the world who have similar interests. Moreover, an open source organization like Mozilla has many contributors who can help you in solving problems you encounter. If you're just getting started contributing, you can look for "mentored" bugs, where an experienced contributor has offered to help a newcomer fix them.</p> + +<h3 id="What_can_I_get_by_contributing"><strong>What can I get by contributing? </strong></h3> + +<p>Exploring many things and gain recognition in the community -- these are the intangible benefits of contributing to Mozilla. While we can't guarantee specific tangible benefits, many valued contributors receive free Mozilla gear and invitations to Mozilla-related events, and are first in line to be considered for internships. Moreover, your experience in contributing to an open source project might help you find a job. More and more employers of developers are looking at open source contributions. They like to see that you're blogging and contributing to mailing lists, and they like to see you listed as a contributor to an open source project. It may also help with the work experience section of your CV/resumé.</p> + +<h3 id="How_you_can_contribute_to_Mozilla"><strong>How you can contribute to Mozilla</strong></h3> + +<p>There are many project area for which you can contribute to Mozilla. You can find a current, complete list on the main Mozilla <a href="https://www.mozilla.org/contribute">Get Involved</a> page. Some areas that may interest you as a developer include:</p> + +<ul> + <li><a href="http://www.whatcanidoformozilla.org/">Coding</a></li> + <li><a href="http://www.whatcanidoformozilla.org/">Web development</a></li> + <li><a href="/en-US/Firefox_OS/Developing_Gaia">Firefox OS</a></li> + <li><a href="https://quality.mozilla.org/teams/">QA</a></li> + <li><a href="https://wiki.mozilla.org/Marketplace/Contributing/Addons">Add-ons</a></li> + <li><a href="https://wiki.mozilla.org/Marketplace/Contributing/Apps">Apps</a></li> + <li><a href="/en-US/docs/MDN/Getting_started">Developer documentation (here on MDN)</a></li> +</ul> +</div> +</div> + +<div class="column-container dev-program-block"> +<div class="column-half" id="Developer_discussions"> +<h2 id="QA_on_Stack_Overflow_See_all_QA">Q&A on Stack Overflow <a class="heading-link" href="http://stackoverflow.com/r/mozilla">See all Q&A</a></h2> + +<p>We have Q&A to discuss challenges and issues when developing, in particular for Firefox OS and the Open Web on mobile. It's available on Stack Overflow under the easy URL <a href="http://stackoverflow.com/r/mozilla">http://stackoverflow.com/r/mozilla</a>.</p> + +<div class="stack-form">Stack form</div> + +<h3 id="Latest_QA_Topics">Latest Q&A Topics</h3> +</div> + +<div class="column-half dev-program-hacks dev-program-block"> </div> +</div> + +<p class="dev-program-block"><img alt="Developers at a Firefox OS workshop in Madrid." src="https://mdn.mozillademos.org/files/7479/PhonesUp.jpg" style="display: block; height: 359px; margin: 0px auto; max-width: 100%; width: 720px;"></p> + +<div class="column-container dev-program-block"> +<div class="column-7 dev-program-events"> +<h2 id="Where_is_Mozilla_View_attendees_and_details_on_our_Events_page...">Where is Mozilla? <a class="heading-link" href="https://developer.mozilla.org/en/events">View attendees and details on our Events page... </a></h2> + +<p>Here is a listing of events where Mozilla representatives will be speaking. Make sure to talk to them!</p> +</div> + +<div class="column-5"> +<h2 id="Other_resources">Other resources</h2> + +<ul class="no-bullets"> + <li><a href="http://www.youtube.com/user/mozhacks">Mozilla Hacks on YouTube</a> + + <ul> + <li><a href="http://www.youtube.com/playlist?list=PLo3w8EB99pqIHIUUv08hBCHq1OgPKhdo0">Firefox OS videos</a></li> + <li><a href="http://www.youtube.com/playlist?list=PLo3w8EB99pqLZNY22xKbTEzMfYo9PXAlm">Firefox Developer Tools videos</a></li> + </ul> + </li> + <li><a href="https://twitter.com/mozhacks">@mozhacks on Twitter</a></li> +</ul> +</div> +</div> +</div> diff --git a/files/el/mozilla/developer_guide/index.html b/files/el/mozilla/developer_guide/index.html new file mode 100644 index 0000000000..a651609a43 --- /dev/null +++ b/files/el/mozilla/developer_guide/index.html @@ -0,0 +1,107 @@ +--- +title: Developer guide +slug: Mozilla/Developer_guide +tags: + - Developing Mozilla + - Landing + - Mozilla + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Developer_guide +--- +<p><span class="seoSummary">There are lots of ways to contribute to the Mozilla project: coding, testing, improving the build process and tools, or contributing to the documentation. This guide provides information that will not only help you get started as a Mozilla contributor, but that you'll find useful to refer to even if you are already an experienced contributor.</span></p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Documentation_topics">Documentation topics</h2> + +<dl> + <dt><a href="/en-US/docs/Introduction" title="Introduction">Getting Started</a></dt> + <dd>A step-by-step beginner's guide to getting involved with Mozilla.</dd> + <dt><a href="/en-US/docs/Mozilla/Developer_guide/Articles_for_new_developers">For new Mozilla developers</a></dt> + <dd>A directory of articles which are particularly helpful for new Mozilla developers.</dd> +</dl> + +<dl> + <dt><a class="internal" href="/en-US/docs/Developer_Guide/Source_Code" title="en-US/docs/Developer_Guide/Source_Code">Working with Mozilla Source Code</a></dt> + <dd>A code overview, how to get the code, and the coding style guide.</dd> + <dt><a class="internal" href="/en-US/docs/Developer_Guide/Build_Instructions" title="en-US/docs/Developer_Guide/Build_Instructions">Build Instructions</a></dt> + <dd>How to build Firefox, Thunderbird, SeaMonkey, or other Mozilla applications.</dd> + <dt><a class="internal" href="/en-US/docs/Developer_Guide/Editor_Configuration" title="en-US/docs/Developer_Guide/Editor_Configuration">Editor Configuration</a></dt> + <dd>Tips on setting up your favorite IDE or text editor to work with Mozilla projects.</dd> + <dt><a href="/en-US/docs/Developer_Guide/Development_process_overview" title="en-US/docs/Developer Guide/Development process overview">Development process overview</a></dt> + <dd>An overview of the entire Mozilla development process.</dd> + <dt><a href="/en-US/docs/Mozilla/Multiple_Firefox_Profiles" title="en-US/docs/Mozilla/Multiple_Firefox_Profiles">Managing multiple profiles</a></dt> + <dd>When working with prerelease versions of Firefox, it's often helpful to have multiple Firefox profiles, such as one for each channel, or for different kinds of testing.</dd> + <dt><a class="internal" href="/en-US/docs/Mozilla_automated_testing" title="en-US/docs/Mozilla automated testing">Automated Testing</a></dt> + <dd>How to run Mozilla's automated tests, and how to write new tests.</dd> + <dt><a class="internal" href="/en-US/docs/Developer_Guide/How_to_Submit_a_Patch" title="en-US/docs/Getting your patch in the tree">How to submit a patch</a></dt> + <dd>After getting your patch written, you need to get it checked into the tree. This article explains the review process and how to get your patch approved.</dd> + <dt><a href="/en-US/docs/Developer_Guide/Getting_documentation_updated" title="en-US/docs/Developer_Guide/Getting documentation updated">Getting documentation updated</a></dt> + <dd>How to ensure that documentation is kept up to date as you develop.</dd> + <dt><a class="internal" href="/en-US/docs/Mozilla_Modules_and_Module_Ownership" title="en-US/docs/Mozilla Modules and Module Ownership">Mozilla modules and module ownership</a></dt> + <dd>This article provides information about Mozilla's modules, what the role of a module owner is, and how module owners are selected.</dd> + <dt><a class="internal" href="/en-US/docs/Code_snippets" title="en-US/docs/Code_snippets">Code snippets</a></dt> + <dd>Useful code samples for a wide variety of things you might need to figure out how to do.</dd> + <dt><a class="internal" href="/en-US/docs/Mozilla_Development_Strategies" title="en-US/docs/Mozilla Development Strategies">Mozilla development strategies</a></dt> + <dd>Tips for how to make the most of your time working on the Mozilla project.</dd> + <dt><a class="internal" href="/en-US/docs/Debugging" title="en-US/docs/Debugging">Debugging</a></dt> + <dd>Find helpful tips and guides for debugging Mozilla code.</dd> + <dt><a href="/en-US/docs/Performance" title="en-US/docs/Performance">Performance</a></dt> + <dd>Performance guides and utilities to help you make your code perform well (and to play nicely with others).</dd> + <dt><a class="internal" href="/en-US/docs/The_Mozilla_platform" title="en-US/docs/The Mozilla platform">The Mozilla platform</a></dt> + <dd>Information about the workings of the Mozilla platform.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla">Mozilla</a></dt> + <dd>Much more additional information about Mozilla coding practices.</dd> + <dt><a href="/en-US/docs/Developer_Guide/Adding_APIs_to_the_navigator_object" title="en-US/docs/Developer_Guide/Adding_APIs_to_the_navigator_object">Adding APIs to the navigator object</a> {{ gecko_minversion_inline("9.0") }}</dt> + <dd>How to augment the {{ domxref("window.navigator") }} object with additional APIs.</dd> + <dt><a href="/en-US/docs/Developer_Guide/Interface_Compatibility" title="en-US/docs/Developer Guide/Interface Compatibility">Interface Compatibility</a></dt> + <dd>Guidelines for modifying scriptable and binary APIs in Mozilla.</dd> + <dt><a href="/en-US/docs/Developer_Guide/Customizing_Firefox" title="en-US/docs/Developer Guide/Customizing Firefox">Customizing Firefox</a></dt> + <dd>Information about creating customized versions of Firefox.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Task_graph" title="en-US/docs/Developer Guide/Customizing Firefox">Task-Graph Generation</a></dt> + <dd>What controls the jobs that run on a push to version control? How can you change that?</dd> + <dt><a href="/en-US/docs/Developer_Guide/Virtual_ARM_Linux_environment" title="Virtual ARM Linux environment">Virtual ARM Linux environment</a></dt> + <dd>How to set up an ARM emulator running Linux for testing ARM-specific, but not necessarily platform-specific, code. Useful for mobile developers.</dd> + <dt><a href="/en-US/docs/Introduction/Obsolete_Build_Caveats_and_Tips" title="Obsolete Build Caveats and Tips">Obsolete Build Caveats and Tips</a></dt> + <dd>A place to put build tips which are no longer relevant to building the latest version of the code from main but are relevant when building old codebases.</dd> + <dt><a href="https://firefox-source-docs.mozilla.org/">Firefox Source Docs</a></dt> + <dd>Web-hosted documentation built from the mozilla-central source code.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Tools" id="Tools">Tools</h2> + +<dl> + <dt><a class="link-https" href="https://bugzilla.mozilla.org/" title="https://bugzilla.mozilla.org/">Bugzilla</a></dt> + <dd>The <a class="internal" href="/en-US/docs/Bugzilla" title="en-US/docs/Bugzilla">Bugzilla</a> database used to track issues for Mozilla projects.</dd> + <dt><a href="https://dxr.mozilla.org/">DXR</a></dt> + <dd>Next generation of searching Mozilla's source code. In active development.</dd> + <dt><a href="https://www.searchfox.org/">SearchFox</a></dt> + <dd>Another option for Mozilla code searching. Indexes JS as well as C++, includes blame capabilities. In active development.</dd> + <dt><a class="internal" href="/en-US/docs/Mercurial" title="en-US/docs/Mercurial">Mercurial</a></dt> + <dd>The distributed version-control system used to manage Mozilla's source code.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Using_the_VM">Mozilla build VM</a></dt> + <dd>A VirtualBox compatible virtual machine configured with all the software needed to build and work on Firefox.</dd> + <dt><a class="external" href="https://docs.taskcluster.net">TaskCluster</a></dt> + <dd>TaskCluster is the task execution framework that supports Mozilla's continuous integration and release processes.</dd> + <dt><a class="external" href="https://treeherder.mozilla.org/">Treeherder</a></dt> + <dd>Treeherder shows the status of the tree (whether or not it currently builds successfully). Check this before checking in and out, to be sure you're working with a working tree.</dd> + <dt><a href="https://treeherder.mozilla.org/perf.html">Perfherder</a></dt> + <dd>Perfherder is used to aggregate the results of automated performance tests against the tree.</dd> + <dt><a class="internal" href="/en-US/docs/Crash_reporting" title="en-US/docs/Crash reporting">Crash tracking</a></dt> + <dd>Information about the <a class="link-https" href="https://crash-reports.mozilla.com/reports">Socorro</a> crash reporting system.</dd> + <dt><a href="/en-US/docs/Developer_Guide/Callgraph" title="en-US/docs/Developing Mozilla/Callgraph">Callgraph</a></dt> + <dd>A tool to help perform static analysis of the Mozilla code by generating callgraphs automatically.</dd> + <dt><a class="external" href="https://www.mozilla.org/en-US/about/forums/">Developer forums</a></dt> + <dd>A topic-specific list of discussion forums and mailing lists where you can talk about Mozilla development issues.</dd> + <dt><a class="external" href="https://web.archive.org/web/20160813112326/http://www.codefirefox.com:80/cheatsheet">Mozilla Platform Development Cheat Sheet</a> (archive.org)</dt> + <dd>Brian Bondy's list of frequently referenced information for platform developers. Brian Bondy <a href="https://brianbondy.com/blog/173/shutting-down-code-firefox">took down</a> codefirefox.com, but the archived cheatsheet might still be useful.</dd> + <dt><a class="external" href="http://www.codefirefox.com/videos/">Firefox development video tutorials</a></dt> + <dd>Brian Bondy's video tutorials on Firefox development.</dd> +</dl> +</div> +</div> + +<p> </p> diff --git a/files/el/mozilla/index.html b/files/el/mozilla/index.html new file mode 100644 index 0000000000..5f5afa2bd2 --- /dev/null +++ b/files/el/mozilla/index.html @@ -0,0 +1,11 @@ +--- +title: Mozilla +slug: Mozilla +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla +--- +<p>Αυτό θα είναι σύντομα ένα φοβερό σελίδα προορισμού για το Mozilla εσωτερικά. Προς το παρόν, δεν είναι.</p> + +<div>{{LandingPageListSubpages}}</div> diff --git a/files/el/mozilla/marketplace/index.html b/files/el/mozilla/marketplace/index.html new file mode 100644 index 0000000000..db868b42a8 --- /dev/null +++ b/files/el/mozilla/marketplace/index.html @@ -0,0 +1,159 @@ +--- +title: Firefox Marketplace +slug: Mozilla/Marketplace +tags: + - Apps + - B2G + - Firefox OS + - Marketplace + - Mobile + - NeedsTranslation + - TopicStub +translation_of: Archive/Mozilla/Marketplace +--- +<p class="summary">The Firefox Marketplace is an open and non-proprietary online marketplace for web apps. <span class="seoSummary">In this zone you'll find all the information you need to prepare and publish apps on the Firefox Marketplace. Find guidance on how to make apps successful, delivery options, publishing and updating apps, and the libraries and APIs to make use of Marketplace features.</span></p> + +<p>Mozilla is bringing its core values — openness, freedom, user choice — to the world of app publishing.</p> + +<p>Using standard Web technologies, languages, and tools, the <a href="https://marketplace.firefox.com/">Firefox Marketplace</a> enables you to publish <a href="/en-US/Apps">Open Web Apps</a>. These apps can be packaged, running within Firefox OS, or hosted on your own web server. Published apps are available to users of Firefox OS phones wherever they are in the world. Users discover your apps easily in Firefox Marketplace using the featured apps section, app categories, and powerful search. Users are then able to install free apps instantly, or buy paid apps with the growing support for credit card payments and operator billing.</p> + +<div class="topicpage-table"> +<div class="section"> +<h2 id="Preparing_for_success"><a href="/en-US/Marketplace/Prepare">Preparing for success</a></h2> + +<p>Whether you're creating apps for pleasure or profit, you'll want people to discover, use, and enjoy them. This section explains how to spread the word and build communities of satisfied users.</p> + +<h2 id="Publication_options"><a href="/en-US/Marketplace/Options">Publication options</a></h2> + +<p>Packaged or Hosted, that is the question. Find out about delivering your app content and the options for making your apps available on Android devices and desktops, in addition to Firefox OS.</p> + +<h2 id="Publishing_apps"><a href="/en-US/Marketplace/Publishing/Introduction">Publishing apps</a></h2> + +<p>Unleash your apps on the waiting world. Find out how to get your apps on Firefox Marketplace, including the processes for submitting your apps, the review process, updating your apps, monitoring their performance, and reviewing user feedback.</p> +</div> + +<div class="section"> +<h2 id="Tools_for_app_development">Tools for app development</h2> + +<dl> + <dt><a href="/en-US/Marketplace/APIs">Firefox Marketplace Libraries and APIs</a></dt> + <dd>Get an overview and find links to the libraries and APIs available to add features to your Marketplace apps.</dd> + <dt><a href="/en-US/Apps/Tools_and_frameworks/App_developer_tools">App developer tools</a></dt> + <dd>Find a complete list of the tools you can use to make Open Web App development efficient and fun.</dd> + <dt><a href="/en-US/docs/Tools/WebIDE">WebIDE</a></dt> + <dd>Your primary tool to test, deploy, and debug <a href="https://developer.mozilla.org/en-US/Firefox_OS">Firefox OS</a> apps using the <a href="https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> or a real Firefox OS device.</dd> +</dl> +</div> +</div> + +<div class="blockIndicator communitybox" dir="ltr"> +<div class="column-container"> +<h2 id="Join_the_Marketplace_community">Join the Marketplace community</h2> + +<div class="column-half"> +<div class="communitysubhead">Choose your preferred method for joining the discussion:</div> + +<ul class="communitymailinglist"> + <li><a href="https://lists.mozilla.org/listinfo/dev-marketplace">Mailing list</a></li> + <li><a href="https://twitter.com/Boot2Gecko">Twitter</a></li> + <li><a href="http://stackoverflow.com/questions/tagged/firefox-os">Stack Overflow</a></li> + <li><a href="http://groups.google.com/group/mozilla.dev.marketplace">Newsgroup</a></li> + <li><a href="http://groups.google.com/group/mozilla.dev.marketplace/feeds">RSS feed</a></li> +</ul> +</div> + +<div class="column-half"> +<ul class="communitycontact"> + <li><strong>IRC: </strong><a href="irc://irc.mozilla.org/marketplace">#marketplace</a> <span class="smaller">(<a href="https://wiki.mozilla.org/IRC">learn more</a>)</span></li> + <li><strong>Contribute: </strong><a href="https://wiki.mozilla.org/Marketplace/Contributing/ThisMonth" title="Discover what you can do to contribute regularly to the Marketplace project">Marketplace this month</a></li> +</ul> +</div> +</div> +</div> + +<h2 id="Subnav">Subnav</h2> + +<section id="Quick_Links"> +<ol> + <li class="toggle"> + <details><summary><a href="/en-US/Marketplace/Prepare">Prepare for success</a></summary> + + <ol> + <li><a href="/en-US/Marketplace/Prepare/Introduction">Introduction</a></li> + <li><a href="/en-US/Marketplace/Prepare/Deciding_what_to_build">Deciding what to build</a></li> + <li><a href="/en-US/Marketplace/Prepare/Getting_to_know_your_users">Getting to know your users</a></li> + <li><a href="/en-US/Marketplace/Prepare/Choosing_your_business_model">Choosing your business model</a></li> + <li><a href="/en-US/Marketplace/Prepare/Localizing_your_apps">Localizing your apps</a></li> + <li><a href="/en-US/Marketplace/Prepare/Promoting_your_app">Promoting your app</a></li> + <li><a href="/en-US/Marketplace/Prepare/Creating_your_community">Creating your community</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details><summary><a href="/en-US/Marketplace/Options">Your publication options</a></summary> + <ol> + <li><a href="/en-US/Marketplace/Options/Introduction">Introduction</a></li> + <li><a href="/en-US/Marketplace/Options/Packaged_apps">Packaged apps</a></li> + <li><a href="/en-US/Marketplace/Options/Hosted_apps">Hosted apps</a></li> + <li><a href="/en-US/Marketplace/Options/Packaged_or_hosted">Packaged or hosted?</a></li> + <li><a href="/en-US/Marketplace/Options/Mobile_optimized_websites">Mobile-optimized websites</a></li> + <li><a href="/en-US/Marketplace/Options/Self_publishing">Publish apps yourself</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details><summary><a href="/en-US/Marketplace/Publishing">App publishing overview</a></summary> + <ol> + <li><a href="/en-US/Marketplace/Publishing/Introduction">Introduction</a></li> + <li><a href="/en-US/Marketplace/Publishing/Submission_checklist">Submission checklist</a></li> + <li><a href="/en-US/Marketplace/Publishing/Marketplace_review_criteria" title="An explanation of the criteria an app must meet in order to be published on the Firefox Marketplace">Marketplace review criteria</a></li> + <li><a href="/en-US/Marketplace/Publishing/Marketplace_showcase_criteria">Marketplace showcase criteria</a></li> + <li><a href="/en-US/Marketplace/Publishing/Adding_a_subdomain" title="For security reasons, each app must have its own domain (or subdomain) on the Web. This article covers how to go about creating a subdomain for your app.">Adding a subdomain for an app</a></li> + <li><a href="/en-US/Marketplace/Publishing/Policies_and_Guidelines">Policies and Guidelines</a> + <ol> + <li><a href="/en-US/Marketplace/Publishing/Policies_and_Guidelines/Introduction">Introduction</a></li> + <li><a href="/en-US/Marketplace/Publishing/Policies_and_Guidelines/Marketplace_screenshot_criteria" title="Some guidelines on how to create an effective screenshot for marketplace submission">Marketplace screenshot criteria</a></li> + <li><a href="/en-US/Marketplace/Publishing/Policies_and_Guidelines/Privacy_policies" title="Your users' privacy is very important, so you need to develop and adhere to a reasonable privacy policy to engender their trust. This article provides a guide to developing privacy policies.">Privacy policy</a></li> + <li><a href="/en-US/Marketplace/Publishing/Policies_and_Guidelines/Testing_and_troubleshooting">App testing and troubleshooting</a></li> + </ol> + </li> + </ol> + </details> + </li> + <li class="toggle"> + <details><summary><a href="/en-US/Marketplace/Publishing/Submit">Submit your app</a></summary> + <ol> + <li><a href="/en-US/Marketplace/Publishing/Submit/Overview">Overview</a></li> + <li><a href="/en-US/Marketplace/Publishing/Submit/Sign-in_to_your_developer_account" title="This step-by-step guide will help you successfully submit your app to the Firefox Marketplace.">Step 1: Sign-in</a></li> + <li><a href="/en-US/Marketplace/Publishing/Submit/Load_your_app">Step 2: Load app</a></li> + <li><a href="/en-US/Marketplace/Publishing/Submit/Enter_your_apps_details">Step 3: Listing details</a></li> + <li><a href="/en-US/Marketplace/Publishing/Submit/Next_steps">Step 4: Next steps</a></li> + <li><a href="/en-US/Marketplace/Publishing/Submit/Rating_Your_Content">Step 5: App rating</a></li> + <li><a href="/en-US/Marketplace/Publishing/Submit/Define_your_team">Step 6: Define team members</a></li> + <li><a href="/en-US/Marketplace/Publishing/Submit/View_your_listing">Step 7: View listing</a></li> + <li><a href="/en-US/Marketplace/Publishing/Submit/Edit_other_localizations">Step 8: Edit other localizations</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details><summary><a href="/en-US/Marketplace/Publishing/Managing_your_apps">Managing and updating published apps</a></summary> + <ol> + <li><a href="/en-US/Marketplace/Publishing/Managing_your_apps/Introduction_Managing_your_apps">Introduction</a></li> + <li><a href="/en-US/Marketplace/Publishing/Managing_your_apps/Status___Versions">Your app's status</a></li> + <li><a href="/en-US/Marketplace/Publishing/Updating_apps" title="Information about how both hosted and packaged app updates are handled, and what you need to do to ensure that your app properly supports updating.">Updating apps</a></li> + <li><a href="/en-US/Marketplace/Publishing/Managing_your_apps/App_Statistics">App Stats</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details><summary><a href="/en-US/docs/Mozilla/Marketplace/Add-on_submission">Add-on submission</a></summary> + <ol> + <li><a href="/en-US/docs/Mozilla/Marketplace/Add-on_submission">Add-on submission overview</a></li> + <li><a href="/en-US/docs/Mozilla/Marketplace/Add-on_submission/Review_criteria">Add-on review criteria</a></li> + </ol> + </details> + </li> + <li><a href="/en-US/Marketplace/APIs">Libraries and APIs</a></li> + <li><a href="/en-US/Marketplace/FAQ">Firefox Marketplace FAQ</a></li> +</ol> +</section> diff --git a/files/el/mozilla/marketplace/publishing/index.html b/files/el/mozilla/marketplace/publishing/index.html new file mode 100644 index 0000000000..e2b172a388 --- /dev/null +++ b/files/el/mozilla/marketplace/publishing/index.html @@ -0,0 +1,9 @@ +--- +title: Publishing +slug: Mozilla/Marketplace/Publishing +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Mozilla/Marketplace/Publishing/Introduction +--- +<p>Marketplace publishing</p> diff --git a/files/el/mozilla/marketplace/publishing/επιλογές_δημοσίευσης/index.html b/files/el/mozilla/marketplace/publishing/επιλογές_δημοσίευσης/index.html new file mode 100644 index 0000000000..a246c819d1 --- /dev/null +++ b/files/el/mozilla/marketplace/publishing/επιλογές_δημοσίευσης/index.html @@ -0,0 +1,67 @@ +--- +title: Επιλογές δημοσίευσης εφαρμογών +slug: Mozilla/Marketplace/Publishing/Επιλογές_δημοσίευσης +translation_of: Archive/Mozilla/Marketplace/Options/Self_publishing +--- +<div class="summary"> + <p>Μόλις τελειώσετε την εφαρμογή σας, χρειάζεται να την αναπτύξετε και να την δημιεύσετε. Αυτό εμπλέκει και το να την κάνετε διαθέσιμη στους χρήστες για κατανάλωση (εάν πρόκειται απλώς να πλοηγηθούν σε αυτήν με έναν περιηγητή και να την χρησιμοποιήσουν σαν μια κανονική ιστοσελίδα, ή να την κατεβάσουν και να την εγκαταστήσουν σε μια συσκευή (όπως ένα κινητό με Firefox OS), ενημερώνοντας τους ανθρώπους ότι είναι διαθέσιμη και παρέχοντας υποστηρικτικές πληροφορίες όπως οδηγίες χρήσης και πόρους βοήθειας. Αυτό το άρθρο κοιτά σύντομα τις επιλογές που είναι διαθέσιμες σε εσάς.</p> +</div> +<h2 id="Δημοσιεύοντας_στο_Firefox_Marketplace">Δημοσιεύοντας στο Firefox Marketplace</h2> +<p>Το <a href="https://marketplace.firefox.com/" title="/en-US/docs/Web/Apps/Publishing/Submitting_an_app">Firefox Marketplace</a> είναι το δικό μας αφιερωμένο κατάστημα εφαρμογών για τη διανομή δωρεάν και πληρωμένων εφαρμογών. <a href="/en-US/docs/Web/Apps/Publishing/Submitting_an_app">Η υποβολή μιας εφαρμογής στο Firefox Marketplace</a> είναι μια απλή διαδικασία, που εμπλέκει τη μεταφόρτωση της ίδιας της εφαρμογής καθώς και σχετικές πληροφορίες και την αναμονή για αυτό να περάσει από την λεπτομερή διαδικασία κριτικής για να βεβαιωθούμε ότι είναι υψηλής ποιότητας και όχι κακόβουλο. Η υποβολή στο Firefox Marketplace επίσης παρέχει και άλλα πλεονεκτήματα όπως αυξημένη δημοτικότητα, καμία ανάγκη για την υλοποίηση ειδικών API στη δική σας ιστοσελίδα και την πιθανότητα δημοσίευσης πληρωμένων εφαρμογλων πιο εύκολα. Μπορείτε να υποβάλετε και φιλοξενούμενες (hosted) εφαρμογές και συσκευασμένες (packaged) εφαρμογές στο Firefox Marketplace.</p> +<h3 id="Φιλοξενούμενες_(hosted)_εφαρμογές">Φιλοξενούμενες (hosted) εφαρμογές</h3> +<p>Μια φιλοξενούμενη (hosted) εφαρμογές είναι βασικά μια εφαρμογή που φιλοξενείται σε ένα διακομιστή ιστού όπως ακριβώς μια ιστοσελίδα. Εάν θέλετε να αφήσετε τους ανθρώπους να εγκαταστήσουν μια φιλοξενούμενη εφαρμογή κατ' ευθείαν από την ιστοσελίδα, πρέπει να <a href="/en-US/Apps/Developing/JavaScript_API">υλοποιήσετε μερικούς κώδικες JavaScript</a> στην ιστοσελίδα σας για να διαχειριστείτε την εγκατάσταση και την ενημέρωση της εφαρμογής στους περιηγητές των χρηστών και να βεβαιωθείτε ότι ο κώδικας της εφαρμογής περιλαμβάνει ένα έγκυρο αρχείο manifest. Παρακαλούμε δείτε τα δημοδιευμένα <a href="/en-US/docs/Web/Apps/Introduction_to_open_web_apps#Manifest" title="/en-US/docs/Web/Apps/Introduction_to_open_web_apps#Manifest">αρχεία manifest </a>and τη <a href="/en-US/docs/Web/Apps/Introduction_to_open_web_apps#Install_API_functionality" title="/en-US/docs/Web/Apps/Introduction_to_open_web_apps#Install_API_functionality">Λειτουργία εγκατάστασης API</a> για το πόσο απλή είναι η υλοποίηση αυτών των βημάτων.</p> +<p>Το που θα "φιλοξενήσετε" την εφαρμογή εξαρτάται πραγματικά από εσάς, αλλά οι δύο επιλογές που έχουν καταγραφεί παρακάτω είναι πιθανόν οι πιο συνηθισμένες και εύκολες.</p> +<h4 id="GitHub">GitHub</h4> +<p>Εάν η εφαρμογή ιστού είναι καθαρά στατιστική (HTML/CSS/JavaScript, αλλά όχι επεξεργασία πλευράς διακομιστή), οι <a href="http://pages.github.com" rel="external">Σελίδες GitHub</a> είναι μια σταθερή επιλογή "φιλοξενίας". Θα παρέχει στο manifest σας το <a href="/en-US/Apps/Developing/Manifest#Serving_from_GitHub">σωστό τύπο MIME</a> αν του δώσετε μια προσθήκη <code>.webapp.</code></p> +<h4 id="Γενικές_λύσεις_φιλοξενίας">Γενικές λύσεις "φιλοξενίας"</h4> +<p>Για δυναμικές ιστοσελίδες, χρησιμοποιήστε μια γενική επιλογή "φιλοξενίας" (όπως μια υπηρεσία Ιστού της όποιας ίσως είστε ιδιοκτήτης ή στην οποία έχετε πρόσβαση) με τις σωστές ικανότητες ή ένα πάροχο φιλοξενίας ειδικά ραμμένο στις ανάγκες της εφαρμογής σας, όπως το <a href="http://www.heroku.com" rel="external">Heroku</a> ή η <a href="http://code.google.com/appengine" rel="external">Μηχανή Εφαρμογών Google</a>.</p> +<div class="note"> + <p><strong>Σημείωση</strong>: Οι εγκαταστάσιμες <span style="line-height: 1.5em;">ανοιχτές εφαρμογές ιστού έχουν μια πολιτική ασφαλείας "μια εφαρμογή ανά καταγωγή": βασικά, δεν μπορείτε να "φιλοξενήσετε" περισσότερες από μια εγκαταστάσιμη εφαρμογή ανά "καταγωγή". Αυτό κάνει τη δοκιμή λίγο πιο δύσκολη, αλλά υπάρχουν ακόμη μερικοί τρόποι για αυτό, όπως η δημιουργία διαφορετικών υποτομέων για εφαρμογές, η δοκιμή αυτών χρησιμοποιώντας τον Εξομοιωτή Firefox OS, ή δοκιμάζοντας την λειτουργία εγκατάστασης στο Firefox Aurora/Nightly, που επιτρέπει στις εγκατάστασιμες εφαρμογές ιστού να εγκατασταθούν στον υπολογιστή. Δείτε το </span><a href="/en-US/docs/Web/Apps/FAQs/About_app_manifests" style="line-height: 1.5em;">Συχνές ερωτήσεις σχετικά με τα manifest εφαρμογών</a> για περισσότερες πληροφορίες σχετικά με τις "καταγωγές"<span style="line-height: 1.5em;">.</span></p> +</div> +<h3 id="Συσκευασμένες_(packaged)_εφαρμογές">Συσκευασμένες (packaged) εφαρμογές</h3> +<p>Μια συσκευασμένη (packaged) εφαρμογή είναι μια Ανοιχτή Εφαρμογή Ιστού που έχει όλους τους πόρους της (HTML, CSS, JavaScript, manifest εφαρμογής, κ.ο.κ) συμπεριλαμβανομένους σε ένα αρχείο zip, αντί να έχει τους πόρους της σε ένα διακομιστή Ιστού. Μια συσκευασμένη εφαρμογή είναι απλά ένα αρχείο zip με το<a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Manifest"> manifest εφαρμογής</a> στη ριζική διαδρομή της. Το manifest πρέπει να ονομάζεται <code>manifest.webapp</code>.</p> +<p>Μια διαφορά μεταξύ αυτής και της φιλοξενούμενης (hosted) εφαρμογής είναι ότι μια συσκευασμένη εφαρμογή πρέπει να καθορίσει ένα <code><a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Manifest#launch_path">launch_path</a></code> στο manifest, ενώ είναι ένα προαιρετικό πεδίο του manifest για μια φιλοξενούμενη εφαρμογή. Για περισσότερες πληροφορίες, ρίξτε μια ματιά στο άρθρο μας για τις <a href="/en-US/docs/Web/Apps/Publishing/Packaged_Apps" title="/en-US/docs/Web/Apps/Publishing/Packaged_Apps"> Συσκευασμένες (packaged) Εφαρμογές</a>.</p> +<h2 id="Αυτο-εκδιδόμενες_εφαρμογές">Αυτο-εκδιδόμενες εφαρμογές</h2> +<p>Μπορείτε επίσης να επιλέξτε να αυτο-εκδώσετε εφαρμογές. Για τις φιλοξενούμενες εφαρμογές, αυτό απλά εμπλέκει την τοποθέτησή τους σε μια ιστοσελίδα "φιλοξενίας", όπως περιγράφεται παραπάνω.</p> +<p>Μπορείτε να αυτο-εκδώσετε μια συσκευασμένη (packaged) εφαρμογή "φιλοξενώντας" τη σε ένα διακομιστή μαζί με ένα mini-manifest στην ίδια διαδρομή που προσδιορίζει την εφαρμογή και χρησιμοποιείται στη διαδικασία εγκατάστασης. Ας εκτελέσουμε αυτή τη διακασία:</p> +<ol> + <li>Έχετε διαθέσιμο το αρχείο zip της συσκευασμένης εφαρμογής σας και δώστε του το όνομα <code>package.zip</code>. Αυτό το αρχείο περιέχει όλα τα αρχεία πόρων της εφαρμογής, συμπεριλαμβανομένου και του manifest.</li> + <li>Δημιουργήστε ένα αρχείο με το όνομα <code>package.manifest</code> και δώστε του το παρακάτω περιεχόμενο. Αυτό είναι ένα mini-manifest που χρησιμοποιείται για σκοπούς εγκατάστασης της συσκευασμένης εφαρμογής. Δεν είναι το κύριο manifest της εφαρμογής σας που είναι μέσα στο αρχείο zip.<br> + <pre class="brush: js">{ + "name": "My sample app", + "package_path" : "http://my-server.com/my-app-directory/my-app.zip", + "version": "1", + "developer": { + "name": "Chris Mills", + "url": "http://my-server.com" + } +}</pre> + </li> + <li>Δημιουργήστε ένα αρχείο με όνομα <code>index.html</code> με το ακόλουθο περιεχόμενο. Αυτό περιέχει δέιγμα JavaScript που "καλεί" την αυσκευασμένη εφαρμογή (<a href="/en-US/docs/Web/API/Apps.installPackage"><code>installPackage()</code></a>) και επανακαλεί για ειδοποίηση επιτυχίας και αποτυχίας. + <pre class="brush: html"><html> + <body> + <p>Packaged app installation page</p> + <script> + // This URL must be a full url. + var manifestUrl = 'http://my-server.com/my-app-directory/package.manifest'; + var req = navigator.mozApps.installPackage(manifestUrl); + req.onsuccess = function() { + alert(this.result.origin); + }; + req.onerror = function() { + alert(this.error.name); + }; + </script> + </body> +</html></pre> + </li> + <li>Αντιγράψτε το <code>package.zip</code>, <code>package.manifest</code>, και το <code>index.html</code> στην ριζική διαδρομή της εφαρμογής σας (<code>my-app-directory</code> στα παραδείγματα).</li> + <li>Χρησιμοποιώντας μια συμβατή συσκευή (όπως ένα τηλέφωνο με Firefox OS), πλοηγηθείτε στην τοποθεσία στο διακομιστή σας όπου θα τοποθετήσετε τα αρχεία-παραδείγματα και επιβεβαιώστε την ένδειξη για εγκατάσταση της εφαρμογής. Το script θα δώσει ένδειξη επιτυχίας ή αποτυχίας εγκατάστασης.</li> +</ol> +<div class="note"> + <p><strong>Σημείωση:</strong> Δεν μπορείτε να εγκαταστήσετε προνομιούχες ή πιστοποιημένες εφαρμογές από αυτο-φιλοξενούμενα πακέτα, καθώς χρειάζονται να υπογραφούν χρησιμοποιώντας την διαδικασία υποβολής του Firefox Marketplace.</p> +</div> +<div class="note"> + <p><strong>Σημείωση</strong>: Μπορείτε ακόμη και να <a href="/en-US/docs/Web/Apps/Creating_a_store" title="/en-US/docs/Web/Apps/Creating_a_store">δημιουργήσετε το δικό σας κατάστημα εφαρμογών σας</a>, το οποίο έχει έναν αριθμό διαθέσιμων επιλογών.</p> +</div> +<p> </p> diff --git a/files/el/mozilla/marketplace/συχνές_ερωτήσεις/index.html b/files/el/mozilla/marketplace/συχνές_ερωτήσεις/index.html new file mode 100644 index 0000000000..ab60cda23b --- /dev/null +++ b/files/el/mozilla/marketplace/συχνές_ερωτήσεις/index.html @@ -0,0 +1,153 @@ +--- +title: Συχνές ερωτήσεις για το Firefox Marketplace +slug: Mozilla/Marketplace/Συχνές_ερωτήσεις +translation_of: Archive/Mozilla/Marketplace/FAQ +--- +<div class="summary"> +<p>Αυτό το άρθρο απαντά σε μια ποικιλία συνηθισμένων ερωτήσεων σχετικά με τη δημοσίευση στο <a href="https://marketplace.firefox.com/">Firefox Marketplace</a>.</p> +</div> + +<h2 id="Διαχείριση_λογαριασμού">Διαχείριση λογαριασμού</h2> + +<h3 id="Πως_αλλάζω_τις_πληροφορίες_στο_λογαριασμό_προγραμματιστή_μου">Πως αλλάζω τις πληροφορίες στο λογαριασμό προγραμματιστή μου;</h3> + +<p>Πηγαίνετε στο Firefox Marketplace, βεβαιωθείτε ότι είστε συνδεδεμένος στο λογαριασμό, μετακινηθείτε πάνω από το εικονίδιο του γραναζιού και πατήστε το Επεξεργασία Ρυθμίσεων Λογαριασμού.</p> + +<h3 id="Πως_αλλάζω_τις_πληροφορίες_πληρωμής_προγραμματιστή_μου">Πως αλλάζω τις πληροφορίες πληρωμής προγραμματιστή μου; </h3> + +<p>Πηγαίνετε στο Firefox Marketplace, βεβαιωθείτε ότι έχετε συνδεθεί στο λογαριασμό σας, περάστε τον κέρσορα πάνω από το εικονίδιο γραναζιού και κάντε κλικ στο Οι Υποβολές μου. Βρείτε την εφαρμογή για την οποία επιθυμείτε να αλλάξετε τις ρυθμίσεις της και κάντε κλικ στο Ρύθμιση Πληρωμών.</p> + +<h3 id="Where_can_I_find_reporting_and_reconciliation_information_for_my_sales">Where can I find reporting and reconciliation information for my sales?</h3> + +<p>In the Firefox Marketplace, click the "My Apps" link on the home page settings menu (the gear icon), and select the app you want to find data on.</p> + +<h3 id="How_do_I_manage_access_to_account_information_for_multiple_members_of_my_team_or_company">How do I manage access to account information for multiple members of my team or company?</h3> + +<p>In the Firefox Marketplace, click the "My Apps" link on the home page settings menu (the gear icon), and select the app you want to change team details on.</p> + +<h3 id="Μπορώ_να_μετονομάσω_μια_εφαρμογή">Μπορώ να μετονομάσω μια εφαρμογή;</h3> + +<p>Αν αλλάξετε το όνομα της εφαρμογής σας μετά την έγκρισή της από το Marketplace, θα πρέπει να υποβάλετε την εφαρμογή σας για έγκριση ξανά. Δείτε το <a href="/en-US/Marketplace/Publishing/Updating_apps">Ενημερώνοντας τις εφαρμογές</a> για περισσότερες λεπτομέρειες.</p> + +<h3 id="How_do_I_access_the_Firefox_Marketplace_debug_settings">How do I access the Firefox Marketplace debug settings?</h3> + +<p>While logged in, go to the Firefox Marketplace, type ":debug" into the search form, and submit it.</p> + +<p>This should bring you to the debug screen for your Marketplace account, where you can clear cookies and <code>localStorage</code> associated with the Marketplace site, submit logs, view settings and activity logs, and more.</p> + +<h3 id="How_can_I_view_apps_I_submitted_in_a_region_different_to_where_I_currently_am">How can I view apps I submitted in a region different to where I currently am?</h3> + +<p>If you have published an app in a region other than where you are currently located or have a SIM for, you can view it by:</p> + +<ol> + <li>Going to the Firefox Marketplace debug settings (see previous question.)</li> + <li>Selecting your desired region and/or carrier using the "Region Override" and "Carrier Override" select menus (these settings will update as soon as you make a selection.)</li> + <li>Reloading the Marketplace.</li> +</ol> + +<p>You should try selecting the category your app resides in, to make sure the setting updates have had the desired effect.</p> + +<h2 id="Υποβολή_εφαρμογής_και_διαδικασία_αξιολόγησης">Υποβολή εφαρμογής και διαδικασία αξιολόγησης</h2> + +<h3 id="Πως_μπορώ_να_υποβάλλω_μια_νέα_εφαρμογή">Πως μπορώ να υποβάλλω μια νέα εφαρμογή;</h3> + +<p>Για ένα λεπτομερή οδηγό, συμβουλευτείτε το <a href="/en-US/Marketplace/Submission/Submitting_an_app">Υποβάλλοντας μια εφαρμογή στο Firefox Marketplace</a>.</p> + +<h3 id="Ποια_είναι_η_διαδικασία_έγκρισης">Ποια είναι η διαδικασία έγκρισης;</h3> + +<p>Δείτε τον οδηγό <a href="/en-US/Marketplace/Submission/Marketplace_review_criteria">Κριτήρια αξιολόγησης του Marketplace</a> για μια πλήρη λίστα κριτηρίων που χρησιμοποιούνται στη διαδικασία αξιολόγησής μας.</p> + +<h3 id="Is_there_an_expedited_review_process_Are_there_different_criteria_for_this">Is there an expedited review process? Are there different criteria for this?</h3> + +<p>Developers can request expedited reviews if they're trying to catch their own great opportunity, or if they need to release critical fixes. To do this, post to our group <a href="https://groups.google.com/forum/#%21forum/mozilla.appreview" title="appreview@lists.mozilla.org">mozilla.appreview</a> or join the #app-reviewers IRC channel on <a href="https://wiki.mozilla.org/IRC">irc.mozilla.org</a> and explain the situation. We'll do the best we can to accommodate expedited requests, but there's no guarantee that a reviewer will be able to meet any specific timeframe.</p> + +<div class="note"> +<p><strong>Note</strong>: Expedited reviews of your own apps is also one of the perks of contributing to the app review team. Anyone interested can apply for consideration using our <a href="https://docs.google.com/spreadsheet/viewform?formkey=dEdVWVhWUzdIZ1hWTzRvdkJiLXF5dHc6MQ">Firefox app reviewer application form</a>.</p> +</div> + +<h3 id="Do_my_apps_need_to_comply_with_a_content_policy">Do my apps need to comply with a content policy?</h3> + +<p>Yes. See the <a href="/en-US/Marketplace/Submission/Marketplace_review_criteria#Content">"Content" section in the Marketplace review criteria</a> for details on Mozilla's content policy.</p> + +<h3 id="How_do_I_submit_an_appeal_for_a_rejected_or_removed_app">How do I submit an appeal for a rejected or removed app?</h3> + +<p>To appeal an app rejection, either reply to the rejection email (the footer of every Marketplace notice says you can reply to the email if you have questions or concerns) or come talk to us in the #app-reviewers IRC channel on <a href="https://wiki.mozilla.org/IRC">irc.mozilla.org</a>.</p> + +<h2 id="Payments">Payments</h2> + +<h3 id="How_do_payments_work_in_the_Firefox_Marketplace">How do payments work in the Firefox Marketplace?</h3> + +<p>Mozilla offers several payment models, including paid apps, freemium apps, and in-app payments. For more information, read our <a href="/en-US/Marketplace/Monetization/Marketplace_Payments">Marketplace Payments guide</a>.</p> + +<h3 id="What_is_the_developer's_revenue_share">What is the developer's revenue share?</h3> + +<p>Developers receive 70% of the pre-VAT and fee amount. For instance, if the US price is $.99 (Tier 10), the Euro price is €.89, and the VAT is 20% (based on a UK standard VAT rate), the pre-VAT price is €.74, which is around $.99 (sometimes the equivalent price tier may be higher and sometimes lower). Developers receive 70% of the €.74.<br> + For more information on price tiers and pricing, read <a href="/en-US/Marketplace/Monetization/App_pricing">App pricing</a>.</p> + +<h3 id="Does_Mozilla_take_a_share_of_the_revenue">Does Mozilla take a share of the revenue?</h3> + +<p>Yes, to support the operation of the Firefox Marketplace and to improve our apps platform, as well as to cover the transaction fee associated with each purchase. Mozilla automatically receives a share from the 30% pre-VAT revenue, which is split between Mozilla, the mobile network operator, and the payment provider (e.g. Bango).</p> + +<h3 id="Do_I_have_to_use_the_Firefox_Marketplace_payments_system">Do I have to use the Firefox Marketplace payments system?</h3> + +<p>The Firefox Marketplace payments system is required for paid downloads from the Firefox Marketplace. We don't require the Marketplace payments system for in-app purchases, but currently the only implementation of the {{ domxref("navigator.mozPay()") }} function (used for in-app purchases) is in Firefox OS, and it uses the Firefox Marketplace payments system. Eventually you will be able to use any payment system you choose for in-app payments.</p> + +<h3 id="What_are_the_transaction_fees_associated_with_offering_my_app_on_the_Firefox_Marketplace">What are the transaction fees associated with offering my app on the Firefox Marketplace?</h3> + +<p>30% of the pre-tax price. In other words, since the Marketplace tax-inclusive price tiers already have VAT built into the prices (where applicable), the VAT is taken out on settlement and the developer is given 70%.</p> + +<h3 id="Do_I_have_to_set_a_sales_tax_or_VAT_rate">Do I have to set a sales tax or VAT rate?</h3> + +<p>No. The Marketplace price tiers include VAT in areas that are "tax-inclusive." For sales tax, it is added to the bill by the payment provider.</p> + +<h3 id="How_do_I_manage_split_payments">How do I manage split payments?</h3> + +<p>The Firefox Marketplace cannot split payments at this time.</p> + +<h3 id="Can_I_submit_a_free_app_Am_I_charged">Can I submit a free app? Am I charged?</h3> + +<p>Yes, free apps are very welcome in the Firefox Marketplace. Mozilla does not take a share or charge for any free app downloads.</p> + +<h3 id="Μπορεί_μια_επι_πληρωμή_εφαρμογή_να_έχει_επίσης_πληρωμές_μέσα_της">Μπορεί μια επι πληρωμή εφαρμογή να έχει επίσης πληρωμές μέσα της;</h3> + +<p>Ναι.</p> + +<h3 id="What_is_the_chargeback_process">What is the chargeback process?</h3> + +<p>Chargebacks are refunds. They can be initiated by a mobile operator (cellular company) in the case of mobile billing, or by a credit card company, or by the payment provider (e.g. Bango). For mobile billing, the refund policy is up to the operator. Currently, none of them give refunds. Bango is the front line support for credit cards. For developers, any refunds are deducted from their earnings.</p> + +<p>There is a refund policy in the Terms of Service and the <a href="/en-US/Marketplace/Submission/Submitting_an_app#Step_1.3A_Agreement">Developer's Agreement</a>. Generally, the Marketplace can't give refunds but can request that Bango give a refund. For operator billing the purchaser must ask the mobile operator and protest a charge to their bill.</p> + +<h3 id="How_are_fraudulent_purchases_handled">How are fraudulent purchases handled?</h3> + +<p>TBD</p> + +<h3 id="How_are_multiple_currencies_handled_on_the_Marketplace">How are multiple currencies handled on the Marketplace?</h3> + +<p>A price is shown in the default currency for the region that the user has selected. On payment, if in fact the user is not in the region they have set it to, they will be billed in their billing region (for their SIM) or based on their location. This is done to prevent scamming.</p> + +<h3 id="What_is_the_payout_schedule_How_often_will_I_be_paid_my_portion_of_app_sales">What is the payout schedule? How often will I be paid my portion of app sales?</h3> + +<p>This is up to the payment provider, which is currently Bango for all regions. Developers have a direct relationship with Bango, and will receive a self-billing invoice each month. The payout rates vary since the mobile operator must collect from the end user and remit these funds. It will vary by country. Most likely for credit cards, payment will happen quickly. For operator billing, it might take 30 to 90 days.</p> + +<h3 id="How_do_I_process_refunds">How do I process refunds?</h3> + +<p>See {{SectionOnPage("/en-US/docs/Web/Apps/Publishing/Marketplace_Payments", "Refunds")}} for more details.</p> + +<h3 id="Will_the_Firefox_Marketplace_allow_for_temporary_sales_or_price_changes">Will the Firefox Marketplace allow for temporary sales or price changes?</h3> + +<p>We are planning to support price tier changes that would allow developers to set different prices for "trial" periods or "sales".</p> + +<h3 id="Can_I_sell_Firefox_add-ons_too">Can I sell Firefox add-ons too?</h3> + +<p>At this time, only apps can be sold in the Firefox Marketplace. We hope to make payments available to other types of content soon.</p> + +<h2 id="Technical_questions">Technical questions</h2> + +<h3 id="Who_hosts_the_app">Who hosts the app?</h3> + +<p>You host all the files for your app on your own server. When you submit an app to the Firefox Marketplace, you provide the URL of your app's manifest file, which the Marketplace reads and verifies. You can upload icons, screenshots, etc. to promote the app on the Firefox Marketplace; see <a href="/en-US/Marketplace/Submission/Submitting_an_app">Submitting an app to the Firefox Marketplace</a> for more details.</p> + +<h3 id="How_can_I_launch_the_Marketplace_from_my_app">How can I launch the Marketplace from my app?</h3> + +<p>You can use <a href="/en-US/docs/WebAPI/Web_Activities">Web Activities</a> to launch the Marketplace from your website or app. The activities that the Marketplace supports are <a href="https://github.com/mozilla/fireplace/wiki/Web-Activities">documented on Github</a>.</p> diff --git a/files/el/mozilla/projects/index.html b/files/el/mozilla/projects/index.html new file mode 100644 index 0000000000..d7e62c6882 --- /dev/null +++ b/files/el/mozilla/projects/index.html @@ -0,0 +1,15 @@ +--- +title: Projects +slug: Mozilla/Projects +tags: + - Landing + - Mozilla + - NeedsContent + - NeedsTranslation + - Projects + - TopicStub +translation_of: Mozilla/Projects +--- +<p>Here you'll find links to documentation about various Mozilla projects; these are often parts of Firefox or other products, but may also be used in other projects as well.</p> + +<p>{{ LandingPageListSubpages() }}</p> diff --git a/files/el/mozilla/projects/midas/index.html b/files/el/mozilla/projects/midas/index.html new file mode 100644 index 0000000000..d2eeeec668 --- /dev/null +++ b/files/el/mozilla/projects/midas/index.html @@ -0,0 +1,330 @@ +--- +title: Midas +slug: Mozilla/Projects/Midas +tags: + - DOM + - Midas + - NeedsContent + - NeedsHelp + - NeedsTranslation + - Reference + - Référence(2) + - TopicStub +translation_of: Mozilla/Projects/Midas +--- +<h2 id="Introduction" name="Introduction">Introduction</h2> + +<p>Midas is the code name for Gecko's built-in rich text editor. Midas can be enabled via JavaScript on an HTML document. When Midas is enabled, the document becomes editable by the user. Scripting for Midas is based on the <a href="http://msdn.microsoft.com/en-us/library/ms533049.aspx">DHTML commands</a> supported by Internet Explorer. Internet Explorer supports the ability to make an entire document editable by setting the <code>designMode</code> property of the {{domxref("document")}} object; this is how Midas is invoked in Gecko. Internet Explorer also supports the ability to edit specific elements using the <code>contentEditable</code> attribute; Starting with Firefox 3, Gecko also supports <code>contentEditable</code>. Once Midas is invoked, a few more methods of the <code>document</code> object become available.</p> + +<h2 id="Properties" name="Properties">Properties</h2> + +<dl> + <dt><a href="/en-US/docs/Midas/designMode">document.designMode</a></dt> + <dd>By setting this property to "on", the document becomes editable.</dd> +</dl> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>Since an entire document becomes editable, authors often load the editable document into an <code>IFRAME</code> and do the bulk of the scripting in the parent document. According to <a href="http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-50708718">standards</a>, The <code>IFRAME</code> element has the <code>contentDocument</code> property that refers to the document in the inline frame. It also has a property called <code>contentWindow</code> that refers to the window object inside the inline frame. This also avoids problems with {{bug(198155)}}.</p> + +<p>In addition to the built-in commands, advanced editing can be done by manipulating the {{domxref("Selection")}} and {{domxref("range")}} objects. It is beneficial to be familiar with these objects when working with an editable document.</p> + +<h2 id="Examples" name="Examples">Examples</h2> + +<p>This example shows the basic structure described in the Notes section :</p> + +<pre><html> + <head> + <title>Simple Edit Box</title> + </head> + <body> + <iframe + id="MidasForm" + src="about:blank" + onload="this.contentDocument.designMode='on';" + ></iframe> + </body> +</html> +</pre> + +<h2 id="Methods" name="Methods">Methods</h2> + +<dl> + <dt>{{domxref("Document.execCommand")}}</dt> + <dd>Executes the given command.</dd> + <dt>{{domxref("Document.queryCommandEnabled")}}</dt> + <dd>Determines whether the given command can be executed on the document in its current state.</dd> + <dt>{{domxref("Document.queryCommandIndeterm")}}</dt> + <dd>Determines whether the current selection is in an indetermined state.</dd> + <dt>{{domxref("Document.queryCommandState")}}</dt> + <dd>Determines whether the given command has been executed on the current selection.</dd> + <dt>{{domxref("Document.queryCommandValue")}}</dt> + <dd>Determines the current value of the document, range, or current selection for the given command.</dd> +</dl> + +<h2 id="Supported_Commands" name="Supported_Commands">Supported Commands</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Command</td> + <td class="header">Value</td> + <td class="header">Description</td> + </tr> + <tr> + <td>backcolor</td> + <td>A color code.</td> + <td>This command will set the background color of the document.</td> + </tr> + <tr> + <td>bold</td> + <td> </td> + <td>If there is no selection, the insertion point will set bold for subsequently typed characters. + <p>If there is a selection and all of the characters are already bold, the bold will be removed. Otherwise, all selected characters will become bold.</p> + </td> + </tr> + <tr> + <td>contentReadOnly</td> + <td> </td> + <td>This command will make the editor readonly(true)or editable(false). Anticipated usage is for temporarily disabling input while something else is occurring elsewhere in the web page.</td> + </tr> + <tr> + <td>copy</td> + <td> </td> + <td>If there is a selection, this command will copy the selection to the clipboard. If there isn't a selection, nothing will happen. + <p>note: this command won't work without setting a pref or using signed JS. See: <a href="http://www.mozilla.org/editor/midasdemo/securityprefs.html">more about security preferences</a></p> + + <p>note: the shortcut key will automatically trigger this command (typically accel-C) with or without the signed JS or any code on the page to handle it.</p> + </td> + </tr> + <tr> + <td>createlink</td> + <td>A URI.</td> + <td>This command will not do anything if no selection is made. If there is a selection, a link will be inserted around the selection with the url parameter as the href of the link.</td> + </tr> + <tr> + <td>cut</td> + <td> </td> + <td>If there is a selection, this command will copy the selection to the clipboard and remove the selection from the edit control. If there isn't a selection, nothing will happen. + <p>note: this command won't work without setting a pref or using signed JS. See: <a href="http://www.mozilla.org/editor/midasdemo/securityprefs.html">more about security preferences</a></p> + + <p>note: the shortcut key will automatically trigger this command (typically accel-X) with or without the signed JS or any code on the page to handle it.</p> + </td> + </tr> + <tr> + <td>decreasefontsize</td> + <td> </td> + <td>This command will add a <small> tag around selection or at insertion point.</td> + </tr> + <tr> + <td>delete</td> + <td> </td> + <td>This command will delete all text and objects that are selected. If no text is selected it deletes one character to the right. This is similar to the <em>Delete</em> button on the keyboard.</td> + </tr> + <tr> + <td>fontname</td> + <td>A font name</td> + <td>This command will set the font face for a selection or at the insertion point if there is no selection. + <p>The given string is such as would be used in the "face" attribute of the font tag, i.e., a comma-separated list of font names.</p> + </td> + </tr> + <tr> + <td>fontsize</td> + <td>A number</td> + <td>This command will set the fontsize for a selection or at the insertion point if there is no selection. + <p>The given number is such as would be used in the "size" attribute of the font tag.</p> + </td> + </tr> + <tr> + <td>forecolor</td> + <td>A color code</td> + <td>This command will set the text color of the selection or at the insertion point.</td> + </tr> + <tr> + <td>formatblock</td> + <td>H1, H2, H3, H4, H5, H6, P, DIV, ADDRESS, BLOCKQUOTE (more?)</td> + <td>The selection surrounded by the given block element.</td> + </tr> + <tr> + <td>heading</td> + <td>H1, H2, H3, H4, H5, H6</td> + <td>Selected block will be formatted as the given type of heading.</td> + </tr> + <tr> + <td>hilitecolor</td> + <td>A color code</td> + <td>This command will set the hilite color of the selection or at the insertion point. It only works with styleWithCSS enabled.</td> + </tr> + <tr> + <td>increasefontsize</td> + <td> </td> + <td>This command will add a <big> tag around selection or at insertion point.</td> + </tr> + <tr> + <td>indent</td> + <td> </td> + <td>Indent the block where the caret is located. If the caret is inside a list, that item becomes a sub-item one level deeper.</td> + </tr> + <tr> + <td>insertbronreturn</td> + <td>true/false</td> + <td>Selects whether pressing return inside a paragraph creates another paragraph or just inserts a <br> tag.</td> + </tr> + <tr> + <td>inserthorizontalrule</td> + <td>null/string (when string is the Line's id)</td> + <td>This command will insert a horizontal rule (line) at the insertion point. + <p>Does it delete the selection? Yes!</p> + </td> + </tr> + <tr> + <td>inserthtml</td> + <td>A string.</td> + <td>This command will insert the given html into the <body> in place of the current selection or at the caret location. + <p>The given string is the HTML to insert.</p> + </td> + </tr> + <tr> + <td>insertimage</td> + <td>A URI.</td> + <td>This command will insert an image (referenced by the given url) at the insertion point.</td> + </tr> + <tr> + <td>insertorderedlist</td> + <td> </td> + <td>Depends on the selection. If the caret is not inside a non-LI block, that block becomes the first LI and an OL. If the caret is inside a bulleted item, the bulleted item becomes a numbered item.</td> + </tr> + <tr> + <td>insertunorderedlist</td> + <td> </td> + <td>Depends on the selection. If the caret is not inside a non-LI block, that block becomes the first LI and UL. If the caret is inside a numbered item, the numbered item becomes a bulleted item.</td> + </tr> + <tr> + <td>insertparagraph</td> + <td> </td> + <td>Inserts a new paragraph.</td> + </tr> + <tr> + <td>italic</td> + <td> </td> + <td>If there is no selection, the insertion point will set italic for subsequently typed characters. + <p>If there is a selection and all of the characters are already italic, the italic will be removed. Otherwise, all selected characters will become italic.</p> + </td> + </tr> + <tr> + <td>justifycenter</td> + <td> </td> + <td>Center-aligns the current block.</td> + </tr> + <tr> + <td>justifyfull</td> + <td> </td> + <td>Fully-justifies the current block.</td> + </tr> + <tr> + <td>justifyleft</td> + <td> </td> + <td>Left-aligns the current block.</td> + </tr> + <tr> + <td>justifyright</td> + <td> </td> + <td>Right aligns the current block.</td> + </tr> + <tr> + <td>outdent</td> + <td> </td> + <td>Outdent the block where the caret is located. If the block is not indented prior to calling outdent, nothing will happen. + <p>If the caret is in a list item, the item will bump up a level in the list or break out of the list entirely.</p> + </td> + </tr> + <tr> + <td>paste</td> + <td> </td> + <td>This command will paste the contents of the clipboard at the location of the caret. If there is a selection, it will be deleted prior to the insertion of the clipboard's contents. + <p>note: this command won't work without setting a pref or using signed JS. user_pref("capability.policy.policynames", "allowclipboard"); user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess"); See: <a href="http://www.mozilla.org/editor/midasdemo/securityprefs.html">more about security preferences</a></p> + + <p>note: the shortcut key will automatically trigger this command (typically accel-V) with or without the signed JS or any code on the page to handle it.</p> + </td> + </tr> + <tr> + <td>redo</td> + <td> </td> + <td>This command will redo the previous undo action. If undo was not the most recent action, this command will have no effect. + <p>note: the shortcut key will automatically trigger this command (typically accel-shift-Z)</p> + </td> + </tr> + <tr> + <td>removeformat</td> + <td> </td> + <td>Removes inline formatting from the current selection.</td> + </tr> + <tr> + <td>selectall</td> + <td> </td> + <td>This command will select all of the contents within the editable area. + <p>note: the shortcut key will automatically trigger this command (typically accel-A)</p> + </td> + </tr> + <tr> + <td>strikethrough</td> + <td> </td> + <td>If there is no selection, the insertion point will set strikethrough for subsequently typed characters. + <p>If there is a selection and all of the characters are already striked, the strikethrough will be removed. Otherwise, all selected characters will have a line drawn through them.</p> + </td> + </tr> + <tr> + <td>styleWithCSS</td> + <td> </td> + <td>This command is used for toggling the format of generated content. By default (at least today), this is true. An example of the differences is that the "bold" command will generate <b> if the styleWithCSS command is false and generate css style attribute if the styleWithCSS command is true.</td> + </tr> + <tr> + <td>subscript</td> + <td> </td> + <td>If there is no selection, the insertion point will set subscript for subsequently typed characters. + <p>If there is a selection and all of the characters are already subscripted, the subscript will be removed. Otherwise, all selected characters will be drawn slightly lower than normal text.</p> + </td> + </tr> + <tr> + <td>superscript</td> + <td> </td> + <td>If there is no selection, the insertion point will set superscript for subsequently typed characters. + <p>If there is a selection and all of the characters are already superscripted, the superscript will be removed. Otherwise, all selected characters will be drawn slightly higher than normal text.</p> + </td> + </tr> + <tr> + <td>underline</td> + <td> </td> + <td>If there is no selection, the insertion point will set underline for subsequently typed characters. + <p>If there is a selection and all of the characters are already underlined, the underline will be removed. Otherwise, all selected characters will become underlined.</p> + </td> + </tr> + <tr> + <td>undo</td> + <td> </td> + <td>This command will undo the previous action. If no action has occurred in the document, then this command will have no effect. + <p>note: the shortcut key will automatically trigger this command (typically accel-Z)</p> + </td> + </tr> + <tr> + <td>unlink</td> + <td> </td> + <td>If the insertion point is within a link or if the current selection contains a link, the link will be removed and the text will remain.</td> + </tr> + <tr> + <td colspan="3">{{Deprecated_header}}</td> + </tr> + <tr> + <td>readonly</td> + <td> </td> + <td>This command has been replaced with contentReadOnly. It takes the same values as contentReadOnly, but the meaning of true and false are inversed.</td> + </tr> + <tr> + <td>useCSS</td> + <td> </td> + <td>This command has been replaced with styleWithCSS. It takes the same values as styleWithCSS, but the meaning of true and false are inversed.</td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/el/mozilla/projects/midas/security_preferences/index.html b/files/el/mozilla/projects/midas/security_preferences/index.html new file mode 100644 index 0000000000..25d317aaa0 --- /dev/null +++ b/files/el/mozilla/projects/midas/security_preferences/index.html @@ -0,0 +1,67 @@ +--- +title: Midas editor module security preferences +slug: Mozilla/Projects/Midas/Security_preferences +translation_of: Mozilla/Projects/Midas/Security_preferences +--- +<div class="warning">Αυτή η λειτουργία αφαιρέθηκε πλήρως από <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=913734#c19">2013-12-14 18:23 PST</a>, βλέπε: bugs <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=38966#c177">38966</a> και <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=913734#c32">913734</a></div> + +<div class="note"> +<p><strong>Σημείωση:</strong> Αν οδηγηθήκατε σε αυτή τη σελίδα από ένα πλαίσιο κειμένου του Firefox ή από άλλο προϊόν Mozilla, δοκιμάστε τις συντομεύσεις πληκτρολογίου για τις εντολές αποκοπή, αντιγραφή και επικόλληση:</p> + +<ul> + <li>Αντιγραφή: Ctrl+C ή Ctrl+Insert (command+C σε Mac)</li> + <li>Επικόλληση: Ctrl+V ή Shift+Insert (command+V σε Mac)</li> + <li>Αποκοπή: Ctrl+X ή Shift+Delete (command+X σε Mac)</li> +</ul> + +<p>Οι πληροφορίες στο υπόλοιπο της σελίδας προορίζονται για προγραμματιστές ιστού και προχωρημένους χρήστες. Παρακαλούμε μην δοκιμάσετε να τροποποιήσετε αυτή τη σελίδα.</p> +</div> + +<p>To protect users' private information, unprivileged scripts cannot invoke the Cut, Copy, and Paste commands in Midas, which is Mozilla's rich text editor component. This means that the corresponding buttons on the <a href="http://www-archive.mozilla.org/editor/midasdemo/" title="http://www-archive.mozilla.org/editor/midasdemo/">Mozilla Rich Text Editing demo page</a> will not work. To enable these functions, you must modify your browser preferences.</p> + +<div class="warning"> +<p><strong>Warning:</strong> Changing these preferences can leave your browser insecure, especially if you grant permission to untrusted sites. Only change these settings as needed to try the demo above and to test your own add-on or Firefox-internal code, and be sure to restore the default settings when you're done!</p> +</div> + +<h2 id="Changing_the_preferences_in_Firefox">Changing the preferences in Firefox</h2> + +<ol> + <li>Quit Firefox. If you have Quick Launch running (on Windows, this is an icon in the toolbar), quit that too.</li> + <li><a class="external" href="http://support.mozilla.com/en-US/kb/Profiles">Find your Firefox profile directory</a>.</li> + <li>Open the <code class="filename">user.js</code> file from that directory in a text editor. If there's no <code>user.js</code> file, create one.</li> + <li>Add these lines to <code class="filename">user.js</code>: + <pre class="code">user_pref("capability.policy.policynames", "allowclipboard"); +user_pref("capability.policy.allowclipboard.sites", "https://www-archive.mozilla.org"); +user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess"); +user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess"); +</pre> + </li> + <li>Change the URL <span class="external"><code class="url">https://www.mozilla.org</code></span> to the site for which you want to enable this function.</li> + <li>Save the file and restart Firefox. The Clipboard buttons in the demo, or similar buttons on the sites you listed, should now function.</li> +</ol> + +<div class="note"><strong>Note:</strong> The preference is site as well as protocol specific. For example: + +<pre>user_pref("capability.policy.allowclipboard.sites", "http://www-archive.mozilla.org") +</pre> + +<p>is not the same as:</p> + +<pre>user_pref("capability.policy.allowclipboard.sites", "https://www-archive.mozilla.org") +</pre> + +<p>This is because the first uses <a href="/en-US/docs/HTTP" title="/en-US/docs/HTTP">HTTP</a> while the second uses HTTPS.</p> +If you want to allow multiple URLs to access the Paste operation, separate the URLs with a space. For example: + +<pre>user_pref("capability.policy.allowclipboard.sites", "https://www-archive.mozilla.org https://developer.mozilla.org") +</pre> +</div> + +<p>Again, keep in mind the security risks involved here and be sure to remove permission to access the clipboard once you no longer need it enabled.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li id="For_more_information_about_security_policies.2C_see_this_article_about_Configurable_Security_Policies.">For more information about security policies, see this article about <a href="http://www.mozilla.org/projects/security/components/ConfigPolicy.html" title="http://www.mozilla.org/projects/security/components/ConfigPolicy.html">Configurable Security Policies</a>.</li> + <li><a href="/en-US/docs/Web/Security/CSP">CSP</a> and <a href="/en-US/docs/Web/Security/CSP/CSP_policy_directives">Policy Directives</a>.</li> +</ul> diff --git a/files/el/mozilla/πρόσθετα/index.html b/files/el/mozilla/πρόσθετα/index.html new file mode 100644 index 0000000000..bbc540795f --- /dev/null +++ b/files/el/mozilla/πρόσθετα/index.html @@ -0,0 +1,112 @@ +--- +title: Πρόσθετα +slug: Mozilla/Πρόσθετα +translation_of: Mozilla/Add-ons +--- +<div class="summary">Τροποποιήστε και επεκτείνετε εφαρμογές της Mozilla</div> + +<p><span class="seoSummary">Add-ons add new functionality to <a href="/en-US/docs/Mozilla/Gecko">Gecko</a>-based applications such as Firefox, SeaMonkey and Thunderbird.</span><strong> </strong>There are two main types of add-on: <a href="#Extensions">Extensions</a> add new features to the application, while <a href="#Themes">Themes</a> modify the application's user interface.</p> + +<p>For both extensions and themes, Mozilla operates a repository at <a href="https://addons.mozilla.org/">addons.mozilla.org</a>, also known as AMO. When you <a href="/en-US/Add-ons/Submitting_an_add-on_to_AMO">submit add-ons to AMO</a> they are reviewed, and after passing review they are made available to users. You don't have to submit add-ons to AMO, but if you do, users can take confidence in the fact that they have been reviewed, and you can benefit from AMO's visibility as a source for useful add-ons.</p> + +<p>Add-ons can greatly affect the behaviour of the application that hosts them. We've developed a <a href="/en-US/docs/Mozilla/Add-ons/Add-on_guidelines">set of guidelines</a> to help ensure that they provide a good experience to users. These guidelines apply for all sorts of add-ons, whether they are hosted at <a href="https://addons.mozilla.org/">addons.mozilla.org</a> or not.</p> + +<hr> +<h2 id="Επεκτάσεις"><a name="Extensions">Επεκτάσεις</a></h2> + +<p>Extensions add new functionality to Mozilla applications such as Firefox and Thunderbird. They can add new features to the browser, such as a different way to manage tabs, and they can modify web content to improve the usability or security of particular websites.</p> + +<p>There are three different techniques you can use to build extensions: Add-on SDK-based extensions, manually bootstrapped restartless extensions, and overlay extensions.</p> + +<ul class="card-grid"> + <li><span><a href="https://developer.mozilla.org/en-US/Add-ons/SDK">Επεκτάσεις προσθέτου SDK</a></span><br> + Develop restartless extensions using a set of high-level JavaScript APIs.</li> + <li><strong><span><a href="/en-US/Add-ons/Bootstrapped_extensions">Μη επανεκκινήσιμες επεκτάσεις</a></span></strong><br> + Develop extensions that don't require a browser restart.</li> + <li><strong><a href="/en-US/Add-ons/Overlay_Extensions">Επεκτάσεις επικάλυψης</a></strong><br> + Develop traditional extensions using a XUL overlay.</li> +</ul> + +<p>Αν μπορείτε, προτείνεται η χρήση του Add-on SDK, το οποίο χρησιμοποιεί το μηχανισμό των μη επανεκκινήσιμων επεκτάσεων αλλά απλοποιεί συγκεκριμένες εργασίες και καθαρίζεται αργότερα από μόνο του. Αν το Add-on SDK δεν ικανοποιεί τις ανάγκες σας, εκτελέστε μια χειροκίνητη, μη επανεκκινήσιμη επέκταση. Οι επεκτάσεις επικάλυψης είναι κυρίως απαρχαιωμένες τώρα, αν και υπάρχουν πολλές εκεί έξω.</p> + +<p>Για περισσότερες πληροφορίες σχετικά με την επιλογή ποιας τεχνικής να χρησιμοποιήσετε, διαβάστε αυτή τη <a href="/en-US/Add-ons/Comparing_Extension_Toolchains">σύγκριση</a>.</p> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Καλές_πρακτικές">Καλές πρακτικές</h3> + +<p>Όπως και να αναπτύσσετε μια επέκταση, υπάρχουν μερικές οδηγίες που μπορείτε να ακολουθήσετε για να εξασφαλίστε ότι η επέκτασή σας παρέχει την καλύτερη δυνατή εμπειρία χρήσης.</p> + +<dl> + <dt><a href="/en-US/Add-ons/Performance_best_practices_in_extensions">Επίδοση</a></dt> + <dd>Εξασφαλίστε ότι η επέκτασή σας είναι γρήγορη, αποκριτική και αποδοτική με τη μνήμη.</dd> + <dt><a href="/en-US/Add-ons/Security_best_practices_in_extensions">Ασφάλεια</a></dt> + <dd>Εξασφαλίστε ότι η επέκταση σας δεν εκτέθει το χρήστη σε κακόβουλες ιστοσελίδες.</dd> + <dt><a href="/en-US/Add-ons/Extension_etiquette">Πρωτόκολλο</a></dt> + <dd>Εξασφαλίστε ότι η επέκτασή σας λειτυοργεί αρμονικά με τις άλλες.</dd> +</dl> +</div> + +<div class="column-half"> +<h3 id="Application-specific">Application-specific</h3> + +<p>Most of the documentation assumes you're developing for Firefox Desktop. If you're developing for some other Gecko-based application, there are major differences you need to know about.</p> + +<dl> + <dt><a href="/en-US/Add-ons/Thunderbird">Thunderbird</a></dt> + <dd>Developing extensions for the Thunderbird mail client.</dd> + <dt><a href="/en-US/Add-ons/Firefox_for_Android">Firefox για Android</a></dt> + <dd>Developing extensions for Firefox for Android.</dd> + <dt><a href="/en-US/Add-ons/SeaMonkey_2">SeaMonkey</a></dt> + <dd>Developing extensions for the <a href="http://www.seamonkey-project.org/">SeaMonkey</a> software suite.</dd> +</dl> +</div> +</div> + +<hr> +<h2 id="Θέματα"><a name="Themes">Θέματα</a></h2> + +<p>Τα θέματα είναι πρόσθετα που διαμορφώνουν το περιβάλλον εργασίας χρήστη της εφαρμογής. Υπάρχουν δύο κατηγορίες θεμάτων: τα ελαφρά και τα πλήρη θέματα.</p> + +<div class="column-container"> +<div class="column-half"> +<p>Τα <a href="https://addons.mozilla.org/en-US/developers/docs/themes">Ελαφρά θέματα</a> είναι πολύ πιο απλά στην υλοποίηση απ' ότι τα πλήρη θέματα, αλλά παρέχουν πολύ περιορισμένη εξατομίκευση.</p> +</div> + +<div class="column-half"> +<p>Με τα <a href="/en-US/docs/Themes">πλήρη θέματα</a> μπορείτε να κάνετε πολύ βαθύτερες τροποποιήσεις στο UI της εφαρμογής. Η τεκμηρίωση για τα πλήρη θέματα είναι ξεπερασμένη, αλλά συνδέεται με την εδώ σαν μια πιθανή βάση για ενημερωμένη τεκμηρίωση</p> +</div> +</div> + +<h2 id="Άλλοι_τύποι_προσθέτων">Άλλοι τύποι προσθέτων</h2> + +<p>Τα <a href="/en-US/docs/Creating_OpenSearch_plugins_for_Firefox">πρόσθετα μηχανών αναζήτησης</a> είναι ένας απλός και πολύ συγκεκριμένος τύπος προσθέτων: προσθέτουν νέες μηχανές αναζήτησης στη γραμμή αναζήτησης του περιηγητή.</p> + +<p>Τα <strong style="line-height: 1.5;"><a href="/en-US/docs/Plugins">Plugins</a> </strong><span style="line-height: 1.5;">βοηθούν την εφαρμογή να καταλάβει περιεχόμενο που δεν υποστηρίζει από μόνη της. Είμαστε στη διαδικασία αποδοκιμασίας της υποστήριξης για αυτά τα plugins, καθώς έχουν ιστορικό πρόκλησης προβλημάτων σταθερότητας, απόδοσης και ασφάλειας.</span></p> + +<h2 id="Subnav">Subnav</h2> + +<ol> + <li><a href="/en-US/Add-ons/Overlay_Extensions" title="Overlay extensions">Overlay extensions</a></li> + <li><a href="/en-US/Add-ons/Bootstrapped_extensions" title="Restartless extensions">Restartless extensions</a></li> + <li><a href="/en-US/Add-ons/SDK">Add-on SDK</a></li> + <li><a href="#">Extension good practices</a> + <ol> + <li><a href="/en-US/Add-ons/Performance_best_practices_in_extensions" title="Performance">Performance</a></li> + <li><a href="/en-US/Add-ons/Security_best_practices_in_extensions" title="Security">Security</a></li> + <li><a href="/en-US/Add-ons/Extension_etiquette" title="Etiquette">Etiquette</a></li> + </ol> + </li> + <li><a href="#">Themes</a> + <ol> + <li><a href="https://addons.mozilla.org/en-US/developers/docs/themes" title="Lightweight themes">Lightweight themes</a></li> + <li><a href="/en-US/docs/Themes" title="Complete themes">Complete themes</a></li> + </ol> + </li> + <li><a href="#">Publishing add-ons</a> + <ol> + <li><a href="https://addons.mozilla.org/" title="addons.mozilla.org">addons.mozilla.org</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/Add-on_guidelines">Add-on guidelines</a></li> + </ol> + </li> +</ol> diff --git a/files/el/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html b/files/el/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html new file mode 100644 index 0000000000..f4d86f8c60 --- /dev/null +++ b/files/el/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html @@ -0,0 +1,181 @@ +--- +title: CanvasRenderingContext2D.imageSmoothingEnabled +slug: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled +translation_of: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled +--- +<div>{{APIRef}} {{SeeCompatTable}}</div> + +<p>Η ιδιότητα <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.imageSmoothingEnabled</code></strong> του Canvas 2D API μπορεί να καθοριστεί για να αλλάξει αν οι εικόνες θα είναι λείες (<code>true</code>, προεπιλογή) ή όχι (<code>false</code>). Όταν ζητηθεί η ιδιότητα <code>imageSmoothingEnabled</code>, επιστρέφει την τελευταία τιμή που καθορίστικε.</p> + +<p>Αυτή η ιδιότητα είναι χρήσημη για παιχνίδια με θέμα pixel-art, όταν ο καμβάς κλιμακώνεται για παράδειγμα. Ο προεπιλεγμένος αλγόριθμος κλιμάκωσης μπορεί να δημιουργίσει θολά εφέ, και να καταστρέψει τα εικονοστοιχεία. Σε αυτή την περίπτωση ορίστε αυτή την ιδιότητα σε <code>false</code>. Δείτε επίσης την ιδιότητα CSS {{cssxref("image-rendering")}}.</p> + +<h2 id="Σύνταξη">Σύνταξη</h2> + +<pre class="syntaxbox"><var><em>ctx</em>.imageSmoothingEnabled = value;</var></pre> + +<h3 id="Επιλογές">Επιλογές</h3> + +<dl> + <dt><code>value</code></dt> + <dd>Ένα {{jsxref("Boolean")}} που δείχνωντας αν θα είναι λείες οι εικόνες ή όχι.</dd> +</dl> + +<h2 id="Παραδείγματα">Παραδείγματα</h2> + +<h3 id="Using_the_globalAlpha_property" name="Using_the_globalAlpha_property">Χρησιμοποιώντας την ιδιότητα <code>imageSmoothingEnabled</code></h3> + +<p>Αυτό είναι ένα απλό απόσπασμα κώδικα που χρησιμοποιά την ιδιότητα <code>imageSmoothingEnabled</code> με μία κλιμακωμένη εικόνα.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight[7-10]">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +var img = new Image(); +img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png'; +img.onload = function() { + ctx.mozImageSmoothingEnabled = false; + ctx.webkitImageSmoothingEnabled = false; + ctx.msImageSmoothingEnabled = false; + ctx.imageSmoothingEnabled = false; + ctx.drawImage(img, 0, 0, 400, 200); +}; +</pre> + +<p>Επεξεργάστε τον παρακάτω κώδικα και δείτε ζωντανά τις αλλαγές σας στον καμβά:</p> + +<div class="hidden"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code" style="height:140px;"> +var img = new Image(); +img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png'; +img.onload = function() { + ctx.mozImageSmoothingEnabled = false; + ctx.webkitImageSmoothingEnabled = false; + ctx.msImageSmoothingEnabled = false; + ctx.imageSmoothingEnabled = false; + ctx.drawImage(img, 0, 0, 400, 200); +};</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var edit = document.getElementById('edit'); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener('click', function() { + textarea.focus(); +}) + +textarea.addEventListener('input', drawCanvas); +window.addEventListener('load', drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 400) }}</p> + +<h2 id="Προδιαγραφές">Προδιαγραφές</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Προδιαγραφή</th> + <th scope="col">Κατάσταση</th> + <th scope="col">Σχόλιο</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-imagesmoothingenabled", "CanvasRenderingContext2D.imageSmoothingEnabled")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Συμβατότητα_προγραμμάτων_περιήγησης">Συμβατότητα προγραμμάτων περιήγησης</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Χαρακτηριστικό</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>30 [1]</td> + <td>{{ CompatVersionUnknown() }}<br> + {{property_prefix("moz")}}<br> + {{ CompatGeckoDesktop(51)}}</td> + <td>{{ CompatVersionUnknown() }}<br> + {{property_prefix("ms")}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Χαρακτηριστικό</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}<br> + {{property_prefix("moz")}}<br> + {{ CompatGeckoMobile(51)}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Υποστηρίζεται με <code>webkit</code> prefix μέχρι την έκδοση 29.</p> + +<h2 id="Δείτε_επίσης">Δείτε επίσης</h2> + +<ul> + <li>Την διεπαφή που την καθορίζει, {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{cssxref("image-rendering")}}</li> +</ul> diff --git a/files/el/web/api/canvasrenderingcontext2d/index.html b/files/el/web/api/canvasrenderingcontext2d/index.html new file mode 100644 index 0000000000..d6aa558a9c --- /dev/null +++ b/files/el/web/api/canvasrenderingcontext2d/index.html @@ -0,0 +1,448 @@ +--- +title: CanvasRenderingContext2D +slug: Web/API/CanvasRenderingContext2D +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Games + - Graphics + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/CanvasRenderingContext2D +--- +<div>{{APIRef}}</div> + +<div>The <strong>CanvasRenderingContext2D</strong> interface is used for drawing rectangles, text, images and other objects onto the canvas element. It provides the 2D rendering context for the drawing surface of a {{ HTMLElement("canvas") }} element.</div> + +<div> </div> + +<p>To get an object of this interface, call {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} on a <code><canvas> element</code>, supplying "2d" as the argument:</p> + +<pre class="brush: js">var canvas = document.getElementById('myCanvas'); // in your HTML this element appears as <canvas id="mycanvas"></canvas> +var ctx = canvas.getContext('2d'); +</pre> + +<p>Once you have the 2D rendering context for a canvas, you can draw within it. For example:</p> + +<pre class="brush: js">ctx.fillStyle = 'rgb(200,0,0)'; // sets the color to fill in the rectangle with +ctx.fillRect(10, 10, 55, 50); // draws the rectangle at position 10, 10 with a width of 55 and a height of 50 +</pre> + +<p>See the properties and methods in the sidebar and below. The <a href="/en-US/docs/Web/API/Canvas_API/Tutorial" title="Canvas tutorial">canvas tutorial</a> has more information, examples, and resources as well.</p> + +<h2 id="Drawing_rectangles">Drawing rectangles</h2> + +<p>There are three methods that immediately draw rectangles to the bitmap.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.clearRect()")}}</dt> + <dd>Sets all pixels in the rectangle defined by starting point <em>(x, y)</em> and size <em>(width, height)</em> to transparent black, erasing any previously drawn content.</dd> + <dt>{{domxref("CanvasRenderingContext2D.fillRect()")}}</dt> + <dd>Draws a filled rectangle at <em>(x, y) </em>position whose size is determined by <em>width</em> and <em>height</em>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</dt> + <dd>Paints a rectangle which has a starting point at <em>(x, y)</em> and has a<em> w</em> width and an <em>h</em> height onto the canvas, using the current stroke style.</dd> +</dl> + +<h2 id="Drawing_text">Drawing text</h2> + +<p>The following methods are provided for drawing text. See also the {{domxref("TextMetrics")}} object for text properties.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fillText()")}}</dt> + <dd>Draws (fills) a given text at the given (x,y) position.</dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeText()")}}</dt> + <dd>Draws (strokes) a given text at the given <em>(x, y) </em>position.</dd> + <dt>{{domxref("CanvasRenderingContext2D.measureText()")}}</dt> + <dd>Returns a {{domxref("TextMetrics")}} object.</dd> +</dl> + +<h2 id="Line_styles">Line styles</h2> + +<p>The following methods and properties control how lines are drawn.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.lineWidth")}}</dt> + <dd>Width of lines. Default <code>1.0</code></dd> + <dt>{{domxref("CanvasRenderingContext2D.lineCap")}}</dt> + <dd>Type of endings on the end of lines. Possible values: <code>butt</code> (default), <code>round</code>, <code>square</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.lineJoin")}}</dt> + <dd>Defines the type of corners where two lines meet. Possible values: <code>round</code>, <code>bevel</code>, <code>miter</code> (default).</dd> + <dt>{{domxref("CanvasRenderingContext2D.miterLimit")}}</dt> + <dd>Miter limit ratio. Default <code>10</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</dt> + <dd>Returns the current line dash pattern array containing an even number of non-negative numbers.</dd> + <dt>{{domxref("CanvasRenderingContext2D.setLineDash()")}}</dt> + <dd>Sets the current line dash pattern.</dd> + <dt>{{domxref("CanvasRenderingContext2D.lineDashOffset")}}</dt> + <dd>Specifies where to start a dash array on a line.</dd> +</dl> + +<h2 id="Text_styles">Text styles</h2> + +<p>The following properties control how text is laid out.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.font")}}</dt> + <dd>Font setting. Default value <code>10px sans-serif</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.textAlign")}}</dt> + <dd>Text alignment setting. Possible values: <code>start</code> (default), <code>end</code>, <code>left</code>, <code>right</code> or <code>center</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.textBaseline")}}</dt> + <dd>Baseline alignment setting. Possible values: <code>top</code>, <code>hanging</code>, <code>middle</code>, <code>alphabetic</code> (default), <code>ideographic</code>, <code>bottom</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.direction")}}</dt> + <dd>Directionality. Possible values: <code>ltr, rtl</code>, <code>inherit</code> (default).</dd> +</dl> + +<h2 id="Fill_and_stroke_styles">Fill and stroke styles</h2> + +<p>Fill styling is used for colors and styles inside shapes and stroke styling is used for the lines around shapes.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fillStyle")}}</dt> + <dd>Color or style to use inside shapes. Default <code>#000</code> (black).</dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeStyle")}}</dt> + <dd>Color or style to use for the lines around shapes. Default <code>#000</code> (black).</dd> +</dl> + +<h2 id="Gradients_and_patterns">Gradients and patterns</h2> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}</dt> + <dd>Creates a linear gradient along the line given by the coordinates represented by the parameters.</dd> + <dt>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</dt> + <dd>Creates a radial gradient given by the coordinates of the two circles represented by the parameters.</dd> + <dt>{{domxref("CanvasRenderingContext2D.createPattern()")}}</dt> + <dd>Creates a pattern using the specified image (a {{domxref("CanvasImageSource")}}). It repeats the source in the directions specified by the repetition argument. This method returns a {{domxref("CanvasPattern")}}.</dd> +</dl> + +<h2 id="Shadows">Shadows</h2> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.shadowBlur")}}</dt> + <dd>Specifies the blurring effect. Default <code>0</code></dd> + <dt>{{domxref("CanvasRenderingContext2D.shadowColor")}}</dt> + <dd>Color of the shadow. Default fully-transparent black.</dd> + <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX")}}</dt> + <dd>Horizontal distance the shadow will be offset. Default 0.</dd> + <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetY")}}</dt> + <dd>Vertical distance the shadow will be offset. Default 0.</dd> +</dl> + +<h2 id="Paths">Paths</h2> + +<p>The following methods can be used to manipulate paths of objects.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.beginPath()")}}</dt> + <dd>Starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.</dd> + <dt>{{domxref("CanvasRenderingContext2D.closePath()")}}</dt> + <dd>Causes the point of the pen to move back to the start of the current sub-path. It tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.</dd> + <dt>{{domxref("CanvasRenderingContext2D.moveTo()")}}</dt> + <dd>Moves the starting point of a new sub-path to the <strong>(x, y)</strong> coordinates.</dd> + <dt>{{domxref("CanvasRenderingContext2D.lineTo()")}}</dt> + <dd>Connects the last point in the subpath to the <code>x, y</code> coordinates with a straight line.</dd> + <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo()")}}</dt> + <dd>Adds a cubic Bézier curve to the path. It requires three points. The first two points are control points and the third one is the end point. The starting point is the last point in the current path, which can be changed using <code>moveTo()</code> before creating the Bézier curve.</dd> + <dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}}</dt> + <dd>Adds a quadratic Bézier curve to the current path.</dd> + <dt>{{domxref("CanvasRenderingContext2D.arc()")}}</dt> + <dd>Adds an arc to the path which is centered at <em>(x, y)</em> position with radius<em> r</em> starting at <em>startAngle</em> and ending at <em>endAngle</em> going in the given direction by <em>anticlockwise</em> (defaulting to clockwise).</dd> + <dt>{{domxref("CanvasRenderingContext2D.arcTo()")}}</dt> + <dd>Adds an arc to the path with the given control points and radius, connected to the previous point by a straight line.</dd> + <dt>{{domxref("CanvasRenderingContext2D.ellipse()")}} {{experimental_inline}}</dt> + <dd>Adds an ellipse to the path which is centered at <em>(x, y)</em> position with the radii <em>radiusX</em> and <em>radiusY</em> starting at <em>startAngle</em> and ending at <em>endAngle</em> going in the given direction by <em>anticlockwise</em> (defaulting to clockwise).</dd> + <dt>{{domxref("CanvasRenderingContext2D.rect()")}}</dt> + <dd>Creates a path for a rectangle at<em> </em>position <em>(x, y)</em> with a size that is determined by <em>width</em> and <em>height</em>.</dd> +</dl> + +<h2 id="Drawing_paths">Drawing paths</h2> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fill()")}}</dt> + <dd>Fills the subpaths with the current fill style.</dd> + <dt>{{domxref("CanvasRenderingContext2D.stroke()")}}</dt> + <dd>Strokes the subpaths with the current stroke style.</dd> + <dt>{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}}</dt> + <dd>If a given element is focused, this method draws a focus ring around the current path.</dd> + <dt>{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}}</dt> + <dd>Scrolls the current path or a given path into the view.</dd> + <dt>{{domxref("CanvasRenderingContext2D.clip()")}}</dt> + <dd>Creates a clipping path from the current sub-paths. Everything drawn after <code>clip()</code> is called appears inside the clipping path only. For an example, see <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Clipping paths">Clipping paths</a> in the Canvas tutorial.</dd> + <dt>{{domxref("CanvasRenderingContext2D.isPointInPath()")}}</dt> + <dd>Reports whether or not the specified point is contained in the current path.</dd> + <dt>{{domxref("CanvasRenderingContext2D.isPointInStroke()")}}</dt> + <dd>Reports whether or not the specified point is inside the area contained by the stroking of a path.</dd> +</dl> + +<h2 id="Transformations">Transformations</h2> + +<p>Objects in the <code>CanvasRenderingContext2D</code> rendering context have a current transformation matrix and methods to manipulate it. The transformation matrix is applied when creating the current default path, painting text, shapes and {{domxref("Path2D")}} objects. The methods listed below remain for historical and compatibility reasons as {{domxref("SVGMatrix")}} objects are used in most parts of the API nowadays and will be used in the future instead.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.currentTransform")}}</dt> + <dd>Current transformation matrix ({{domxref("SVGMatrix")}} object).</dd> + <dt>{{domxref("CanvasRenderingContext2D.rotate()")}}</dt> + <dd>Adds a rotation to the transformation matrix. The angle argument represents a clockwise rotation angle and is expressed in radians.</dd> + <dt>{{domxref("CanvasRenderingContext2D.scale()")}}</dt> + <dd>Adds a scaling transformation to the canvas units by x horizontally and by y vertically.</dd> + <dt>{{domxref("CanvasRenderingContext2D.translate()")}}</dt> + <dd>Adds a translation transformation by moving the canvas and its origin x horzontally and y vertically on the grid.</dd> + <dt>{{domxref("CanvasRenderingContext2D.transform()")}}</dt> + <dd>Multiplies the current transformation matrix with the matrix described by its arguments.</dd> + <dt>{{domxref("CanvasRenderingContext2D.setTransform()")}}</dt> + <dd>Resets the current transform to the identity matrix, and then invokes the <code>transform()</code> method with the same arguments.</dd> + <dt>{{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}}</dt> + <dd>Resets the current transform by the identity matrix.</dd> +</dl> + +<h2 id="Compositing">Compositing</h2> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.globalAlpha")}}</dt> + <dd>Alpha value that is applied to shapes and images before they are composited onto the canvas. Default <code>1.0</code> (opaque).</dd> + <dt>{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}</dt> + <dd>With <code>globalAlpha</code> applied this sets how shapes and images are drawn onto the existing bitmap.</dd> +</dl> + +<h2 id="Drawing_images">Drawing images</h2> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.drawImage()")}}</dt> + <dd>Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.</dd> +</dl> + +<h2 id="Pixel_manipulation">Pixel manipulation</h2> + +<p>See also the {{domxref("ImageData")}} object.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.createImageData()")}}</dt> + <dd>Creates a new, blank {{domxref("ImageData")}} object with the specified dimensions. All of the pixels in the new object are transparent black.</dd> + <dt>{{domxref("CanvasRenderingContext2D.getImageData()")}}</dt> + <dd>Returns an {{domxref("ImageData")}} object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at <em>(sx, sy)</em> and has an <em>sw</em> width and <em>sh</em> height.</dd> + <dt>{{domxref("CanvasRenderingContext2D.putImageData()")}}</dt> + <dd>Paints data from the given {{domxref("ImageData")}} object onto the bitmap. If a dirty rectangle is provided, only the pixels from that rectangle are painted.</dd> +</dl> + +<h2 id="Image_smoothing">Image smoothing</h2> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}}</dt> + <dd>Image smoothing mode; if disabled, images will not be smoothed if scaled.</dd> +</dl> + +<h2 id="The_canvas_state">The canvas state</h2> + +<p>The <code>CanvasRenderingContext2D</code> rendering context contains a variety of drawing style states (attributes for line styles, fill styles, shadow styles, text styles). The following methods help you to work with that state:</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.save()")}}</dt> + <dd>Saves the current drawing style state using a stack so you can revert any change you make to it using <code>restore()</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.restore()")}}</dt> + <dd>Restores the drawing style state to the last element on the 'state stack' saved by <code>save()</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.canvas")}}</dt> + <dd>A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.</dd> +</dl> + +<h2 id="Hit_regions">Hit regions</h2> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}</dt> + <dd>Adds a hit region to the canvas.</dd> + <dt>{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}</dt> + <dd>Removes the hit region with the specified <code>id</code> from the canvas.</dd> + <dt>{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}</dt> + <dd>Removes all hit regions from the canvas.</dd> +</dl> + +<h2 id="Non-standard_APIs">Non-standard APIs</h2> + +<h3 id="Blink_and_WebKit">Blink and WebKit</h3> + +<p>Most of these APIs are <a href="https://code.google.com/p/chromium/issues/detail?id=363198">deprecated and will be removed in the future</a>.</p> + +<dl> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.clearShadow()</code></dt> + <dd>Removes all shadow settings like {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}}.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.drawImageFromRect()</code></dt> + <dd>This is redundant with an equivalent overload of <code>drawImage</code>.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setAlpha()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.globalAlpha")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setCompositeOperation()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineWidth()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.lineWidth")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineJoin()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.lineJoin")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineCap()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.lineCap")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setMiterLimit()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.miterLimit")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setStrokeColor()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.strokeStyle")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setFillColor()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.fillStyle")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setShadow()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitLineDash</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitLineDashOffset</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitImageSmoothingEnabled</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} instead.</dd> +</dl> + +<h3 id="Blink_only">Blink only</h3> + +<dl> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.getContextAttributes()</code></dt> + <dd>Inspired by the same <code>WebGLRenderingContext</code> method it returns an <code>Canvas2DContextAttributes</code> object that contains the attributes "storage" to indicate which storage is used ("persistent" by default) and the attribute "alpha" (<code>true</code> by default) to indicate that transparency is used in the canvas.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.isContextLost()</code></dt> + <dd>Inspired by the same <code>WebGLRenderingContext</code> method it returns <code>true</code> if the Canvas context has been lost, or <code>false</code> if not.</dd> +</dl> + +<h3 id="WebKit_only">WebKit only</h3> + +<dl> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitBackingStorePixelRatio</code></dt> + <dd>The backing store size in relation to the canvas element. See <a href="http://www.html5rocks.com/en/tutorials/canvas/hidpi/">High DPI Canvas</a>.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitGetImageDataHD</code></dt> + <dd>Intended for HD backing stores, but removed from canvas specifications.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitPutImageDataHD</code></dt> + <dd>Intended for HD backing stores, but removed from canvas specifications.</dd> +</dl> + +<dl> +</dl> + +<h3 id="Gecko_only">Gecko only</h3> + +<dl> + <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.filter")}}</dt> + <dd>CSS and SVG filters as Canvas APIs. Likely to be standardized in a new version of the specification.</dd> +</dl> + +<h4 id="Prefixed_APIs">Prefixed APIs</h4> + +<dl> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransform</code></dt> + <dd>Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}. {{ gecko_minversion_inline("7.0") }}</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransformInverse</code></dt> + <dd>Sets or gets the current inversed transformation matrix. {{ gecko_minversion_inline("7.0") }}</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozImageSmoothingEnabled</code></dt> + <dd>See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.</dd> + <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozTextStyle</code></dt> + <dd>Introduced in in Gecko 1.9, deprecated in favor of the {{domxref("CanvasRenderingContext2D.font")}} property.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozDrawText()</code></dt> + <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.strokeText()")}} or {{domxref("CanvasRenderingContext2D.fillText()")}} instead.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozMeasureText()</code></dt> + <dd>This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.measureText()")}} instead.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozPathText()</code></dt> + <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozTextAlongPath()</code></dt> + <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd> +</dl> + +<h4 id="Internal_APIs_(chrome-context_only)">Internal APIs (chrome-context only)</h4> + +<dl> + <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.asyncDrawXULElement()")}}</dt> + <dd>Renders a region of a XUL element into the <code>canvas</code>.</dd> + <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}}</dt> + <dd>Renders a region of a window into the <code>canvas</code>. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.demote()</code></dt> + <dd>This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.</dd> +</dl> + +<h3 id="Internet_Explorer">Internet Explorer</h3> + +<dl> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.msFillRule</code></dt> + <dd>The <a class="external" href="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t" title="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t">fill rule</a> to use. This must be one of <code>evenodd</code> or <code>nonzero</code> (default).</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.8")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("9")}}</td> + <td>{{CompatSafari("2")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Compatibility_notes">Compatibility notes</h2> + +<ul> + <li>Starting with Gecko 5.0 {{geckoRelease("5.0")}}, specifying invalid values are now silently ignored for the following methods and properties: <code>translate()</code>, <code>transform()</code>, <code>rotate(), </code><code>scale(),</code> <code>rect()</code>, <code>clearRect()</code>, <code>fillRect()</code>, <code>strokeRect()</code>, <code>lineTo()</code>, <code>moveTo()</code>, <code>quadraticCurveTo()</code>, <code>arc()</code>, <code>shadowOffsetX</code>, <code>shadowOffsetY</code>, <code>shadowBlur</code>.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("HTMLCanvasElement")}}</li> +</ul> diff --git a/files/el/web/api/geolocation/getcurrentposition/index.html b/files/el/web/api/geolocation/getcurrentposition/index.html new file mode 100644 index 0000000000..f22b26d7ba --- /dev/null +++ b/files/el/web/api/geolocation/getcurrentposition/index.html @@ -0,0 +1,127 @@ +--- +title: Geolocation.getCurrentPosition() +slug: Web/API/Geolocation/getCurrentPosition +translation_of: Web/API/Geolocation/getCurrentPosition +--- +<p>{{ APIRef("Geolocation API") }}</p> + +<p>Η μέθοδος <strong><code>Geolocation.getCurrentPosition()</code></strong> χρησιμοποιείται ώστε να ανακτηθεί η τρέχουσα τοποθεσία της συσκευής.</p> + +<h2 id="Συντακτικό">Συντακτικό</h2> + +<pre class="syntaxbox">navigator.geolocation.getCurrentPosition(<em>success[</em>, <em>error[</em>, <em>options]]</em>)</pre> + +<h3 id="Παράμετροι">Παράμετροι</h3> + +<dl> + <dt><em>success</em></dt> + <dd>Μία συνάρτηση επανάκλησης (callback function) που δέχεται ένα αντικείμενο τύπου {{domxref("Position")}} ως μοναδική παράμετρο εισόδου.</dd> + <dt><em>error</em> {{optional_inline}}</dt> + <dd>Μία προαιρετική συνάρτηση επανάκλησης (callback function) που δέχεται ένα αντικείμενο τύπου {{domxref("PositionError")}} ως μοναδική παράμετρο εισόδου.</dd> + <dt><em>options</em> {{optional_inline}}</dt> + <dd>Ένα προαιρετικό αντικείμενο τύπου {{domxref("PositionOptions")}}.</dd> +</dl> + +<h2 id="Παράδειγμα">Παράδειγμα</h2> + +<pre class="brush: js">var options = { + enableHighAccuracy: true, + timeout: 5000, + maximumAge: 0 +}; + +function success(pos) { + var crd = pos.coords; + + console.log('Your current position is:'); + console.log('Latitude : ' + crd.latitude); + console.log('Longitude: ' + crd.longitude); + console.log('More or less ' + crd.accuracy + ' meters.'); +}; + +function error(err) { + console.warn('ERROR(' + err.code + '): ' + err.message); +}; + +navigator.geolocation.getCurrentPosition(success, error, options); +</pre> + +<h2 id="Προδιαγραφές">Προδιαγραφές</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Προδιαγραφή</th> + <th scope="col">Κατάσταση</th> + <th scope="col">Σχόλιο</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Geolocation')}}</td> + <td>{{Spec2('Geolocation')}}</td> + <td>Αρχικές προδιαγραφές</td> + </tr> + </tbody> +</table> + +<h2 id="Συμβατότητα_προγράμματος_περιήγησης">Συμβατότητα προγράμματος περιήγησης</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Χαρακτηριστικό</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Βασική υποστήριξη</td> + <td>5</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9</td> + <td>10.60<br> + Αφαιρέθηκε στην έκδοση 15.0<br> + Επαναπροστέθηκε στην έκδοση 16.0</td> + <td>5</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Χαρακτηριστικό</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Βασική υποστήριξη</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatGeckoMobile("4")}}</td> + <td>{{CompatUnknown()}}</td> + <td>10.60</td> + <td>{{CompatUnknown()}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Δείτε_επίσης">Δείτε επίσης</h2> + +<ul> + <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Χρησιμοποιώντας geolocation</a></li> + <li>{{domxref("Navigator.geolocation")}}</li> +</ul> diff --git a/files/el/web/api/geolocation/index.html b/files/el/web/api/geolocation/index.html new file mode 100644 index 0000000000..81d4548549 --- /dev/null +++ b/files/el/web/api/geolocation/index.html @@ -0,0 +1,118 @@ +--- +title: Geolocation +slug: Web/API/Geolocation +tags: + - API + - Advanced + - Geolocation API + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/Geolocation +--- +<div>{{APIRef("Geolocation API")}}</div> + +<p>The <code><strong>Geolocation</strong></code> interface represents an object able to programmatically obtain the position of the device. It gives Web content access to the location of the device. This allows a Web site or app to offer customized results based on the user's location.</p> + +<p>An object with this interface is obtained using the {{domxref("NavigatorGeolocation.geolocation")}} property implemented by the {{domxref("Navigator")}} object.</p> + +<div class="note"> +<p><strong>Note:</strong> For security reasons, when a web page tries to access location information, the user is notified and asked to grant permission. Be aware that each browser has its own policies and methods for requesting this permission.</p> +</div> + +<h2 id="Properties">Properties</h2> + +<p><em>The <code>Geolocation</code> interface neither implements, nor inherits any property.</em></p> + +<h2 id="Methods">Methods</h2> + +<p><em><em>The <code>Geolocation</code> interface doesn't inherit any </em>method</em>.</p> + +<dl> + <dt>{{domxref("Geolocation.getCurrentPosition()")}}</dt> + <dd>Determines the device's current location and gives back a {{domxref("Position")}} object with the data.</dd> + <dt>{{domxref("Geolocation.watchPosition()")}}</dt> + <dd>Returns a <code>long</code> value representing the newly established callback function to be invoked whenever the device location changes.</dd> + <dt>{{domxref("Geolocation.clearWatch()")}}</dt> + <dd>Removes the particular handler previously installed using <code>watchPosition()</code>.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Geolocation')}}</td> + <td>{{Spec2('Geolocation')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>5</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9</td> + <td>10.60<br> + Removed in 15.0<br> + Reintroduced in 16.0</td> + <td>5</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatGeckoMobile("4")}}</td> + <td>{{CompatUnknown()}}</td> + <td>10.60</td> + <td>{{CompatUnknown()}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li> +</ul> diff --git a/files/el/web/api/index.html b/files/el/web/api/index.html new file mode 100644 index 0000000000..5f7d964ff7 --- /dev/null +++ b/files/el/web/api/index.html @@ -0,0 +1,18 @@ +--- +title: Web API Interfaces +slug: Web/API +tags: + - API + - Apps + - JavaScript + - Reference + - Web +translation_of: Web/API +--- +<p>When writing code for the Web using JavaScript, there are a great many APIs available. Below is a list of all the interfaces (that is, types of objects) that you may be able to use while developing your Web app or site.</p> + +<div> +<div>{{APIListAlpha}}</div> +</div> + +<p> </p> diff --git a/files/el/web/css/index.html b/files/el/web/css/index.html new file mode 100644 index 0000000000..68cd44735d --- /dev/null +++ b/files/el/web/css/index.html @@ -0,0 +1,69 @@ +--- +title: CSS +slug: Web/CSS +tags: + - CSS + - CSS 3 +translation_of: Web/CSS +--- +<p><strong>Cascading Style Sheets</strong>, τις περισσότερες φορές με την συντομογραφία CSS, είναι μια <a href="/en-US/docs/DOM/stylesheet">stylesheet</a> γλώσσα όπου χρησιμοποιείται για να περιγράψει την παρουσίαση ενός εγγράφου γραμμένου σε <a href="/en-US/docs/HTML">HTML</a> ή <a href="/en-US/docs/XML">XML</a> ( συμπεριλαμβανομένου διαφόρων ειδών XML γλώσσες όπως <a href="/en-US/docs/SVG">SVG</a> ή <a href="/en-US/docs/XHTML">XHTML</a>). Η CSS περιγράφει το πώς το δομημένο στοιχείο θα πρέπει να εμφανίζεται στην οθόνη, σε χαρτί, στην ομιλία, ή σε άλλα μέσα ενημέρωσης.</p> + +<p>Η CSS είναι μια από τις βασικές γλώσσες του ανοικτού διαδικτύου και έχει μια τυποποιημένη <a class="external" href="http://w3.org/Style/CSS/#specs">W3C ιδιότητα</a>. Αναπτύχθηκε σε επίπεδα, η CSS1 είναι πλέον παρωχημένη, η CSS2.1 συστήνεται και η CSS3, οι οποίες χωρίζονται σε μικρότερες ενότητες.</p> + +<section id="sect1"> +<ul class="card-grid"> + <li>CSS Αναφορές + <p>Μια <a href="/en-US/docs/Web/CSS/Reference">λεπτομερής αναφορά</a> για έμπειρους προγραμματιστές, περιγράφοντας κάθε ιδιότητα και έννοια της CSS.</p> + </li> + <li>CSS Παραδείγματα + <p><a href="/en-US/docs/CSS/Getting_Started">Βήμα-βήμα</a> παραδείγματα για βοήθεια αρχάριων προγραμματιστών για το ξεκίνημα τους. Περιέχει όλες τις απαραίτητες βασικές αρχές.</p> + </li> + <li>CSS3 Επίδειξη + <p><a href="/en-US/demos/tag/tech:css3">Συλλογή από παρουσιάσεις</a>, παρουσιάσεις τελευταίων CSS τεχνολογιών. Ώθηση για δημιουργικότητα.</p> + </li> +</ul> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Documentation" name="Documentation">Τεκμηρίωση και προγράμματα εκμάθησης</h2> + +<dl> + <dt>Βασικές έννοιες CSS</dt> + <dd>Περιγράφει <a href="/el/docs/">τη σύνταξη και τις δομές της γλώσσας</a> και εισάγει βασικά στοιχεία όπως η <a href="/el/docs/">εξειδίκευση</a> και η <a href="/el/docs/">κληρονομικότητα</a>, το <a href="/el/docs/">μοντέλο box</a> και το <a href="/el/docs/">margin collapsing</a>, <a href="/el/docs/">stacking</a> και <a href="/el/docs/">block-formatting</a> πλαίσια, ή τις <a href="/el/docs/">initial</a>, <a href="/el/docs/">computed</a>, <a href="/el/docs/">used</a> και <a href="/el/docs/">actual</a> αξίες. Ορίζονται επίσης οντότητες όπως οι <a href="/el/docs/">CSS shorthand properties</a>.</dd> + <dt><a href="/en-US/docs/Web/Guide/CSS">CSS developer guide</a></dt> + <dd>Articles to help you learn <strong>CSS</strong> techniques to make your content shine.</dd> + <dt><a href="/en-US/docs/Web/CSS/Common_CSS_Questions">Common CSS questions</a></dt> + <dd>Answers to common questions about <strong>CSS</strong>.</dd> +</dl> + +<h2 class="Tools" id="Tools" name="Tools">Εργαλεία για CSS ανάπτυξη</h2> + +<ul> + <li>The <a class="external" href="http://jigsaw.w3.org/css-validator/">W3C CSS Validation Service</a> checks if a given CSS is valid. The service at <a href="//www.OnlineWebCheck.com/">OnlineWebCheck.com</a> also does the same. These are invaluable debugging tools.</li> + <li><a href="/en-US/docs/Tools">Firefox Developer Tools</a> allow viewing and editing live CSS of a page via the <a href="/en-US/docs/Tools/Page_Inspector">Inspector</a> and <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a> tools.</li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug extension</a> for Firefox, a popular extension of that navigator that allows to edit live CSS on watched sites. Very practical to test some changes, though this extension does much more.</li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/60">Web Developer extension</a> for Firefox also allows to watch and edit live CSS on watched sites. Simpler than Firebug, though less powerful.</li> + <li><a class="external link-https" href="https://addons.mozilla.org/en-US/firefox/addon/179">EditCSS extension</a> for Firefox allows editing CSS in the sidebar.</li> +</ul> +</div> + +<div class="section"> +<h2 class="Related_Topics" id="News" name="News">Νέα</h2> + +<ul> + <li><a href="http://www.w3.org/TR/css-text-decor-3/">CSS Text-decoration Level 3</a> reached the <em>Candidate Recommandation</em> status, defining that the <code>text-decoration-*</code> and <code>text-emphasis-*</code> properties. The long known {{cssxref("text-shadow")}} is also defined in it. (<em>August 1st, 2013)</em></li> + <li>Gecko's now support {{cssxref("background-origin")}}<code>: local</code>. It will be available from Firefox 25 (and already is in Nightly). <em>(July 25th, 2013)</em></li> + <li><a href="http://www.w3.org/TR/pointerevents/">Pointer Events</a> reached the <em>Candidate Recommandation</em> status, meaning that the CSS property <code>touch-action</code>, currently only implemented in IE10 (with the <code>-ms-</code> prefix), is no more experimental. <em>(May 6th, 2013)</em></li> + <li>Gecko's support of <a href="/en-US/docs/CSS/Tutorials/Using_CSS_flexible_boxes"><em>flexible boxes</em></a> has been adapted to match a recent specification clarification: from Firefox 23 {{cssxref("::before")}} and {{cssxref("::after")}} will be flex items, and as such can be repositioned using {{cssxref("order")}} and {{cssxref("align-self")}}. <em>(May 3rd, 2013)</em></li> +</ul> + +<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Σχετικά Άρθρα</h2> + +<ul> + <li>Mozilla Learn <a href="/en-US/learn/css">CSS resources</a>.</li> + <li>Open Web languages on which CSS is often applied: <a href="/en-US/docs/HTML">HTML</a>, <a href="/en-US/docs/SVG">SVG</a>, <a href="/en-US/docs/XHTML">XHTML</a>, <a href="/en-US/docs/XML">XML</a>.</li> + <li>Mozilla technologies which make extensive use of CSS: <a href="/en-US/docs/XUL">XUL</a>, Firefox and Thunderbird <a href="/en-US/docs/Extensions">extensions</a> and <a href="/en-US/docs/Themes">themes</a>.</li> +</ul> +</div> +</div> +</section> diff --git a/files/el/web/html/element/embed/index.html b/files/el/web/html/element/embed/index.html new file mode 100644 index 0000000000..0a6e398b10 --- /dev/null +++ b/files/el/web/html/element/embed/index.html @@ -0,0 +1,120 @@ +--- +title: '<embed>: The Embed External Content element' +slug: Web/HTML/Element/embed +translation_of: Web/HTML/Element/embed +--- +<div>{{HTMLRef}}</div> + +<p>The <strong>HTML <code><embed></code> element</strong> embeds external content at the specified point in the document. This content is provided by an external application or other source of interactive content such as a browser plug-in.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/embed.html", "tabbed-standard")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</div> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> This topic documents only the element that is defined as part of HTML5. It does not address earlier, non-standardized implementation of the element.</p> +</div> + +<p>Keep in mind that most modern browsers have deprecated and removed support for browser plug-ins, so relying upon <code><embed></code> is generally not wise if you want your site to be operable on the average user's browser.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/Guide/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">phrasing content</a>, embedded content, interactive content, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Palpable_content">palpable content</a>.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td>None, it is an {{Glossary("empty element")}}.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>Must have a start tag, and must not have an end tag.</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts embedded content.</td> + </tr> + <tr> + <th scope="row">Implicit ARIA role</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">No corresponding role</a></td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("img")}}, {{ARIARole("none")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLEmbedElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes">Attributes</h2> + +<p>This element's attributes include the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> + +<dl> + <dt>{{htmlattrdef("height")}}</dt> + <dd>The displayed height of the resource, in <a href="https://drafts.csswg.org/css-values/#px">CSS pixels</a>. This must be an absolute value; percentages are <em>not</em> allowed.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>The URL of the resource being embedded.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>The {{glossary("MIME type")}} to use to select the plug-in to instantiate.</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>The displayed width of the resource, in <a href="https://drafts.csswg.org/css-values/#px">CSS pixels</a>. This must be an absolute value; percentages are <em>not</em> allowed.</dd> +</dl> + +<h2 id="Usage_notes">Usage notes</h2> + +<p>You can use the {{cssxref("object-position")}} property to adjust the positioning of the embedded object within the element's frame, and the {{cssxref("object-fit")}} property to control how the object's size is adjusted to fit within the frame.</p> + +<h2 id="Παράδειγμα">Παράδειγμα</h2> + +<pre class="brush: html notranslate"><embed type="video/quicktime" src="movie.mov" width="640" height="480" title="Title of my video"> +</pre> + +<h2 id="Accessibility_concerns">Accessibility concerns</h2> + +<p>Use the <a href="/en-US/docs/Web/HTML/Global_attributes/title"><code>title</code> attribute</a> on an <code>embed</code> element to label its content so that people navigating with assistive technology such as a screen reader can understand what it contains. The title's value should concisely describe the embedded content. Without a title, they may not be able to determine what its embedded content is. This context shift can be confusing and time-consuming, especially if the <code>embed</code> element contains interactive content like video or audio.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-embed-element', '<embed>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics-embedded-content.html#the-embed-element', '<embed>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="note"> +<p><strong>Note</strong>: Prior to version 45, Firefox did not display content of HTML resource, but a generic message saying the content needs a plug-in (see {{Bug("730768")}}).</p> +</div> + +<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("html.elements.embed")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Other elements that are used for embedding content of various types include {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{SVGElement("svg")}}, and {{HTMLElement("video")}}.</li> + <li>Positioning and sizing the embedded content within its frame: {{cssxref("object-position")}} and {{cssxref("object-fit")}}</li> +</ul> diff --git a/files/el/web/html/element/index.html b/files/el/web/html/element/index.html new file mode 100644 index 0000000000..216697c5a6 --- /dev/null +++ b/files/el/web/html/element/index.html @@ -0,0 +1,109 @@ +--- +title: HTML elements reference +slug: Web/HTML/Element +tags: + - Basic + - Element + - HTML + - NeedsTranslation + - Reference + - TopicStub + - Web + - 'l10n:priority' +translation_of: Web/HTML/Element +--- +<div>{{HTMLSidebar("Elements")}}</div> + +<p><span class="seoSummary">This page lists all the {{Glossary("HTML")}} {{Glossary("Element","elements")}}, which are created using {{Glossary("Tag", "tags")}}.</span> They are grouped by function to help you find what you have in mind easily. An alphabetical list of all elements is provided in the sidebar on every element's page as well as this one.</p> + +<div class="note"> +<p>For more information about the basics of HTML elements and attributes, see <a href="/en-US/docs/Web/Guide/HTML/Introduction#Elements_%E2%80%94_the_basic_building_blocks">the section on elements in the Introduction to HTML article</a>.</p> +</div> + +<h2 id="Main_root">Main root</h2> + +<p>{{HTMLRefTable("HTML Root Element")}}</p> + +<h2 id="Document_metadata">Document metadata</h2> + +<p>Metadata contains information about the page. This includes information about styles, scripts and data to help software ({{Glossary("search engine", "search engines")}}, {{Glossary("Browser","browsers")}}, etc.) use and render the page. Metadata for styles and scripts may be defined in the page or link to another file that has the information. </p> + +<p>{{HTMLRefTable("HTML Document Metadata")}}</p> + +<h2 id="Sectioning_root">Sectioning root</h2> + +<p>{{HTMLRefTable("Sectioning Root Element")}}</p> + +<h2 id="Content_sectioning">Content sectioning</h2> + +<p>Content sectioning elements allow you to organize the document content into logical pieces. Use the sectioning elements to create a broad outline for your page content, including header and footer navigation, and heading elements to identify sections of content. </p> + +<p>{{HTMLRefTable("HTML Sections")}}</p> + +<h2 id="Text_content">Text content</h2> + +<p>Use HTML text content elements to organize blocks or sections of content placed between the opening {{HTMLElement("body")}} and closing <code></body></code> tags. Important for {{Glossary("accessibility")}} and {{Glossary("SEO")}}, these elements identify the purpose or structure of that content. </p> + +<p>{{HTMLRefTable("HTML Grouping Content")}}</p> + +<h2 id="Inline_text_semantics">Inline text semantics</h2> + +<p>Use the HTML inline text semantic to define the meaning, structure, or style of a word, line, or any arbitrary piece of text.</p> + +<p>{{HTMLRefTable("HTML Text-Level Semantics")}}</p> + +<h2 id="Image_and_multimedia">Image and multimedia</h2> + +<p>HTML supports various multimedia resources such as images, audio, and video.</p> + +<p>{{HTMLRefTable("multimedia")}}</p> + +<h2 id="Embedded_content">Embedded content</h2> + +<p>In addition to regular multimedia content, HTML can include a variety of other content, even if it's not always easy to interact with.</p> + +<p>{{HTMLRefTable({"include":["HTML embedded content"], "exclude":["multimedia"]})}}</p> + +<h2 id="Scripting">Scripting</h2> + +<p>In order to create dynamic content and Web applications, HTML supports the use of scripting languages, most prominently JavaScript. Certain elements support this capability.</p> + +<p>{{HTMLRefTable("HTML Scripting")}}</p> + +<h2 id="Demarcating_edits">Demarcating edits</h2> + +<p>These elements let you provide indications that specific parts of the text have been altered.</p> + +<p>{{HTMLRefTable("HTML Edits")}}</p> + +<h2 id="Table_content">Table content</h2> + +<p>The elements here are used to create and handle tabular data.</p> + +<p>{{HTMLRefTable("HTML tabular data")}}</p> + +<h2 id="Forms">Forms</h2> + +<p>HTML provides a number of elements which can be used together to create forms which the user can fill out and submit to the Web site or application. There's a great deal of further information about this available in the <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML forms guide</a>.</p> + +<p>{{HTMLRefTable({"include": ["HTML forms"], "exclude":["Deprecated"]})}}</p> + +<h2 id="Interactive_elements">Interactive elements</h2> + +<p>HTML offers a selection of elements which help to create interactive user interface objects.</p> + +<p>{{HTMLRefTable("HTML interactive elements")}}</p> + +<h2 id="Web_Components">Web Components</h2> + +<p>Web Components is an HTML-related technology which makes it possible to, essentially, create and use custom elements as if it were regular HTML. In addition, you can create custom versions of standard HTML elements.</p> + +<p>{{HTMLRefTable({"include":["Web Components"],"exclude":["Deprecated", "Obsolete"]})}}</p> + +<h2 id="Obsolete_and_deprecated_elements">Obsolete and deprecated elements</h2> + +<div class="warning"> +<p><strong>Warning:</strong> These are old HTML elements which are deprecated and should not be used. <strong>You should never use them in new projects, and should replace them in old projects as soon as you can.</strong> They are listed here for informational purposes only.</p> +</div> + +<p>{{HTMLRefTable({"include":["Deprecated","Obsolete"]})}}</p> diff --git a/files/el/web/html/index.html b/files/el/web/html/index.html new file mode 100644 index 0000000000..7f6ddced03 --- /dev/null +++ b/files/el/web/html/index.html @@ -0,0 +1,109 @@ +--- +title: 'HTML: HyperText Markup Language' +slug: Web/HTML +tags: + - HTML + - HTML5 + - Landing + - NeedsTranslation + - TopicStub + - Web + - 'l10n:priority' +translation_of: Web/HTML +--- +<div>{{HTMLSidebar}}</div> + +<p class="summary"><span class="seoSummary"><strong>HTML</strong> (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (<a href="/en-US/docs/Web/CSS">CSS</a>) or functionality/behavior (<a href="/en-US/docs/Web/JavaScript">JavaScript</a>).</span></p> + +<p>"Hypertext" refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.</p> + +<p>HTML uses "markup" to annotate text, images, and other content for display in a Web browser. HTML markup includes special "elements" such as {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("datalist")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("nav")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("video")}}, {{HTMLElement("ul")}}, {{HTMLElement("ol")}}, {{HTMLElement("li")}} and many others.</p> + +<p>An HTML element is set off from other text in a document by "tags", which consist of the element name surrounded by "<code><</code>" and "<code>></code>". The name of an element inside a tag is case insensitive. That is, it can be written in uppercase, lowercase, or a mixture. For example, the <code><title></code> tag can be written as <code><Title></code>, <code><TITLE></code>, or in any other way.</p> + +<p>The articles below can help you learn more about HTML.</p> + +<h2 id="Key_resources">Key resources</h2> + +<dl> + <dt><span>HTML Introduction</span></dt> + <dd>If you're new to Web development, be sure to read our <a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML Basics</a> article to learn what HTML is and how to use it.</dd> + <dt><span>HTML Tutorials</span></dt> + <dd>For articles about how to use HTML, as well as tutorials and complete examples, check out our <a href="/en-US/docs/Learn/HTML">HTML Learning Area</a>.</dd> + <dt><span>HTML Reference</span></dt> + <dd>In our extensive <a href="/en-US/docs/Web/HTML/Reference">HTML reference</a> section, you'll find the details about every element and attribute in HTML.</dd> +</dl> + +<div class="in-page-callout webdev"> +<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3> + +<p>We have put together a course that includes all the essential information you need to work towards your goal.</p> + +<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p> +</div> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Tools" id="Beginners_tutorials">Beginner's tutorials</h2> + +<p>Our <a href="/en-US/docs/Learn/HTML">HTML Learning Area</a> features multiple modules that teach HTML from the ground up — no previous knowledge required.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a></dt> + <dd>This module sets the stage, getting you used to important concepts and syntax such as looking at applying HTML to text, how to create hyperlinks, and how to use HTML to structure a web page.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia and embedding</a></dt> + <dd>This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Tables">HTML tables</a></dt> + <dd>Representing tabular data on a webpage in an understandable, accessible way can be a challenge. This module covers basic table markup, along with more complex features such as implementing captions and summaries.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Forms">HTML forms</a></dt> + <dd>Forms are a very important part of the Web — these provide much of the functionality you need for interacting with websites, e.g. registering and logging in, sending feedback, buying products, and more. This module gets you started with creating the client-side/front-end parts of forms.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Howto">Use HTML to solve common problems</a></dt> + <dd>Provides links to sections of content explaining how to use HTML to solve very common problems when creating a web page: dealing with titles, adding images or videos, emphasizing content, creating a basic form, etc.</dd> +</dl> + +<h2 id="Advanced_topics">Advanced topics</h2> + +<dl> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/CORS_enabled_image">CORS enabled image</a></dt> + <dd class="landingPageList">The {{htmlattrxref("crossorigin", "img")}} attribute, in combination with an appropriate {{glossary("CORS")}} header, allows images defined by the {{HTMLElement("img")}} element to be loaded from foreign origins and used in a {{HTMLElement("canvas")}} element as if they were being loaded from the current origin.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS settings attributes</a></dt> + <dd class="landingPageList">Some HTML elements that provide support for <a href="/en-US/docs/Web/HTTP/CORS">CORS</a>, such as {{HTMLElement("img")}} or {{HTMLElement("video")}}, have a <code>crossorigin</code> attribute (<code>crossOrigin</code> property), which lets you configure the CORS requests for the element's fetched data.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Preloading_content">Preloading content with rel="preload"</a></dt> + <dd class="landingPageList">The <code>preload</code> value of the {{htmlelement("link")}} element's {{htmlattrxref("rel", "link")}} attribute allows you to write declarative fetch requests in your HTML {{htmlelement("head")}}, specifying resources that your pages will need very soon after loading, which you therefore want to start preloading early in the lifecycle of a page load, before the browser's main rendering machinery kicks in. This ensures that they are made available earlier and are less likely to block the page's first render, leading to performance improvements. This article provides a basic guide to how <code>preload</code> works.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Documentation" id="References">References</h2> + +<dl> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Reference">HTML reference</a></dt> + <dd class="landingPageList">HTML consists of <strong>elements</strong>, each of which may be modified by some number of <strong>attributes</strong>. HTML documents are connected to each other with <a href="/en-US/docs/Web/HTML/Link_types">links</a>.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Element">HTML element reference</a></dt> + <dd class="landingPageList">Browse a list of all {{glossary("HTML")}} {{glossary("Element", "elements")}}.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Attributes">HTML attribute reference</a></dt> + <dd class="landingPageList">Elements in HTML have <strong>attributes</strong>. These are additional values that configure the elements or adjust their behavior in various ways.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Global_attributes">Global attributes</a></dt> + <dd class="landingPageList">Global attributes may be specified on all <a href="/en-US/docs/Web/HTML/Element">HTML elements</a>, <em>even those not specified in the standard</em>. This means that any non-standard elements must still permit these attributes, even though those elements make the document HTML5-noncompliant.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Inline_elements">Inline elements</a> and <a href="/en-US/docs/Web/HTML/Block-level_elements">block-level elements</a></dt> + <dd class="landingPageList">HTML elements are usually "inline" or "block-level" elements. An inline element occupies only the space bounded by the tags that define it. A block-level element occupies the entire space of its parent element (container), thereby creating a "block."</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Link_types">Link types</a></dt> + <dd class="landingPageList">In HTML, various link types can be used to establish and define the relationship between two documents. Link elements that types can be set on include {{HTMLElement("a")}}, {{HTMLElement("area")}} and {{HTMLElement("link")}}.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/Media/Formats">Guide to media types and formats on the web</a></dt> + <dd class="landingPageList">The {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements allow you to play audio and video media natively within your content without the need for external software support.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/Guide/HTML/Content_categories">HTML content categories</a></dt> + <dd class="landingPageList">HTML is comprised of several kinds of content, each of which is allowed to be used in certain contexts and is disallowed in others. Similarly, each has a set of other content categories they can contain and elements that can or can't be used in them. This is a guide to these categories.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">Quirks mode and standards mode</a></dt> + <dd class="landingPageList">Historical information on quirks mode and standards mode.</dd> +</dl> + +<h2 class="landingPageList" id="Related_topics">Related topics</h2> + +<dl> + <dt><a href="/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></dt> + <dd>This article covers most of the ways you use CSS to add color to HTML content, listing what parts of HTML documents can be colored and what CSS properties to use when doing so. Includes examples, links to palette-building tools, and more.</dd> +</dl> +</div> +</div> + +<p><span class="alllinks"><a href="/en-US/docs/tag/HTML">View All...</a></span></p> diff --git a/files/el/web/index.html b/files/el/web/index.html new file mode 100644 index 0000000000..c3027373cc --- /dev/null +++ b/files/el/web/index.html @@ -0,0 +1,72 @@ +--- +title: Web technology for developers +slug: Web +tags: + - Landing + - NeedsTranslation + - TopicStub + - Web +translation_of: Web +--- +<p>The open Web presents incredible opportunities for developers. To take full advantage of these technologies, you need to know how to use them. Below you'll find links to our Web technology documentation.</p> + + +<div class="row topicpage-table"> + <div class="section"> + <h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">Documentation for Web developers</h2> + <dl> + <dt> + <a href="/en-US/docs/Web/Reference">Web Developer Reference</a></dt> + <dd> + A list of all references for Web technologies, including those for HTML, CSS, and so on.</dd> + <dt> + <a href="/en-US/docs/Web/Guide">Web Developer Guide</a></dt> + <dd> + The Web Developer Guide provides useful how-to content to help you actually use Web technologies to do what you want or need to do.</dd> + <dt> + <a href="/en-US/docs/Web/Tutorials">Tutorials for Web developers</a></dt> + <dd> + A list of tutorials to take you step-by-step through learning APIs, technologies, or broad topic areas.</dd> + <dt> + <a href="/en-US/docs/Web/Apps">Developing Web applications</a></dt> + <dd> + Documentation for Web application developers; Web apps are true write-once, deploy anywhere apps for mobile, desktop, and Firefox OS.</dd> + <dt> + <a href="/en-US/docs/Code_snippets">Code snippets</a></dt> + <dd> + This is a quick list of useful code snippets (small code samples) available for developers of extensions for the various Mozilla applications. Many of these samples can also be used in <a href="/en-US/docs/XULRunner">XULRunner</a> applications, as well as in actual Mozilla code itself.</dd> + </dl> + <p><span class="alllinks"><a href="/en-US/docs/tag/Web">View All...</a></span></p> + </div> + <div class="section"> + <h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">Web technology references</h2> + <dl> + <dt> + <a href="/en-US/docs/Web/API">Web APIs</a></dt> + <dd> + Reference material for each of the interfaces that comprise the Web's APIs, including the DOM and all of the related APIs and interfaces you can use to build Web content and apps.</dd> + <dt> + <a href="/en-US/docs/Web/HTML">HTML</a></dt> + <dd> + HyperText Markup Language is the language used to describe and define the content of a Web page.</dd> + <dt> + <a href="/en-US/docs/Web/CSS">CSS</a></dt> + <dd> + Cascading Style Sheets are used to describe the appearance of Web content.</dd> + <dt> + <a href="/en-US/docs/SVG">SVG</a></dt> + <dd> + Scalable Vector Graphics let you describe images as sets of vectors and shapes in order to allow them to scale smoothly regardless of the size at which they're drawn.</dd> + <dt> + <a href="/en-US/docs/Web/MathML">MathML</a></dt> + <dd> + The Mathematical Markup Language makes it possible to display complex mathematical equations and syntax.</dd> + </dl> + </div> +</div> + + +<h3 id="Temporary" name="Temporary">Temporary</h3> +<p>The stuff below here is temporary to help keep track of things while organization work is ongoing. Pay it no mind.</p> + +<div>{{ListSubpages}}</div> diff --git a/files/el/web/javascript/index.html b/files/el/web/javascript/index.html new file mode 100644 index 0000000000..fbe8c790b4 --- /dev/null +++ b/files/el/web/javascript/index.html @@ -0,0 +1,112 @@ +--- +title: JavaScript +slug: Web/JavaScript +translation_of: Web/JavaScript +--- +<div>{{JsSidebar}}</div> + +<p class="summary"><strong>Η JavaScript</strong><sup>®</sup> (συντομογραφία <strong>JS</strong>) είναι μια αντικειμενοστρεφής, ελαφριά γλώσσα προγραμματισμού που δεν χρειάζεται μεταγλώτισση (compailation), με <a href="https://en.wikipedia.org/wiki/First-class_functions" title="https://en.wikipedia.org/wiki/First-class_functions">πρώτης κατηγορίας λειτουργίες</a>. Ενώ είναι κυρίως γνωστή ως γλώσσα σενάριου (scripting language) για ιστοσελίδες, ωστόσο <a href="https://en.wikipedia.org/wiki/JavaScript#Uses_outside_web_pages">χρησιμοποιείται σε πολλά περιβάλλοντα χωρίς την χρήση προγράμματος περιήγησης (browser)</a> όπως <a class="external" href="https://nodejs.org/">node.js</a> ή <a href="https://couchdb.apache.org/">Apache CouchDB</a>. Πρόκειται για μια <a href="https://en.wikipedia.org/wiki/Prototype-based_programming">πρωτότυπη</a> , πολλαπλών παραδείγματων scripting γλώσσα προγραμματισμού που είναι δυναμική, και υποστηρίζει αντικειμενοστρεφή, επιβλητικό, και λειτουργικό στυλ του προγραμματισμού. Διαβάστε περισσότερα <a href="/en-US/docs/Web/JavaScript/About_JavaScript">σχετικά με την JavaScript</a>.</p> + +<p>Αυτό το τμήμα της ιστοσελίδας είναι αφιερωμένο στην ίδια τη γλώσσα JavaScript, και όχι στα μέρη που δεν είναι ειδικά για ιστοσελίδες ή άλλα περιβάλλοντα υποδοχής. Για πληροφορίες σχετικά με {{Glossary("API","APIs")}} ειδικά για ιστοσελίδες, παρακαλούμε δείτε τα <a href="/en-US/docs/Web/API">Web APIs</a> και <a href="/en-US/docs/Glossary/DOM">DOM</a>.</p> + +<p>Το πρότυπο της JavaScript ονομάζεται <a href="/en-US/docs/JavaScript/Language_Resources">ECMAScript</a>. Από το 2012, όλοι τα σύγχρονα προγράμματα περιήγησης (browsers) υποστηρίζουν πλήρως την ECMAScript 5.1. Παλαιότεροι φυλλομετρητές υποστηρίζουν τουλάχιστον την ECMAScript 3. Στις 17 Ιουνίου του 2015, δημοσιεύθηκε η 6η κύρια έκδοση της ECMAScript. Επίσημα η έκδοση αυτή ονομάζεται ECMAScript 2015, αλλά συχνά αναφέρεται και ως ECMAScript 6 ή ES6. Το εγχειρίδιο που παρουσιάζεται καλύπτει την ECMAScript 6 ενώ έχει ήδη ξεκινήσει η διαδικασία με τα πρώτα τμήματα της ECMAScript 7.</p> + +<p>Δεν πρέπει να μπερδεύουμε την JavaScript με την <a href="https://en.wikipedia.org/wiki/Java_(programming_language)">Java programming language</a>. Η Java είναι εμπορικά κατοχυρωμένη από την Oracle στις Η.Π.Α. και σε άλλες χώρες. Ωστόσο οι δύο αυτές γλώσσες προγραμματισμού έχουν διαφορετική σύνταξη, φρασεολογία και χρήσεις.</p> + +<div class="column-container"> +<div class="column-half"> +<h2 id="ΜΑΘΗΜΑΤΑ">ΜΑΘΗΜΑΤΑ</h2> + +<p>Μάθε πως να προγραμματίζεις με την JavaScript με οδηγίες και μαθήματα.</p> + +<h3 id="Για_αρχάριους">Για αρχάριους</h3> + +<p>Περιηγηθείτε στην ενότητα <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">Περιοχή μαθημάτων της Javascript</a> αν θέλετε να μάθετε Javascript αλλά δεν έχετε προηγούμενη εμπειρία. Οι πλήρεις ενότητες που παρέχονται είναι οι εξής :</p> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps">JavaScript τα πρώτα βήματα</a></dt> + <dd>Απαντά σε ορισμένα θεμελιώδη ερωτήματα όπως τι είναι το JavaScript, με τι μοιάζει, και τι μπορεί να κάνει καθώς και τα βασικά χαρακτηριστικά της Javascript όπως μεταβλητές, συμβολοσειρές, αριθμούς και πίνακες.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks">Δομικά στοιχεία της JavaScript</a></dt> + <dd>Συνεχίζει την κάλυψη των βασικών θεμελιωδών χαρακτηριστικών της Javascript στρέφοντας την προσοχή μας σε κοινούς τύπους κομματιών κώδικα, όπως οι δηλώσεις συνθήκης (conditional statements), βρόγχους (loops), λειτουργίες (functions) και γεγονότα (events).</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects">Παρουσίαση αντικειμένων (objects) της JavaScript</a></dt> + <dd>Είναι πολύ σημαντικό να κατανοήσετε την αντικειμενοστραφή (object-oriented) φύση της JavaScript, αν θέλετε να προχωρήσετε περισσότερο με τις γνώσεις σας στη γλώσσα και να γράφετε πιο αποδοτικό κώδικα, γι' αυτό παρέχεται αυτή την ενότητα για να σας βοηθήσει.</dd> +</dl> + +<h3 id="Οδηγός_Javascript">Οδηγός Javascript</h3> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide">Οδηγός Javascript</a></dt> + <dd>Ένας αναλυτικότερος οδηγός για την Javascript για εκείνους που έχουν προηγούμενη εμπειρία είτε στην Javascript είτε σε κάποια άλλη γλώσσα προγραματισμού.</dd> +</dl> + +<h3 id="Μεσαίο_επίπεδο"><span style="">Μεσαίο επίπεδο</span></h3> + +<ul> + <li>αυστηρή ισότητα χρησιμοποιώντας ===</li> + <li> χαλαρή ισότητα χρησιμοποιώντας ==</li> + <li>την μέθοδο <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is">Object.is()</a></li> +</ul> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript">Εισαγωγή ξανά στην JavaScript</a></dt> + <dd><span style="font-weight: normal;">Επισκόπηση για εκείνους που νομίζουν ότι γνωρίζουν σχετικά με την Javascript.</span></dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures">Δόμες δεδομένων της JavaScript</a></dt> + <dd>Επισκόπηση των διαθέσιμων δομών δεδομένων στην JavaScript.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness">Συγκρίσεις ισότητας και ομοιότητας</a></dt> + <dd>Η Javascript προσφέρει τρεις διαφορετικές λειτουργίες σύγκρισης αξίας : </dd> +</dl> + +<h3 id="Για_προχωρημένους">Για προχωρημένους</h3> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Κληρονομικότητα και η αλυσίδα των πρωτότυπων</a></dt> + <dd>Επεξήγηση της ευρέως παρεξηγημένης και υποτιμημένης κληρονομικότητας που βασίζεται στα πρωτότυπα.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">Αυστηρή λειτουργία</a></dt> + <dd>Η αυστηρή λειτουργία ορίζει ότι δεν μπορείτε να χρησιμοποιήσετε οποιαδήποτε μεταβλητή πριν την αρχικοποίηση της. Πρόκειται για μια περιορισμένη παραλλαγή του ECMAScript 5 για την ταχύτερη απόδοση και τον ευκολότερο εντοπισμό σφαλμάτων.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a></dt> + <dd>JavaScript typed arrays provide a mechanism for accessing raw binary data.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management">Διαχείρηση Μνήμης</a></dt> + <dd>Κύκλος ζωής μνήμης και συλλογή απορριμάτων στην JavaScript.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/EventLoop">Μοντέλο συγχρονισμού και Βρόγχος Γεγονότων.</a></dt> + <dd>Η JavaScript έχει ένα μοντέλο συγχρονισμού βασισμένο σε έναν "βρόγχο (Λούπα) γεγονότος".</dd> +</dl> +</div> + +<div class="column-half"> +<h2 id="Reference">Reference</h2> + +<p>Browse the complete <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript reference</a> documentation.</p> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">Standard objects</a></dt> + <dd>Εξοικιωθείτε με τα standard built-in αντικείμενα {{jsxref("Array")}}, {{jsxref("Boolean")}}, {{jsxref("Date")}}, {{jsxref("Error")}}, {{jsxref("Function")}}, {{jsxref("JSON")}}, {{jsxref("Math")}}, {{jsxref("Number")}}, {{jsxref("Object")}}, {{jsxref("RegExp")}}, {{jsxref("String")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("WeakMap")}} , {{jsxref("WeakSet")}}, και άλλα.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Operators">Expressions and operators</a></dt> + <dd>Learn more about the behavior of JavaScript's operators {{jsxref("Operators/instanceof", "instanceof")}}, {{jsxref("Operators/typeof", "typeof")}}, {{jsxref("Operators/new", "new")}}, {{jsxref("Operators/this", "this")}}, the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">operator precedence</a>, and more.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Statements">Statements and declarations</a></dt> + <dd>Learn how {{jsxref("Statements/do...while", "do-while")}}, {{jsxref("Statements/for...in", "for-in")}}, {{jsxref("Statements/for...of", "for-of")}}, {{jsxref("Statements/try...catch", "try-catch")}}, {{jsxref("Statements/let", "let")}}, {{jsxref("Statements/var", "var")}}, {{jsxref("Statements/const", "const")}}, {{jsxref("Statements/if...else", "if-else")}}, {{jsxref("Statements/switch", "switch")}}, and more JavaScript statements and keywords work.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Functions</a></dt> + <dd>Learn how to work with JavaScript's functions to develop your applications.</dd> +</dl> + +<h2 id="Tools_resources">Tools & resources</h2> + +<p>Helpful tools while writing and debugging your JavaScript code.</p> + +<dl> + <dt><a href="/en-US/docs/Tools">Firefox Developer Tools</a></dt> + <dd><a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a>, <a href="/en-US/docs/Tools/Web_Console">Web Console</a>, <a href="/en-US/docs/Tools/Profiler">JavaScript Profiler</a>, <a href="/en-US/docs/Tools/Debugger">Debugger</a>, and more.</dd> + <dt><a class="external" href="http://www.getfirebug.com/">Firebug</a></dt> + <dd>Edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Shells">JavaScript Shells</a></dt> + <dd>A JavaScript shell allows you to quickly test snippets of JavaScript code.</dd> + <dt><a href="https://togetherjs.com/">TogetherJS</a></dt> + <dd> + <p>Collaboration made easy.</p> + </dd> + <dt><a href="http://stackoverflow.com/questions/tagged/javascript">Stack Overflow</a></dt> + <dd>Stack Overflow questions tagged with "JavaScript".</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript">JavaScript versions and release notes</a></dt> + <dd>Browse JavaScript's feature history and implementation status.</dd> +</dl> +</div> +</div> diff --git a/files/el/web/javascript/reference/functions/index.html b/files/el/web/javascript/reference/functions/index.html new file mode 100644 index 0000000000..a18367e482 --- /dev/null +++ b/files/el/web/javascript/reference/functions/index.html @@ -0,0 +1,596 @@ +--- +title: Functions +slug: Web/JavaScript/Reference/Functions +tags: + - Constructor + - Function + - Functions + - JavaScript + - NeedsTranslation + - Parameter + - TopicStub + - parameters +translation_of: Web/JavaScript/Reference/Functions +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>Generally speaking, a function is a "subprogram" that can be <em>called</em> by code external (or internal in the case of recursion) to the function. Like the program itself, a function is composed of a sequence of statements called the <em>function body</em>. Values can be <em>passed</em> to a function, and the function will <em>return</em> a value.</p> + +<p>In JavaScript, functions are first-class objects, because they can have properties and methods just like any other object. What distinguishes them from other objects is that functions can be called. In brief, they are <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function">Function</a></code> objects.</p> + +<p>For more examples and explanations, see also the <a href="/en-US/docs/Web/JavaScript/Guide/Functions">JavaScript guide about functions</a>.</p> + +<h2 id="Description">Description</h2> + +<p>Every function in JavaScript is a <code>Function</code> object. See {{jsxref("Function")}} for information on properties and methods of <code>Function</code> objects.</p> + +<p>To return a value other than the default, a function must have a <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a></code> statement that specifies the value to return. A function without a return statement will return a default value. In the case of a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">constructor</a> called with the <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code> keyword, the default value is the value of its <code>this</code> parameter. For all other functions, the default return value is {{jsxref("undefined")}}.</p> + +<p>The parameters of a function call are the function's <em>arguments</em>. Arguments are passed to functions <em>by value</em>. If the function changes the value of an argument, this change is not reflected globally or in the calling function. However, object references are values, too, and they are special: if the function changes the referred object's properties, that change is visible outside the function, as shown in the following example:</p> + +<pre class="brush: js">/* Declare the function 'myFunc' */ +function myFunc(theObject) { + theObject.brand = "Toyota"; +} + +/* + * Declare variable 'mycar'; + * create and initialize a new Object; + * assign reference to it to 'mycar' + */ +var mycar = { + brand: "Honda", + model: "Accord", + year: 1998 +}; + +/* Logs 'Honda' */ +console.log(mycar.brand); + +/* Pass object reference to the function */ +myFunc(mycar); + +/* + * Logs 'Toyota' as the value of the 'brand' property + * of the object, as changed to by the function. + */ +console.log(mycar.brand); +</pre> + +<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code> keyword</a> does not refer to the currently executing function, so you must refer to <code>Function</code> objects by name, even within the function body.</p> + +<h2 id="Defining_functions">Defining functions</h2> + +<p>There are several ways to define functions:</p> + +<h3 id="The_function_declaration_(function_statement)">The function declaration (<code>function</code> statement)</h3> + +<p>There is a special syntax for declaring functions (see <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function statement</a> for details):</p> + +<pre class="syntaxbox">function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<h3 id="The_function_expression_(function_expression)">The function expression (<code>function</code> expression)</h3> + +<p>A function expression is similar to and has the same syntax as a function declaration (see <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a> for details). A function expression may be a part of a larger expression. One can define "named" function expressions (where the name of the expression might be used in the call stack for example) or "anonymous" function expressions. Function expressions are not <em>hoisted</em> onto the beginning of the scope, therefore they cannot be used before they appear in the code.</p> + +<pre class="syntaxbox">function [<em>name</em>]([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name. Can be omitted, in which case the function becomes known as an anonymous function.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<p>Here is an example of an <strong>anonymous</strong> function expression (the <code>name</code> is not used):</p> + +<pre class="brush: js">var myFunction = function() { + statements +}</pre> + +<p>It is also possible to provide a name inside the definition in order to create a <strong>named</strong> function expression:</p> + +<pre class="brush: js">var myFunction = function namedFunction(){ + statements +} +</pre> + +<p>One of the benefits of creating a named function expression is that in case we encountered an error, the stack trace will contain the name of the function, making it easier to find the origin of the error.</p> + +<p>As we can see, both examples do not start with the <code>function</code> keyword. Statements involving functions which do not start with <code>function</code> are function expressions.</p> + +<p>When functions are used only once, a common pattern is an <strong>IIFE (<em>Immediately Invokable Function Expression</em>)</strong>.</p> + +<pre class="brush: js">(function() { + statements +})();</pre> + +<p>IIFE are function expressions that are invoked as soon as the function is declared.</p> + +<h3 id="The_generator_function_declaration_(function*_statement)">The generator function declaration (<code>function*</code> statement)</h3> + +<p>There is a special syntax for generator function declarations (see {{jsxref('Statements/function*', 'function* statement')}} for details):</p> + +<pre class="syntaxbox">function* <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<h3 id="The_generator_function_expression_(function*_expression)">The generator function expression (<code>function*</code> expression)</h3> + +<p>A generator function expression is similar to and has the same syntax as a generator function declaration (see {{jsxref('Operators/function*', 'function* expression')}} for details):</p> + +<pre class="syntaxbox">function* [<em>name</em>]([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name. Can be omitted, in which case the function becomes known as an anonymous function.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<h3 id="The_arrow_function_expression_(>)">The arrow function expression (=>)</h3> + +<p>An arrow function expression has a shorter syntax and lexically binds its <code>this</code> value (see <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a> for details):</p> + +<pre class="syntaxbox">([param[, param]]) => { + statements +} + +param => expression +</pre> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument. Zero arguments need to be indicated with <code>()</code>. For only one argument, the parentheses are not required. (like <code>foo => 1</code>)</dd> + <dt><code>statements or expression</code></dt> + <dd>Multiple statements need to be enclosed in brackets. A single expression requires no brackets. The expression is also the implicit return value of the function.</dd> +</dl> + +<h3 id="The_Function_constructor">The <code>Function</code> constructor</h3> + +<div class="note"> +<p><strong>Note:</strong> Using the <code>Function</code> constructor to create functions is not recommended since it needs the function body as a string which may prevent some JS engine optimizations and can also cause other problems.</p> +</div> + +<p>As all other objects, {{jsxref("Function")}} objects can be created using the <code>new</code> operator:</p> + +<pre class="syntaxbox">new Function (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>) +</pre> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>Zero or more names to be used by the function as formal parameters. Each must be a proper JavaScript identifier.</dd> +</dl> + +<dl> + <dt><code>functionBody</code></dt> + <dd>A string containing the JavaScript statements comprising the function body.</dd> +</dl> + +<p>Invoking the <code>Function</code> constructor as a function (without using the <code>new</code> operator) has the same effect as invoking it as a constructor.</p> + +<h3 id="The_GeneratorFunction_constructor">The <code>GeneratorFunction</code> constructor</h3> + +<div class="note"> +<p><strong>Note:</strong> <code>GeneratorFunction</code> is not a global object, but could be obtained from generator function instance (see {{jsxref("GeneratorFunction")}} for more detail).</p> +</div> + +<div class="note"> +<p><strong>Note:</strong> Using the <code>GeneratorFunction</code> constructor to create functions is not recommended since it needs the function body as a string which may prevent some JS engine optimizations and can also cause other problems.</p> +</div> + +<p>As all other objects, {{jsxref("GeneratorFunction")}} objects can be created using the <code>new</code> operator:</p> + +<pre class="syntaxbox">new GeneratorFunction (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>) +</pre> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>Zero or more names to be used by the function as formal argument names. Each must be a string that conforms to the rules for a valid JavaScript identifier or a list of such strings separated with a comma; for example "<code>x</code>", "<code>theValue</code>", or "<code>a,b</code>".</dd> +</dl> + +<dl> + <dt><code>functionBody</code></dt> + <dd>A string containing the JavaScript statements comprising the function definition.</dd> +</dl> + +<p>Invoking the <code>Function</code> constructor as a function (without using the <code>new</code> operator) has the same effect as invoking it as a constructor.</p> + +<h2 id="Function_parameters">Function parameters</h2> + +<h3 id="Default_parameters">Default parameters</h3> + +<p>Default function parameters allow formal parameters to be initialized with default values if no value or <code>undefined</code> is passed. For more details, see<a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters"> default parameters</a>.</p> + +<h3 id="Rest_parameters">Rest parameters</h3> + +<p>The rest parameter syntax allows representing an indefinite number of arguments as an array. For more details, see <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameters</a>.</p> + +<h2 id="The_arguments_object">The <code>arguments</code> object</h2> + +<p>You can refer to a function's arguments within the function by using the <code>arguments</code> object. See <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>.</p> + +<ul> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a></code>: An array-like object containing the arguments passed to the currently executing function.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/callee">arguments.callee</a></code> {{Deprecated_inline}}: The currently executing function.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/caller">arguments.caller</a></code> {{Obsolete_inline}} : The function that invoked the currently executing function.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/length">arguments.length</a></code>: The number of arguments passed to the function.</li> +</ul> + +<h2 id="Defining_method_functions">Defining method functions</h2> + +<h3 id="Getter_and_setter_functions">Getter and setter functions</h3> + +<p>You can define getters (accessor methods) and setters (mutator methods) on any standard built-in object or user-defined object that supports the addition of new properties. The syntax for defining getters and setters uses the object literal syntax.</p> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a></dt> + <dd> + <p>Binds an object property to a function that will be called when that property is looked up.</p> + </dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a></dt> + <dd>Binds an object property to a function to be called when there is an attempt to set that property.</dd> +</dl> + +<h3 id="Method_definition_syntax">Method definition syntax</h3> + +<p>Starting with ECMAScript 2015, you are able to define own methods in a shorter syntax, similar to the getters and setters. See <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a> for more information.</p> + +<pre class="brush: js">var obj = { + foo() {}, + bar() {} +};</pre> + +<h2 id="Constructor_vs._declaration_vs._expression">Constructor vs. declaration vs. expression</h2> + +<p>Compare the following:</p> + +<p>A function defined with the <code>Function</code> <em>constructor</em> assigned to the variable <code>multiply:</code></p> + +<pre class="brush: js">var multiply = new Function('x', 'y', 'return x * y');</pre> + +<p>A <em>function declaration</em> of a function named <code>multiply</code>:</p> + +<pre class="brush: js">function multiply(x, y) { + return x * y; +} // there is no semicolon here +</pre> + +<p>A <em>function expression</em> of an anonymous function assigned to the variable <code>multiply:</code></p> + +<pre class="brush: js">var multiply = function(x, y) { + return x * y; +}; +</pre> + +<p>A <em>function expression</em> of a function named <code>func_name</code> assigned to the variable <code>multiply:</code></p> + +<pre class="brush: js">var multiply = function func_name(x, y) { + return x * y; +}; +</pre> + +<h3 id="Differences">Differences</h3> + +<p>All do approximately the same thing, with a few subtle differences:</p> + +<p>There is a distinction between the function name and the variable the function is assigned to. The function name cannot be changed, while the variable the function is assigned to can be reassigned. The function name can be used only within the function's body. Attempting to use it outside the function's body results in an error (or <code>undefined</code> if the function name was previously declared via a <code>var</code> statement). For example:</p> + +<pre class="brush: js">var y = function x() {}; +alert(x); // throws an error +</pre> + +<p>The function name also appears when the function is serialized via <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/toString"><code>Function</code>'s toString method</a>.</p> + +<p>On the other hand, the variable the function is assigned to is limited only by its scope, which is guaranteed to include the scope in which the function is declared.</p> + +<p>As the 4th example shows, the function name can be different from the variable the function is assigned to. They have no relation to each other. A function declaration also creates a variable with the same name as the function name. Thus, unlike those defined by function expressions, functions defined by function declarations can be accessed by their name in the scope they were defined in:</p> + +<p>A function defined by '<code>new Function'</code> does not have a function name. However, in the <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> JavaScript engine, the serialized form of the function shows as if it has the name "anonymous". For example, <code>alert(new Function())</code> outputs:</p> + +<pre class="brush: js">function anonymous() { +} +</pre> + +<p>Since the function actually does not have a name, <code>anonymous</code> is not a variable that can be accessed within the function. For example, the following would result in an error:</p> + +<pre class="brush: js">var foo = new Function("alert(anonymous);"); +foo(); +</pre> + +<p>Unlike functions defined by function expressions or by the <code>Function</code> constructor, a function defined by a function declaration can be used before the function declaration itself. For example:</p> + +<pre class="brush: js">foo(); // alerts FOO! +function foo() { + alert('FOO!'); +} +</pre> + +<p>A function defined by a function expression or by a function declaration inherits the current scope. That is, the function forms a closure. On the other hand, a function defined by a <code>Function</code> constructor does not inherit any scope other than the global scope (which all functions inherit).</p> + +<pre class="brush: js">/* + * Declare and initialize a variable 'p' (global) + * and a function 'myFunc' (to change the scope) inside which + * declare a varible with same name 'p' (current) and + * define three functions using three different ways:- + * 1. function declaration + * 2. function expression + * 3. function constructor + * each of which will log 'p' + */ +var p = 5; +function myFunc() { + var p = 9; + + function decl() { + console.log(p); + } + var expr = function() { + console.log(p); + }; + var cons = new Function('\tconsole.log(p);'); + + decl(); + expr(); + cons(); +} +myFunc(); + +/* + * Logs:- + * 9 - for 'decl' by function declaration (current scope) + * 9 - for 'expr' by function expression (current scope) + * 5 - for 'cons' by Function constructor (global scope) + */ +</pre> + +<p>Functions defined by function expressions and function declarations are parsed only once, while those defined by the <code>Function</code> constructor are not. That is, the function body string passed to the <code>Function</code> constructor must be parsed each and every time the constructor is called. Although a function expression creates a closure every time, the function body is not reparsed, so function expressions are still faster than "<code>new Function(...)</code>". Therefore the <code>Function</code> constructor should generally be avoided whenever possible.</p> + +<p>It should be noted, however, that function expressions and function declarations nested within the function generated by parsing a <code>Function constructor</code> 's string aren't parsed repeatedly. For example:</p> + +<pre class="brush: js">var foo = (new Function("var bar = \'FOO!\';\nreturn(function() {\n\talert(bar);\n});"))(); +foo(); // The segment "function() {\n\talert(bar);\n}" of the function body string is not re-parsed.</pre> + +<p>A function declaration is very easily (and often unintentionally) turned into a function expression. A function declaration ceases to be one when it either:</p> + +<ul> + <li>becomes part of an expression</li> + <li>is no longer a "source element" of a function or the script itself. A "source element" is a non-nested statement in the script or a function body:</li> +</ul> + +<pre class="brush: js">var x = 0; // source element +if (x === 0) { // source element + x = 10; // not a source element + function boo() {} // not a source element +} +function foo() { // source element + var y = 20; // source element + function bar() {} // source element + while (y === 10) { // source element + function blah() {} // not a source element + y++; // not a source element + } +} +</pre> + +<h3 id="Examples">Examples</h3> + +<pre class="brush: js">// function declaration +function foo() {} + +// function expression +(function bar() {}) + +// function expression +x = function hello() {} + + +if (x) { + // function expression + function world() {} +} + + +// function declaration +function a() { + // function declaration + function b() {} + if (0) { + // function expression + function c() {} + } +} +</pre> + +<h2 id="Block-level_functions">Block-level functions</h2> + +<p>In <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>, starting with ES2015, functions inside blocks are now scoped to that block. Prior to ES2015, block-level functions were forbidden in strict mode.</p> + +<pre class="brush: js">'use strict'; + +function f() { + return 1; +} + +{ + function f() { + return 2; + } +} + +f() === 1; // true + +// f() === 2 in non-strict mode +</pre> + +<h3 id="Block-level_functions_in_non-strict_code">Block-level functions in non-strict code</h3> + +<p>In a word: Don't.</p> + +<p>In non-strict code, function declarations inside blocks behave strangely. For example:</p> + +<pre class="brush: js">if (shouldDefineZero) { + function zero() { // DANGER: compatibility risk + console.log("This is zero."); + } +} +</pre> + +<p>ES2015 says that if <code>shouldDefineZero</code> is false, then <code>zero</code> should never be defined, since the block never executes. However, it's a new part of the standard. Historically, this was left unspecified, and some browsers would define <code>zero</code> whether the block executed or not.</p> + +<p>In <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>, all browsers that support ES2015 handle this the same way: <code>zero</code> is defined only if <code>shouldDefineZero</code> is true, and only in the scope of the <code>if</code>-block.</p> + +<p>A safer way to define functions conditionally is to assign a function expression to a variable:</p> + +<pre class="brush: js">var zero; +if (shouldDefineZero) { + zero = function() { + console.log("This is zero."); + }; +} +</pre> + +<h2 id="Examples_2">Examples</h2> + +<h3 id="Returning_a_formatted_number">Returning a formatted number</h3> + +<p>The following function returns a string containing the formatted representation of a number padded with leading zeros.</p> + +<pre class="brush: js">// This function returns a string padded with leading zeros +function padZeros(num, totalLen) { + var numStr = num.toString(); // Initialize return value as string + var numZeros = totalLen - numStr.length; // Calculate no. of zeros + for (var i = 1; i <= numZeros; i++) { + numStr = "0" + numStr; + } + return numStr; +} +</pre> + +<p>The following statements call the padZeros function.</p> + +<pre class="brush: js">var result; +result = padZeros(42,4); // returns "0042" +result = padZeros(42,2); // returns "42" +result = padZeros(5,4); // returns "0005" +</pre> + +<h3 id="Determining_whether_a_function_exists">Determining whether a function exists</h3> + +<p>You can determine whether a function exists by using the <code>typeof</code> operator. In the following example, a test is performed to determine if the <code>window</code> object has a property called <code>noFunc</code> that is a function. If so, it is used; otherwise, some other action is taken.</p> + +<pre class="brush: js"> if ('function' === typeof window.noFunc) { + // use noFunc() + } else { + // do something else + } +</pre> + +<p>Note that in the <code>if</code> test, a reference to <code>noFunc</code> is used—there are no brackets "()" after the function name so the actual function is not called.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-13', 'Function Definition')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New: Arrow functions, Generator functions, default parameters, rest parameters.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.functions")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Statements/function", "function statement")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> + <li>{{jsxref("Functions/Arrow_functions", "Arrow functions")}}</li> + <li>{{jsxref("Functions/Default_parameters", "Default parameters")}}</li> + <li>{{jsxref("Functions/rest_parameters", "Rest parameters")}}</li> + <li>{{jsxref("Functions/arguments", "Arguments object")}}</li> + <li>{{jsxref("Functions/get", "getter")}}</li> + <li>{{jsxref("Functions/set", "setter")}}</li> + <li>{{jsxref("Functions/Method_definitions", "Method definitions")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope">Functions and function scope</a></li> +</ul> diff --git a/files/el/web/javascript/reference/functions/προεπιλεγμένες_παράμετροι/index.html b/files/el/web/javascript/reference/functions/προεπιλεγμένες_παράμετροι/index.html new file mode 100644 index 0000000000..1802637dce --- /dev/null +++ b/files/el/web/javascript/reference/functions/προεπιλεγμένες_παράμετροι/index.html @@ -0,0 +1,221 @@ +--- +title: Προεπιλεγμένες παράμετροι +slug: Web/JavaScript/Reference/Functions/Προεπιλεγμένες_παράμετροι +tags: + - ECMAScript 2015 + - JavaScript + - Συναρτήσεις +translation_of: Web/JavaScript/Reference/Functions/Default_parameters +--- +<div>{{jsSidebar("Συναρτήσεις")}}</div> + +<p>Οι<strong> προεπιλεγμένες παράμετροι συναρτήσεων</strong> επιτρέπουν την αρχικοποίηση των παραμέτρων με προεπιλεγμένες τιμες, αν η τιμή λείπει ή ειναι τύπου <code>undefined</code>.</p> + +<div>{{EmbedInteractiveExample("pages/js/functions-default.html")}}</div> + +<p class="hidden">Ο πηγαίος κώδικας αυτού του διαδραστικού παραδείγματος είναι αποθηκευμένος σε ενα GitHub αποθετήριο. Αν θα θέλατε να συμβάλλετε στο έργο των διαδραστικών παραδειγμάτων, παρακαλώ κάντε clone το <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> και στείλτε μας ενα pull request.</p> + +<h2 id="Σύνταξη">Σύνταξη</h2> + +<pre class="syntaxbox">function [<em>όνομα</em>]([<em>παράμ1</em>[ = προεπιλεγμένηΤιμή1 ][, ..., <em>παράμN</em>[ = προεπιλεγμένηΤιμήN ]]]) {<em>δηλώσεις</em> +} +</pre> + +<h2 id="Περιγραφή">Περιγραφή</h2> + +<p>Στην JavaScript, οι προεπιλεγμένες παράμετροι των συναρτήσεων ειναι τύπου <code>{{jsxref("undefined")}}</code>. Ωστόσο, σε κάποιες καταστάσεις μπορεί να χρειαστεί να θέσουμε μια διαφορετική προεπιλεγμένη τιμή. Σε αυτή την περίπτωση μπορούν βοηθήσουν οι προεπιλεγμένες παράμετροι.</p> + +<p>Στο παρελθόν, η γενική στρατηγική ορισμού προεπιλεγμένων τιμών, ηταν ο έλεγχος των τιμών στο σώμα την συνάρτησης και η εκχώρηση τιμής στην περίπτωση που ήταν τύπου <code>undefined</code>. Αν στο επόμενο παράδειγμα, δεν δοθεί τιμή για την <code>b</code> οταν κλήθει η συναρτηση, η τιμή της θα ήταν <code>undefined</code> κατα την εκτίμηση του <code>a*b</code> και η κλήση της <code>multiply</code> θα επέστρεφε <code>NaN</code>. Ωστόσο, αυτό αποτρέπεται στην δεύτερη γραμμή του παραδείγματος:</p> + +<pre class="brush: js">function multiply(a, b) { + b = (typeof b !== 'undefined') ? b : 1; + return a * b; +} + +multiply(5, 2); // 10 +multiply(5, 1); // 5 +multiply(5); // 5 +</pre> + +<p>Με τις προεπιλεγμένες παραμέτρους στην ES2015, ο έλεγχος στο σώμα της συνάρτησης δεν ειναι πια απαραίτητος. Τωρα μπορούμε απλα να θέσουμε <code>1</code> ως προεπιλεγμένη τιμή της <code>b</code> στην κεφαλή της συνάρτησης:</p> + +<pre class="brush: js">function multiply(a, b = 1) { + return a * b; +} + +multiply(5, 2); // 10 +multiply(5, 1); // 5 +multiply(5); // 5 +</pre> + +<h2 id="Παραδείγματα">Παραδείγματα</h2> + +<h3 id="Περνώντας_undefined_σε_αντίθεση_με_άλλες_falsy_τιμες">Περνώντας <code>undefined</code> σε αντίθεση με άλλες falsy τιμες</h3> + +<p>Στην δεύτερη κλήση εδω, ακόμα και αν η δεύτερη παράμετρος είναι ρητά <code>undefined</code> (αλλά οχι <code>null</code> ή άλλες <em>falsy τιμές</em>) κατα την κλήση, η τιμή της παραμέτρου <code>num</code> είναι η προεπιλεγμένη.</p> + +<pre class="brush: js">function test(num = 1) { + console.log(typeof num); +} + +test(); // 'number' (η num παίρνει τιμή 1) +test(undefined); // 'number' (η num επίσης παίρνει τιμή 1) + +// test with other falsy values: +test(''); // 'string' (η num παίρνει τιμή '') +test(null); // 'object' (η num παίρνει τιμή null) +</pre> + +<h3 id="Εκτίμηση_κατα_την_κλήση">Εκτίμηση κατα την κλήση</h3> + +<p>Η προεπιλεγμένη παράμετρος εκτιμάται κατα την κλήση, οπότε αντίθετα με την Python για παραδειγμα, ενα νεο αντικείμενο δημιουργείται καθε φορά που καλείται η συνάρτηση.</p> + +<pre class="brush: js">function append(value, array = []) { + array.push(value); + return array; +} + +append(1); //[1] +append(2); //[2], όχι [1, 2] + +</pre> + +<p>Αυτό εφαρμόζεται ακομα και στις συναρτήσεις και τις μεταβλητές:</p> + +<pre class="brush: js">function callSomething(thing = something()) { + return thing; +} + +function something() { + return 'sth'; +} + +callSomething(); //sth</pre> + +<h3 id="Οι_προεπιλεγμένες_παράμετροι_ειναι_διαθέσιμες_σε_επόμενες_προεπιλεγμένες_παραμέτρους">Οι προεπιλεγμένες παράμετροι ειναι διαθέσιμες σε επόμενες προεπιλεγμένες παραμέτρους</h3> + +<p>Οι παράμετροι που εχουν ήδη συναντηθεί είναι διαθέσιμες και στις επόμενες προεπιλεγμένες παραμέτρους:</p> + +<pre class="brush: js">function singularAutoPlural(singular, plural = singular + 's', + rallyingCry = plural + ' ATTACK!!!') { + return [singular, plural, rallyingCry]; +} + +//["Gecko","Geckos", "Geckos ATTACK!!!"] +singularAutoPlural('Gecko'); + +//["Fox","Foxes", "Foxes ATTACK!!!"] +singularAutoPlural('Fox', 'Foxes'); + +//["Deer", "Deer", "Deer ... change."] +singularAutoPlural('Deer', 'Deer', 'Deer peaceably and respectfully \ + petition the government for positive change.') +</pre> + +<p>Αυτή η λειτουργικότητα υπολογίζεται σταδιακά. Το επόμενο παράδειγμα επιδεικνύει το πως χειρίζονται άλλες ακραίες περιπτώσεις.</p> + +<pre class="brush: js">function go() { + return ':P'; +} + +function withDefaults(a, b = 5, c = b, d = go(), e = this, + f = arguments, g = this.value) { + return [a, b, c, d, e, f, g]; +} + +function withoutDefaults(a, b, c, d, e, f, g) { + switch (arguments.length) { + case 0: + a; + case 1: + b = 5; + case 2: + c = b; + case 3: + d = go(); + case 4: + e = this; + case 5: + f = arguments; + case 6: + g = this.value; + default: + } + return [a, b, c, d, e, f, g]; +} + +withDefaults.call({value: '=^_^='}); +// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="] + + +withoutDefaults.call({value: '=^_^='}); +// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="] +</pre> + +<h3 id="Συναρτήσεις_που_ορίζονται_μεσα_στο_σώμα_της_συνάρτησης">Συναρτήσεις που ορίζονται μεσα στο σώμα της συνάρτησης</h3> + +<p>Εισάχθηκε στο Gecko 33 {{geckoRelease(33)}}. Οι συναρτήσεις που ορίζονται στο σώμα της συνάρτησης δεν μπορούν να αναφέρονται στίς προεπιλεγμένες παραμέτρους και εμφανίζουν ενα {{jsxref("ReferenceError")}} (αυτή τη στιγμή {{jsxref("TypeError")}} στο SpiderMonkey, βλέπε {{bug(1022967)}}). Οι προεπιλεγμένες παράμετροι εκτελούνται παντα πρώτες και στην συνέχεια εκτελούνται οι δηλώσεις που βρίσκονται στο σώμα της συνάρτησης.</p> + +<pre class="brush: js">// Doesn't work! Throws ReferenceError. +function f(a = go()) { + function go() { return ':P'; } +} +</pre> + +<h3 id="Παράμετροι_χωρίς_προεπιλεγμένες_τιμες_μετα_τις_προεπιλεγμενες_παραμέτρους">Παράμετροι χωρίς προεπιλεγμένες τιμες μετα τις προεπιλεγμενες παραμέτρους</h3> + +<p>Πριν απο το Gecko 26 {{geckoRelease(26)}}, ο ακόλουθος κώδικας προκαλούσε ένα {{jsxref("SyntaxError")}}. Αυτό επιδιορθώθηκε στο {{bug(777060)}} και έχει την αναμενόμενη λειτουργία σε επόμενες εκδόσεις. Οι παράμετροι ορίζονται ακόμα απο τα αριστερά στα δεξιά, αντικαθιστώντας προεπιλεγμένες παραμέτρους ακόμα και αν υπάρχουν επόμενες παράμετροι χωρίς προεπιλεγμένες τιμές.</p> + +<pre class="brush: js">function f(x = 1, y) { + return [x, y]; +} + +f(); // [1, undefined] +f(2); // [2, undefined] +</pre> + +<h3 id="Αποδόμηση_παραμέτρων_στον_ορισμό_προεπιλεγμένων_τιμών">Αποδόμηση παραμέτρων στον ορισμό προεπιλεγμένων τιμών</h3> + +<p>Στον ορισμό προεπιλεγμένων παραμέτρων μπορεί να χρησιμοποιηθεί <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">αποδομημένη ανάθεση</a>:</p> + +<pre class="brush: js">function f([x, y] = [1, 2], {z: z} = {z: 3}) { + return x + y + z; +} + +f(); // 6</pre> + +<h2 id="Προδιαγραφές">Προδιαγραφές</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Προδιαγραφή</th> + <th scope="col">Κατάσταση</th> + <th scope="col">Σχόλιο</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-function-definitions', 'Function Definitions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Αρχικός ορισμός.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Συμβατότητα_περιηγητών">Συμβατότητα περιηγητών</h2> + +<div> +<div class="hidden">Ο πίνακας συμβατότητας σε αυτή τη σελίδα παράγεται απο δομημένα δεδομένα. Αν θα θέλατε να συμβάλλετε στα δεδομένα, παρακαλώ κάντε checkout το <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> και στείλτε μας ένα pull request.</div> + +<p>{{Compat("javascript.functions.default_parameters")}}</p> +</div> + +<h2 id="Δείτε_επίσης">Δείτε επίσης</h2> + +<ul> + <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values" rel="external" title="http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values">Αρχική πρόταση στο ecmascript.org</a></li> +</ul> diff --git a/files/el/web/javascript/reference/global_objects/index.html b/files/el/web/javascript/reference/global_objects/index.html new file mode 100644 index 0000000000..f59e3e8592 --- /dev/null +++ b/files/el/web/javascript/reference/global_objects/index.html @@ -0,0 +1,193 @@ +--- +title: Standard built-in objects +slug: Web/JavaScript/Reference/Global_Objects +tags: + - JavaScript + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects +--- +<div>{{jsSidebar("Objects")}}</div> + +<p>This chapter documents all of JavaScript's standard, built-in objects, including their methods and properties.</p> + +<p>The term "global objects" (or standard built-in objects) here is not to be confused with the <strong>global object</strong>. Here, global objects refer to <strong>objects in the global scope</strong>. The <strong>global object</strong> itself can be accessed using the {{jsxref("Operators/this", "this")}} operator in the global scope (but only if ECMAScript 5 strict mode is not used; in that case it returns {{jsxref("undefined")}}). In fact, the global scope <strong>consists of</strong> the properties of the global object, including inherited properties, if any.</p> + +<p>Other objects in the global scope are either <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">created by the user script</a> or provided by the host application. The host objects available in browser contexts are documented in the <a href="/en-US/docs/Web/API/Reference">API reference</a>. For more information about the distinction between the <a href="/en-US/docs/DOM/DOM_Reference">DOM</a> and core <a href="/en-US/docs/Web/JavaScript">JavaScript</a>, see <a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript technologies overview</a>.</p> + +<h2 id="Standard_objects_by_category">Standard objects by category</h2> + +<h3 id="Value_properties">Value properties</h3> + +<p>These global properties return a simple value; they have no properties or methods.</p> + +<ul> + <li>{{jsxref("Infinity")}}</li> + <li>{{jsxref("NaN")}}</li> + <li>{{jsxref("undefined")}}</li> + <li>{{jsxref("null")}} literal</li> +</ul> + +<h3 id="Function_properties">Function properties</h3> + +<p>These global functions—functions which are called globally rather than on an object—directly return their results to the caller.</p> + +<ul> + <li>{{jsxref("Global_Objects/eval", "eval()")}}</li> + <li>{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}</li> + <li>{{jsxref("Global_Objects/isFinite", "isFinite()")}}</li> + <li>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</li> + <li>{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}</li> + <li>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</li> + <li>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</li> + <li>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</li> + <li>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</li> + <li>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</li> + <li>{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}</li> + <li>{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}</li> +</ul> + +<h3 id="Fundamental_objects">Fundamental objects</h3> + +<p>These are the fundamental, basic objects upon which all other objects are based. This includes objects that represent general objects, functions, and errors.</p> + +<ul> + <li>{{jsxref("Object")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Boolean")}}</li> + <li>{{jsxref("Symbol")}}</li> + <li>{{jsxref("Error")}}</li> + <li>{{jsxref("EvalError")}}</li> + <li>{{jsxref("InternalError")}}</li> + <li>{{jsxref("RangeError")}}</li> + <li>{{jsxref("ReferenceError")}}</li> + <li>{{jsxref("SyntaxError")}}</li> + <li>{{jsxref("TypeError")}}</li> + <li>{{jsxref("URIError")}}</li> +</ul> + +<h3 id="Numbers_and_dates">Numbers and dates</h3> + +<p>These are the base objects representing numbers, dates, and mathematical calculations.</p> + +<ul> + <li>{{jsxref("Number")}}</li> + <li>{{jsxref("Math")}}</li> + <li>{{jsxref("Date")}}</li> +</ul> + +<h3 id="Text_processing">Text processing</h3> + +<p>These objects represent strings and support manipulating them.</p> + +<ul> + <li>{{jsxref("String")}}</li> + <li>{{jsxref("RegExp")}}</li> +</ul> + +<h3 id="Indexed_collections">Indexed collections</h3> + +<p>These objects represent collections of data which are ordered by an index value. This includes (typed) arrays and array-like constructs.</p> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Int8Array")}}</li> + <li>{{jsxref("Uint8Array")}}</li> + <li>{{jsxref("Uint8ClampedArray")}}</li> + <li>{{jsxref("Int16Array")}}</li> + <li>{{jsxref("Uint16Array")}}</li> + <li>{{jsxref("Int32Array")}}</li> + <li>{{jsxref("Uint32Array")}}</li> + <li>{{jsxref("Float32Array")}}</li> + <li>{{jsxref("Float64Array")}}</li> +</ul> + +<h3 id="Keyed_collections">Keyed collections</h3> + +<p>These objects represent collections which use keys; these contain elements which are iterable in the order of insertion.</p> + +<ul> + <li>{{jsxref("Map")}}</li> + <li>{{jsxref("Set")}}</li> + <li>{{jsxref("WeakMap")}}</li> + <li>{{jsxref("WeakSet")}}</li> +</ul> + +<h3 id="Vector_collections">Vector collections</h3> + +<p>{{Glossary("SIMD")}} vector data types are objects where data is arranged into lanes.</p> + +<ul> + <li>{{jsxref("SIMD")}} {{experimental_inline}}</li> + <li>{{jsxref("Float32x4", "SIMD.Float32x4")}} {{experimental_inline}}</li> + <li>{{jsxref("Float64x2", "SIMD.Float64x2")}} {{experimental_inline}}</li> + <li>{{jsxref("Int8x16", "SIMD.Int8x16")}} {{experimental_inline}}</li> + <li>{{jsxref("Int16x8", "SIMD.Int16x8")}} {{experimental_inline}}</li> + <li>{{jsxref("Int32x4", "SIMD.Int32x4")}} {{experimental_inline}}</li> + <li>{{jsxref("Uint8x16", "SIMD.Uint8x16")}} {{experimental_inline}}</li> + <li>{{jsxref("Uint16x8", "SIMD.Uint16x8")}} {{experimental_inline}}</li> + <li>{{jsxref("Uint32x4", "SIMD.Uint32x4")}} {{experimental_inline}}</li> + <li>{{jsxref("Bool8x16", "SIMD.Bool8x16")}} {{experimental_inline}}</li> + <li>{{jsxref("Bool16x8", "SIMD.Bool16x8")}} {{experimental_inline}}</li> + <li>{{jsxref("Bool32x4", "SIMD.Bool32x4")}} {{experimental_inline}}</li> + <li>{{jsxref("Bool64x2", "SIMD.Bool64x2")}} {{experimental_inline}}</li> +</ul> + +<h3 id="Structured_data">Structured data</h3> + +<p>These objects represent and interact with structured data buffers and data coded using JavaScript Object Notation (JSON).</p> + +<ul> + <li>{{jsxref("ArrayBuffer")}}</li> + <li>{{jsxref("SharedArrayBuffer")}} {{experimental_inline}}</li> + <li>{{jsxref("Atomics")}} {{experimental_inline}}</li> + <li>{{jsxref("DataView")}}</li> + <li>{{jsxref("JSON")}}</li> +</ul> + +<h3 id="Control_abstraction_objects">Control abstraction objects</h3> + +<ul> + <li>{{jsxref("Promise")}}</li> + <li>{{jsxref("Generator")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> + <li>{{experimental_inline}} {{jsxref("AsyncFunction")}}</li> +</ul> + +<h3 id="Reflection">Reflection</h3> + +<ul> + <li>{{jsxref("Reflect")}}</li> + <li>{{jsxref("Proxy")}}</li> +</ul> + +<h3 id="Internationalization">Internationalization</h3> + +<p>Additions to the ECMAScript core for language-sensitive functionalities.</p> + +<ul> + <li>{{jsxref("Intl")}}</li> + <li>{{jsxref("Global_Objects/Collator", "Intl.Collator")}}</li> + <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li> + <li>{{jsxref("Global_Objects/NumberFormat", "Intl.NumberFormat")}}</li> +</ul> + +<h3 id="WebAssembly">WebAssembly</h3> + +<ul> + <li>{{jsxref("WebAssembly")}}</li> + <li>{{jsxref("WebAssembly.Module")}}</li> + <li>{{jsxref("WebAssembly.Instance")}}</li> + <li>{{jsxref("WebAssembly.Memory")}}</li> + <li>{{jsxref("WebAssembly.Table")}}</li> + <li>{{jsxref("WebAssembly.CompileError")}}</li> + <li>{{jsxref("WebAssembly.LinkError")}}</li> + <li>{{jsxref("WebAssembly.RuntimeError")}}</li> +</ul> + +<h3 id="Other">Other</h3> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a></code></li> +</ul> diff --git a/files/el/web/javascript/reference/index.html b/files/el/web/javascript/reference/index.html new file mode 100644 index 0000000000..4205970b93 --- /dev/null +++ b/files/el/web/javascript/reference/index.html @@ -0,0 +1,51 @@ +--- +title: JavaScript reference +slug: Web/JavaScript/Reference +tags: + - JavaScript + - NeedsTranslation + - TopicStub + - 'l10n:priority' +translation_of: Web/JavaScript/Reference +--- +<div>{{JsSidebar}}</div> + +<p>This part of the JavaScript section on MDN serves as a repository of facts about the JavaScript language. Read more <a href="/en-US/docs/Web/JavaScript/Reference/About">about this reference</a>.</p> + +<h2 id="Global_Objects">Global Objects</h2> + +<p>This chapter documents all the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">JavaScript standard built-in objects</a>, along with their methods and properties.</p> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects', 'Standard_objects_by_category')}}</div> + +<h2 id="Statements">Statements</h2> + +<p>This chapter documents all the <a href="/en-US/docs/Web/JavaScript/Reference/Statements">JavaScript statements and declarations</a>.</p> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Statements', 'Statements_and_declarations_by_category')}}</div> + +<h2 id="Expressions_and_operators">Expressions and operators</h2> + +<p>This chapter documents all the <a href="/en-US/docs/Web/JavaScript/Reference/Operators">JavaScript expressions and operators</a>.</p> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Operators', 'Expressions_and_operators_by_category')}}</div> + +<h2 id="Functions">Functions</h2> + +<p>This chapter documents how to work with <a href="/en-US/docs/Web/JavaScript/Reference/Functions">JavaScript functions</a> to develop your applications.</p> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments</code></a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">Default parameters</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest parameters</a></li> +</ul> + +<h2 id="Additional_reference_pages">Additional reference pages</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Data_structures">Data types and data structures</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">Strict mode</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features">Deprecated features</a></li> +</ul> diff --git a/files/el/web/javascript/reference/operators/comma_operator/index.html b/files/el/web/javascript/reference/operators/comma_operator/index.html new file mode 100644 index 0000000000..97e396cc1e --- /dev/null +++ b/files/el/web/javascript/reference/operators/comma_operator/index.html @@ -0,0 +1,154 @@ +--- +title: Τελεστής Κόμμα +slug: Web/JavaScript/Reference/Operators/Comma_Operator +tags: + - JavaScript + - Κόμμα + - Τελεστής + - Τελεστής Κόμμα +translation_of: Web/JavaScript/Reference/Operators/Comma_Operator +--- +<div>{{jsSidebar("Τελεστές")}}</div> + +<p>Ο<strong> τελεστής κόμμα</strong> αποτιμά κάθε τελεστέο του (από τα αριστερά προς τα δεξιά) και επιστρέφει τη τιμή του τελευταίου τελεστέου.</p> + +<h2 id="Σύνταξη">Σύνταξη</h2> + +<pre class="syntaxbox"><em>έκφραση1</em>, <em>έκφραση2, έκφραση3...</em></pre> + +<h2 id="Παράμετροι">Παράμετροι</h2> + +<dl> + <dt><code>έκφραση1</code>, <code>έκφραση2</code>, <code>έκφραση3...</code></dt> + <dd>Οποιαδήποτε έκφραση.</dd> +</dl> + +<h2 id="Περιγραφή">Περιγραφή</h2> + +<p>Μπορείτε να χρησιμοποιήσετε τον τελεστή κόμμα όποτε θέλετε να συμπεριλάβετε πολλαπλές εκφράσεις σε σημείο που απαιτείται μία έκφραση. Η πιο κοινή χρήση αυτού του τελεστή είναι η προμήθεια πολλαπλών παραμέτρων σε έναν <code>for</code> βρόχο.</p> + +<h2 id="Παραδείγματα">Παραδείγματα</h2> + +<p>Αν <code>a</code> είναι ένας διδιάστατος πίνακας με 10 στοιχεία σε κάθε πλευρά, ο ακόλουθος κώδικας χρησιμοποιεί τον τελεστή κόμμα για να αυξήσει δύο μεταβλητές με την μία.</p> + +<p>Ο ακόλουθος κώδικας εκτυπώνει τις τιμές των διαγώνιων στοιχείων του πίνακα:</p> + +<pre class="brush:js;highlight:[1]">for (var i = 0, j = 9; i <= 9; i++, j--) + console.log('a[' + i + '][' + j + '] = ' + a[i][j]);</pre> + +<p>Παρατηρήστε ότι το κόμμα στις αναθέσεις όπως στην <code>var</code> δήλωση μπορεί να μην έχει το κανονικό αποτέλεσμα του τελεστή κόμμα επειδή δεν υπάρχει μέσα σε έκφραση. Στο ακόλουθο παράδειγμα, το <code>a</code> παίρνει την τιμή του <code>b = 3</code> (η οποία είναι 3), αλλά η έκφραση <code>c = 4</code> επίσης αποτιμάται και το αποτέλεσμά της επιστρέφει στην κονσόλα (δηλαδή, 4). Αυτό οφείλεται στην <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">προτεραιότητα τελεστών και προσεταιριστικότητα</a>.</p> + +<pre class="brush: js">// Παρατηρήστε οτι τα παρακάτω δημιουργούν globals το οποίο απαγορεύεται στο strict mode. + +a = b = 3, c = 4; // Επιστρέφει 4 στην κονσόλα +console.log(a); // 3 (αριστερότερο) + +x = (y = 5, z = 6); // Επιστρέφει 6 στην κονσόλα +console.log(x); // 6 (δεξιότερο) +</pre> + +<p>Ο τελεστής κόμμα είναι τελείως διαφορετικός από το κόμμα μέσα σε πίνακες, αντικείμενα, και ορίσματα και παραμέτρους συνάρτησης.</p> + +<h3 id="Επεξεργασία_και_επιστροφή">Επεξεργασία και επιστροφή</h3> + +<p>Ένα παράδειγμα ακόμα που μπορεί να κάνει κάποιος με τον τελεστή κόμμα είναι επεξεργασία πρίν την επιστροφή. Όπως αναφέρθηκε, μόνο το τελευταίο στοιχείο θα γυρίσει, πλην όμως, όλα τα άλλα πρόκειται να αποτιμηθούν εξίσου. Οπότε, κάποιος θα μπορούσε να κάνει:</p> + +<pre class="brush: js">function myFunc() { + var x = 0; + + return (x += 1, x); // Ίδιο με το return ++x; +}</pre> + +<h2 id="Προδιαγραφές">Προδιαγραφές</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Προδιαγραφή</th> + <th scope="col">Κατάσταση</th> + <th scope="col">Σχόλιο</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-comma-operator', 'Comma operator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-comma-operator', 'Comma operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.14', 'Comma operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.14', 'Comma operator')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Αρχικός Ορισμός</td> + </tr> + </tbody> +</table> + +<h2 id="Συμβατότητα_Προγράμματος_Περιήγησης">Συμβατότητα Προγράμματος Περιήγησης</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Χαρακτηριστικό</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Βασική Υποστήριξη</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>3.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Χαρακτηριστικό</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Βασική Υποστήριξη</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Δείτε_επίσης">Δείτε επίσης</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for βρόχος</a></li> +</ul> diff --git a/files/el/web/javascript/reference/operators/index.html b/files/el/web/javascript/reference/operators/index.html new file mode 100644 index 0000000000..9ed1cba01e --- /dev/null +++ b/files/el/web/javascript/reference/operators/index.html @@ -0,0 +1,301 @@ +--- +title: Expressions and operators +slug: Web/JavaScript/Reference/Operators +tags: + - JavaScript + - εκφράσεις + - τελεστές +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Στο κεφάλαιο αυτό περιγράφονται όλοι οι τελεστές, οι εκφράσεις και οι λέξεις κλειδιά της JavaScript.</p> + +<h2 id="Εκφράσεις_και_τελεστές_ανά_κατηγορία">Εκφράσεις και τελεστές ανά κατηγορία</h2> + +<p>Για αλφαβητική ταξινόμηση δείτε το μενού στα αριστερά.</p> + +<h3 id="Πρωταρχικές_εκφράσεις">Πρωταρχικές εκφράσεις</h3> + +<p>Βασικές λέξεις κλειδιά και γενικές εκφράσεις στην JavaScript.</p> + +<dl> + <dt>{{jsxref("Operators/this", "this")}}</dt> + <dd>Η λέξη κλειδί <code>this</code> αναφέρεται στο προγραμματιστικό πλαίσιο της εκάστοτε συνάρτησης.</dd> + <dt>{{jsxref("Operators/function", "function")}}</dt> + <dd>Η λέξη κλειδί <code>function</code> ορίζει μια εκφραση δήλωσης συνάρτησης (function).</dd> + <dt>{{jsxref("Operators/class", "class")}}</dt> + <dd>Η λέξη κλειδί <code>class</code> ορίζει μια έκφραση δήλωσης κλάσης(class).</dd> + <dt>{{jsxref("Operators/function*", "function*")}}</dt> + <dd>Η λέξη κλειδί <code>function*</code> ορίζει μια έκφραση δήλωσης συνάρτησης γεννήτριας (generator function).</dd> + <dt>{{jsxref("Operators/yield", "yield")}}</dt> + <dd>Διακόπτει και συνεχίζει μια συνάρτηση γεννήτρια.</dd> + <dt>{{jsxref("Operators/yield*", "yield*")}}</dt> + <dd>Αναθέτει σε μια άλλη συνάρτηση γεννήτριας ή σε κάποιο επαναλήψιμο αντικείμενο.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/async_function", "async function*")}}</dt> + <dd>Η <code>async function</code> ορίζει μια έκφραση δήλωσης ασυγχρονης συνάρτησης (async function).</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/await", "await")}}</dt> + <dd>Διακόπτει και συνεχίζει μια ασύγχρονη συνάρτηση, και περιμένει την ασύχρονη απάντηση/απόρριψη από αυτή.</dd> + <dt>{{jsxref("Global_Objects/Array", "[]")}}</dt> + <dd>Βασική σύνταξη αρχικοποίησης ενός πίνακα (Array).</dd> + <dt>{{jsxref("Operators/Object_initializer", "{}")}}</dt> + <dd>Βασική σύνταξη αρχικοποίησης ενός αντικειμένου (Object).</dd> + <dt>{{jsxref("Global_Objects/RegExp", "/ab+c/i")}}</dt> + <dd>Βασική σύνταξη αρχικοποίησης μιας κοινής έκφρασης (Regular Expression).</dd> + <dt>{{jsxref("Operators/Grouping", "( )")}}</dt> + <dd>Τελεστής ομαδοποίησης.</dd> +</dl> + +<h3 id="Εκφράσεις_αριστερής_πλευράς_(Left-hand-side)">Εκφράσεις αριστερής πλευράς (Left-hand-side)</h3> + +<p>Οι τιμές στο αριστερό μέρος αποτελούν τον προορισμό της ανάθεσης.</p> + +<dl> + <dt>{{jsxref("Operators/Property_accessors", "Property accessors", "", 1)}}</dt> + <dd>Οι τελεστές μέλους παρέχουν πρόσβαση στις ιδιότητες ή στις μεθόδους ενός αντικειμένου.<br> + (<code>object.property</code> and <code>object["property"]</code>).</dd> + <dt>{{jsxref("Operators/new", "new")}}</dt> + <dd>Ο τελεστής <code>new</code> δημιουργεί ένα στιγμιότυπο ενός κατασκευαστή (constructor).</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a></dt> + <dd>Στους κατασκευαστές, <code>new.target</code> αναφέρεται στους κατασκευαστές που κλήθηκαν από το {{jsxref("Operators/new", "new")}}.</dd> + <dt>{{jsxref("Operators/super", "super")}}</dt> + <dd>Η λέξη κλειδί <code>super</code> καλεί τον κατασκευαστή του γονέα (parent constructor).</dd> + <dt>{{jsxref("Operators/Spread_operator", "...obj")}}</dt> + <dd>Η σύνταξη διάδοσης (Spread syntax) επιτρέπει σε μια έκφραση να εξαπλωθεί σε σημεία όπου αναμένονται πολλαπλά ορίσματα (πχ. κλήση συνάρτησης) ή πολλαπλά στοιχεία (πχ αρχική δήλωση πινάκων).</dd> +</dl> + +<h3 id="Επαυξηση_και_μείωση">Επαυξηση και μείωση</h3> + +<p>Τελεστές Postfix/prefix επαύξησης και postfix/prefix μείωσης.</p> + +<dl> + <dt>{{jsxref("Operators/Arithmetic_Operators", "A++", "#Increment")}}</dt> + <dd>Τελεστής αύξησης μετά την μεταβλητή (Postfix).</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "A--", "#Decrement")}}</dt> + <dd>Τελεστής μείωσης μετά την μεταβλητή (Postfix).</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "++A", "#Increment")}}</dt> + <dd>Τελεστής αύξησης πριν την μεταβλητή (Prefix).</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "--A", "#Decrement")}}</dt> + <dd>Τελεστής μείωσης πριν την μεταβλητή (Prefix).</dd> +</dl> + +<h3 id="Μοναδιαίοι_τελεστές">Μοναδιαίοι τελεστές</h3> + +<p>Μοναδιαία είναι η διαδικασία που απαιτεί μόνο εναν τελεστή.</p> + +<dl> + <dt>{{jsxref("Operators/delete", "delete")}}</dt> + <dd>Ο τελεστής <code>delete</code> διαγράφει ένα χαρακτηριστικό από ένα αντικείμενο.</dd> + <dt>{{jsxref("Operators/void", "void")}}</dt> + <dd>Ο τελεστής <code>void</code> απορρίπτει την επιστρεφόμενη τιμή μιας έκφρασης.</dd> + <dt>{{jsxref("Operators/typeof", "typeof")}}</dt> + <dd>Ο τελεστής <code>typeof</code> προσδιορίζει τον τύπο ενός δεδομένου αντικειμένου.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "+", "#Unary_plus")}}</dt> + <dd>Ο τελεστής unary plus μετατρέπει τον όρο πράξης του σε αριθμό (Number type).</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "-", "#Unary_negation")}}</dt> + <dd>Ο τελεστής unary negation μετατρέπει τον όρο πράξης του σε αριθμό (Number type) και ακολούθως τον μετατρέπει σε αρνητικό.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "~", "#Bitwise_NOT")}}</dt> + <dd>Τελεστής άρνησης σε επίπεδο bit (Bitwise NOT).</dd> + <dt>{{jsxref("Operators/Logical_Operators", "!", "#Logical_NOT")}}</dt> + <dd>Τελεστής λογικής άρνησης (Logical NOT).</dd> +</dl> + +<h3 id="Αριθμητικοί_τελεστές">Αριθμητικοί τελεστές</h3> + +<p>Οι αριθμητικοί τελεστές δέχονται αριθμητικές τιμές σαν ορίσματα πράξης (είτε αριθμούς, είτε μεταβλητές) και επιστρέφουν μια απλή αριθμητική τιμή.</p> + +<dl> + <dt>{{jsxref("Operators/Arithmetic_Operators", "+", "#Addition")}}</dt> + <dd>Τελεστής πρόσθεσης.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "-", "#Subtraction")}}</dt> + <dd>Τελεστής αφαίρεσης.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "/", "#Division")}}</dt> + <dd>Τελεστής διαίρεσης.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "*", "#Multiplication")}}</dt> + <dd>Τελεστής πολλαπλασιασμού.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "%", "#Remainder")}}</dt> + <dd>Τελεστής υπολοίπου διαίρεσης.</dd> +</dl> + +<dl> + <dt>{{jsxref("Operators/Arithmetic_Operators", "**", "#Exponentiation")}}</dt> + <dd>Εκθετικός τελεστής.</dd> +</dl> + +<h3 id="Σχεσιακοί_τελεστές">Σχεσιακοί τελεστές</h3> + +<p>Ενας τελεστής σύγκρισης συγκρίνει τα ορίσματα πράξης και επιστρέφει μια Boolean τιμή βασισμένη στο αν η σύγκριση είναι αληθής.</p> + +<dl> + <dt>{{jsxref("Operators/in", "in")}}</dt> + <dd>Ο τελεστής <code>in</code> προσδιορίζει αν ενα αντικείμενο έχει ένα συγκεκριμένο χαρακτηριστικό.</dd> + <dt>{{jsxref("Operators/instanceof", "instanceof")}}</dt> + <dd>Ο τελεστής <code>instanceof</code> προσδιορίζει αν ένα αντικείμενο είναι στιγμιότυπο ενός άλλου αντικειμένου.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "<", "#Less_than_operator")}}</dt> + <dd>Τελεστής 'μικρότερο από'.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", ">", "#Greater_than_operator")}}</dt> + <dd>Τελεστής 'μεγαλύτερο από'.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "<=", "#Less_than_or_equal_operator")}}</dt> + <dd>Τελεστής 'μικρότερο από ή ίσο'.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", ">=", "#Greater_than_or_equal_operator")}}</dt> + <dd>Τελεστής 'μεγαλύτερο από ή ίσο'.</dd> +</dl> + +<div class="note"> +<p><strong>Σημείωση: </strong>το <strong>=></strong> δεν είναι τελεστής αλλά αποτελεί σημειογραφία για τις <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a>.</p> +</div> + +<h3 id="Τελεστές_ισότητας">Τελεστές ισότητας</h3> + +<p>Το αποτέλεσμα των τελεστών ισότητας είναι πάντα τύπου Boolean και βασίζεται στο αν η σύγκριση είανι αληθής.</p> + +<dl> + <dt>{{jsxref("Operators/Comparison_Operators", "==", "#Equality")}}</dt> + <dd>Τελεστής ισότητας.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "!=", "#Inequality")}}</dt> + <dd>Τελεστής ανισότητας, διαφορετικότητας.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "===", "#Identity")}}</dt> + <dd>Τελεστής ισότητας ταυτότητας.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "!==", "#Nonidentity")}}</dt> + <dd>Τελεστής ανισότητας ταυτότητας.</dd> +</dl> + +<h3 id="Τελεστές_κύλισης_bits">Τελεστές κύλισης bits</h3> + +<p>Λειτουργία κύλισης όλων των bits των ορισμάτων.</p> + +<dl> + <dt>{{jsxref("Operators/Bitwise_Operators", "<<", "#Left_shift")}}</dt> + <dd>Τελεστής αριστερής κύλισης bit (Bitwise left shift).</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", ">>", "#Right_shift")}}</dt> + <dd>Τελεστής δεξιάς κύλισης bit (Bitwise right shift).</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", ">>>", "#Unsigned_right_shift")}}</dt> + <dd>Τελεστής δεξιάς κύλισης bit χωρίς πρόσημο (Bitwise right shift).</dd> +</dl> + +<h3 id="Δυαδικοί_τελεστές_bits">Δυαδικοί τελεστές bits</h3> + +<p>Οι δυαδικοί τελεστές bits χειριζονται τα ορίσματα τους σαν σετ απο 32 bits (0,1) και επιστρέφουν μια αριθμητική τιμή.</p> + +<dl> + <dt>{{jsxref("Operators/Bitwise_Operators", "&", "#Bitwise_AND")}}</dt> + <dd>Bitwise AND.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "|", "#Bitwise_OR")}}</dt> + <dd>Bitwise OR.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "^", "#Bitwise_XOR")}}</dt> + <dd>Bitwise XOR.</dd> +</dl> + +<h3 id="Δυαδικοί_λογικοί_τελεστές">Δυαδικοί λογικοί τελεστές</h3> + +<p>Οι λογικοί τελεστές τυπικά χρησιμοποιούνται με boolean (λογικές) τιμές, και επιστρέφουν μια επίσης boolean τιμή.</p> + +<dl> + <dt>{{jsxref("Operators/Logical_Operators", "&&", "#Logical_AND")}}</dt> + <dd>Λογικό 'και' (AND).</dd> + <dt>{{jsxref("Operators/Logical_Operators", "||", "#Logical_OR")}}</dt> + <dd>Λογικό 'ή' (OR).</dd> +</dl> + +<h3 id="Τριαδικός_υποθετικός_τελεστής">Τριαδικός υποθετικός τελεστής</h3> + +<dl> + <dt>{{jsxref("Operators/Conditional_Operator", "(condition ? ifTrue : ifFalse)")}}</dt> + <dd> + <p>Ο υποθετικός τελεστής επιστρέφει μια εκ των δύο τιμών, βάση της λογική τιμής της δεδομένης συνθήκης.</p> + </dd> +</dl> + +<h3 id="Τελεστές_ανάθεσης.">Τελεστές ανάθεσης.</h3> + +<p>Ένας τελεστής ανάθεσης αναθέτει μια τιμή στο αριστερό όρισμα βάση της τιμής του δεξιού ορίσματος.</p> + +<dl> + <dt>{{jsxref("Operators/Assignment_Operators", "=", "#Assignment")}}</dt> + <dd>Τελεστής ανάθεσης.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "*=", "#Multiplication_assignment")}}</dt> + <dd>Τελεστής ανάθεσης πολλαπλάσιου.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "/=", "#Division_assignment")}}</dt> + <dd>Τελεστής ανάθεσης διαιρεταίου.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "%=", "#Remainder_assignment")}}</dt> + <dd>Τελεστής ανάθεσης υπολοίπου.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "+=", "#Addition_assignment")}}</dt> + <dd>Τελεστής ανάθεσης αθροίσματος.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "-=", "#Subtraction_assignment")}}</dt> + <dd>Τελεστής ανάθεσης αφαίρεσης.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "<<=", "#Left_shift_assignment")}}</dt> + <dd>Τελεστής ανάθεσης αριστερής κύλισης bit.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", ">>=", "#Right_shift_assignment")}}</dt> + <dd>Τελεστής ανάθεσης δεξιάς κύλισης bit.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", ">>>=", "#Unsigned_right_shift_assignment")}}</dt> + <dd>Τελεστής ανάθεσης δεξιάς κύλισης bit χωρίς πρόσημο.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "&=", "#Bitwise_AND_assignment")}}</dt> + <dd>Τελεστής ανάθεσης λογικού AND σε επίπεδο bits.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "^=", "#Bitwise_XOR_assignment")}}</dt> + <dd>Τελεστής ανάθεσης λογικού XOR σε επίπεδο bits.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "|=", "#Bitwise_OR_assignment")}}</dt> + <dd>Τελεστής ανάθεσης λογικού OR σε επίπεδο bits.</dd> + <dt>{{jsxref("Operators/Destructuring_assignment", "[a, b] = [1, 2]")}}<br> + {{jsxref("Operators/Destructuring_assignment", "{a, b} = {a:1, b:2}")}}</dt> + <dd> + <p>Η ανάθεση διάσπασης(destructuring) επιτρέπει την απευθείας ανάθεση των χαρακτηριστικών, ενός αντικειμένου ή ενός πίνακα, σε μεταβλητές.</p> + </dd> +</dl> + +<h3 id="Τελεστης_κόμμα_''_(comma)">Τελεστης κόμμα ',' (comma)</h3> + +<dl> + <dt>{{jsxref("Operators/Comma_Operator", ",")}}</dt> + <dd>Ο τελεστής κόμμα(',') επιτρέπει σε πολλαπλές εκφράσεις να εκτιμηθούν σε μία μόνο δήλωση, και επιστρέφει το αποτέλεσμα της τελευταίας εκφρασης.</dd> +</dl> + +<h3 id="Non-standard_features">Non-standard features</h3> + +<dl> + <dt>{{non-standard_inline}} {{jsxref("Operators/Legacy_generator_function", "Legacy generator function", "", 1)}}</dt> + <dd>Η λέξη κλειδί <code>function</code> μπορεί να χρησιμοποιηθεί για να ορίσει για συνάρτηση γεννήτρια μέσα σε μια έκφραση. Για να γίνει η συνάρτηση, συναρτηση γεννήτριας το σώμα της θα πρέπει να περιέχει τουλαχιστον μια {{jsxref("Operators/yield", "yield")}} εκφραση.</dd> + <dt>{{non-standard_inline}} {{jsxref("Operators/Expression_closures", "Expression closures", "", 1)}}</dt> + <dd>The expression closure syntax is a shorthand for writing simple function.</dd> + <dt>{{non-standard_inline}} {{jsxref("Operators/Array_comprehensions", "[for (x of y) x]")}}</dt> + <dd>Array comprehensions.</dd> + <dt>{{non-standard_inline}} {{jsxref("Operators/Generator_comprehensions", "(for (x of y) y)")}}</dt> + <dd>Generator comprehensions.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11', 'Expressions')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11', 'Expressions')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New: Spread operator, destructuring assignment, <code>super</code> keyword.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Operator precedence</a></li> +</ul> diff --git a/files/el/web/tutorials/index.html b/files/el/web/tutorials/index.html new file mode 100644 index 0000000000..12a5837128 --- /dev/null +++ b/files/el/web/tutorials/index.html @@ -0,0 +1,247 @@ +--- +title: Οδηγοί εκμάθησης +slug: Web/Tutorials +tags: + - CSS + - HTML + - JavaScript + - MDN + - Αρχάριος + - Κώδικας + - Οδηγός + - Οδηγός εκμάθησης + - Σχεδιασμός ιστού +translation_of: Web/Tutorials +--- +<p>Οι σύνδεσμοι σε αυτή τη σελίδα οδηγούν σε μια ποικιλία οδηγών εκμάθησης και εργαλεία εκπαίδευσης. <strong>Είτε ξεκινάτε τώρα, μαθαίνετε τα βασικά, ή είστε έμπειρος στον προγραμματισμό ιστού, εδώ μπορείτε να βρείτε χρήσιμους πόρους για καλύτερες πρακτικές. </strong>Αυτοί οι πόροι δημιουργούνται από πρωτοποριακές εταιρείες και από προγραμματιστές που έχουν ασπαστεί τα ανοικτά πρότυπα και τις βέλτιστες πρακτικές για προγραμματισμό ιστού, που παρέχουν ή επιτρέπουν μεταφράσεις, μέσω μιας ανοικτής άδειας περιεχομένου, όπως η Creative Commons.</p> + +<h2 id="Για_αρχάριους_στο_διαδίκτυο">Για αρχάριους στο διαδίκτυο</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Getting_started_with_the_web">Ξεκινώντας με το διαδίκτυο</a></dt> + <dd>Το<em> "Ξεκινώντας με το διαδίκτυο" </em>είναι μια περιεκτική σειρά, που σάς εισάγει στις πρακτικότητες του προγραμματισμού ιστού. Θα ρυθμίσετε τα εργαλεία που χρειάζεστε ώστε να κατασκευάσετε μια απλή ιστοσελίδα και να δημοσιεύσετε το δικό σας απλό κώδικα.</dd> +</dl> + +<h2 class="Documentation" id="Documentation" name="Documentation">Οδηγοί εκμάθησης HTML</h2> + +<h3 id="Εισαγωγικό_επίπεδο">Εισαγωγικό επίπεδο</h3> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Εισαγωγή στο HTML</a></dt> + <dd>Αυτή η ενότητα θέτει τα θεμέλια, εξοικειώνοντάς σας με σημαντικές ιδέες και συντακτικό, την προβολή εφαρμογών HTML σε κείμενο, τη δημιουργία υπερσυνδέσμων και τη χρήση του HTML για τη δόμηση μιας ιστοσελίδας.</dd> + <dt><strong><a href="https://developer.mozilla.org/en-US/docs/HTML/Element">Αναφορά σε στοιχεία HTML του MDN</a></strong></dt> + <dd>Μια περιεκτική αναφορά για τα στοιχεία HTML και πώς τα υποστηρίζουν τα διάφορα προγράμματα περιήγησης.</dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt><strong><a href="https://www.theblogstarter.com/html-for-beginners">Δημιουργία μιας απλής ιστοσελίδας με HTML</a> (The Blog Starter)</strong></dt> + <dd>Ένας οδηγός HTML για αρχάριους, ο οποίος περιλαμβάνει επεξηγήσεις για κοινές ετικέτες, συμπεριλαμβανομένων και των ετικετών HTML5. Περιλαμβάνει επίσης έναν οδηγό βήμα προς βήμα για τη δημιουργία μιας βασικής ιστοσελίδας με παραδείγματα.</dd> + <dt><strong><a href="http://wikiversity.org/wiki/Web_Design/HTML_Challenges" rel="external">Προκλήσεις HTML</a> (Wikiversity)</strong></dt> + <dd>Τελειοποιήστε τις ικανότητες HTML σας μέσω των προκλήσεων (για παράδειγμα, "Να χρησιμοποιήσω ένα στοιχείο <h2> ή ένα στοιχείο <strong>;"), με έμφαση στις σημαντικές επισημάνσεις.</dd> +</dl> +</div> +</div> + +<h3 id="Μέσο_επίπεδο">Μέσο επίπεδο</h3> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Πολυμέσα και ενσωμάτωση</a></dt> + <dd>Αυτή η ενότητα εξερευνεί τις χρήσεις του HTML για τη συμπερίληψη πολυμέσων στις ιστοσελίδες σας, καθώς και τους διάφορους τρόπους με τους οποίους μπορούν να προστεθούν εικόνες και να ενσωματωθούν βίντεο, ήχος, ακόμη και ολόκληρες ιστοσελίδες.</dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Tables">Πίνακες HTML</a></dt> + <dd>Η απεικόνηση των δεδομένων πίνακα που βρίσκονται σε μια ιστοσελίδα, με έναν κατανοητό, {{glossary("Accessibility", "προσιτό")}} τρόπο, μπορεί να είναι δύσκολη υπόθεση. Αυτή η ενότητα καλύπτει βασικές σημάνσεις πίνακα, καθώς και πιο περίπλοκες λειτουργίες, όπως η υλοποίηση λεζαντών και επισκοπήσεων.</dd> +</dl> +</div> +</div> + +<h3 id="Προηγμένο_επίπεδο">Προηγμένο επίπεδο</h3> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Forms">Φόρμες HTML</a></dt> + <dd>Οι φόρμες είναι αναπόσπαστο κομμάτι του διαδικτύου — παρέχουν μέγαλο ποσοστό της λειτουργικότητας που χρειάζεστε για την αλληλεπίδραση με τις ιστοσελίδες, π.χ. εγγραφή και σύνδεση, αποστολή σχολίων, αγορά προϊόντων και πολλά άλλα. Αυτή η ενότητα θα σάς βοηθήσει να ξεκινήσετε τη δημιουγία των μερών των φορμών που αφορούν το πρόγραμμα-πελάτη.</dd> + <dt><strong><a href="https://developer.mozilla.org/en-US/docs/Tips_for_Authoring_Fast-loading_HTML_Pages">Συμβουλές για τη δημιουργία σελίδων HTML ταχείας φόρτωσης</a></strong></dt> + <dd>Βελτιστοποιήστε τις ιστοσελίδες ώστε να είναι πιο αποκρίσιμες για τους επισκέπτες και να μειώσετε τη φόρτωση στο διακομιστή σας και τη σύνδεσή σας στο διαδίκτυο.</dd> +</dl> +</div> +</div> + +<h2 class="Documentation" id="Documentation" name="Documentation">Οδηγοί εκμάθησης CSS</h2> + +<h3 id="Εισαγωγικό_επίπεδο_2">Εισαγωγικό επίπεδο</h3> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt><a href="/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics">Βασικά CSS</a></dt> + <dd>Το CSS (Cascading Style Sheets - Διαδοχικά Φύλλα Στυλ) είναι ο κώδικας που χρησιμοποιείτε για να δώσετε στυλ στην ιστοσελίδα σας. Το "<em>Βασικά CSS"</em> σάς παρέχει όλα όσα χρειάζεστε για να ξεκινήσετε. Θα απαντήσουμε σε ερωτήσεις όπως: Πώς μετατρέπω το κείμενό μου σε μαύρο ή κόκκινο; Πώς μπορώ να κάνω το περιεχόμενό μου να εμφανίζεται στο τάδε σημείο της οθόνης; Πώς διακοσμώ την ιστοσελίδα μου με εικόνες και χρώματα φόντου;</dd> + <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Εισαγωγή στο CSS</a></dt> + <dd>Αυτή η ενότητα εμβαθύνει στον τρόπο λειτουργίας του CSS, συμπεριλαμβανομένων και των επιλογέων και των ιδιοτήτων, της εγγραφής κανόνων CSS, της εφαρμογής CSS σε HTML, του καθορισμού μήκους, χρώματος και άλλων στοιχείων CSS, cascade and inheritance, box model basics, and debugging CSS.</dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a></dt> + <dd>Next up, we look at styling boxes, one of the fundamental steps towards laying out a web page. In this module we recap the box model then look at controlling box layouts by setting padding, borders and margins, setting custom background colors, images and other features, and fancy features such as drop shadows and filters on boxes.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text">Styling text</a></dt> + <dd>Here we look at text styling fundamentals, including setting font, boldness, and italics, line and letter spacing, and drop shadows and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.</dd> + <dt><strong><a href="https://developer.mozilla.org/en-US/docs/Common_CSS_Questions">Common CSS Questions</a></strong></dt> + <dd>Common questions and answers for beginners.</dd> +</dl> +</div> +</div> + +<h3 id="Μέσο_επίπεδο_2">Μέσο επίπεδο</h3> + +<div class="row topicpage-table" style="width: 100%;"> +<div class="section"> +<dl> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout">Διάταξη CSS</a></dt> + <dd>At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so can now dive deep into CSS layout, looking at different display settings, traditional layout methods involving float and positioning, and new fangled layout tools like flexbox.</dd> + <dt><strong><a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_Reference">Αναφορά CSS</a></strong></dt> + <dd>Complete reference to CSS, with details on support by Firefox and other browsers.</dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt><strong><a href="http://www.alistapart.com/articles/fluidgrids/" rel="external">Ρευστά πλέγματα (Fluid Grids)</a> (A List Apart)</strong></dt> + <dd>Design layouts that fluidly resize with the browser window, while still using a typographic grid.</dd> + <dt><strong><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_challenges" rel="external">Προκλήσεις CSS </a>(Wikiversity)</strong></dt> + <dd>Flex your CSS skills, and see where you need more practice.</dd> +</dl> +</div> +</div> + +<h3 id="Προηγμένο_επίπεδο_2">Προηγμένο επίπεδο</h3> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt><strong><a href="/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Χρήση μεταμορφώσεων CSS</a></strong></dt> + <dd>Apply rotation, skewing, scaling, and translation using CSS.</dd> + <dt><strong><a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_transitions">Μεταβάσεις CSS</a></strong></dt> + <dd>CSS transitions, part of the draft CSS3 specification, provide a way to animate changes to CSS properties, instead of having the changes take effect instantly.</dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt><strong><a href="http://www.html5rocks.com/tutorials/webfonts/quick/" rel="external">Γρήγορος οδηγός για υλοποίηση γραμματοσειρών ιστού με το @font-face</a> (HTML5 Rocks)</strong></dt> + <dd>The @font-face feature from CSS3 allows you to use custom typefaces on the web in an accessible, manipulatable, and scalable way.</dd> + <dt><strong><a href="http://davidwalsh.name/starting-css" rel="external">Starting to Write CSS</a> (David Walsh)</strong></dt> + <dd>An introduction to tools and methodologies to write more succinct, maintainable, and scalable CSS.</dd> +</dl> +</div> +</div> + +<div class="section"> +<dl> + <dt><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a></dt> + <dd>Learn how to draw graphics using scripting using the canvas element.</dd> + <dt><strong><a href="http://html5doctor.com/" rel="external">HTML5 Doctor</a></strong></dt> + <dd>Articles about using HTML5 right now.</dd> +</dl> +</div> + +<h2 class="Documentation" id="Documentation" name="Documentation">Οδηγοί εκμάθησης JavaScript</h2> + +<h3 id="Εισαγωγικό_επίπεδο_3">Εισαγωγικό επίπεδο</h3> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt> </dt> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a></dt> + <dd>In our first JavaScript module, we first answer some fundamental questions such as "what is JavaScript?", "what does it look like?", and "what can it do?", before moving on to taking you through your first practical experience of writing JavaScript. After that, we discuss some key JavaScript features in detail, such as variables, strings, numbers and arrays.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript building blocks</a></dt> + <dd>In this module, we continue our coverage of all JavaScript's key fundamental features, turning our attention to commonly-encountered types of code block such as conditional statements, loops, functions, and events. You've seen this stuff already in the course, but only in passing — here we'll discuss it all explicitly.</dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt><a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Getting started with JavaScript</a></dt> + <dd>What is JavaScript and how can it help you?</dd> + <dt><strong><a href="http://www.codecademy.com/">Codecademy</a> (Codecademy)</strong></dt> + <dd>Το Codecademy είναι ένας εύκολος τρόπος για να μάθετε πώς να γράφετε κώδικα JavaScript. Είναι διαδραστικό και μπορείτε να το κάνετε με τους φίλους σας.</dd> +</dl> +</div> +</div> + +<h3 id="Μέσο_επίπεδο_3">Μέσο επίπεδο</h3> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects">Introducing JavaScript objects</a></dt> + <dd>In JavaScript, most things are objects, from core JavaScript features like strings and arrays to the browser APIs built on top of JavaScript. You can even create your own objects to encapsulate related functions and variables into efficient packages. The object-oriented nature of JavaScript is important to understand if you want to go further with your knowledge of the language and write more efficient code, therefore we've provided this module to help you. Here we teach object theory and syntax in detail, look at how to create your own objects, and explain what JSON data is and how to work with it.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs</a></dt> + <dd>When writing client-side JavaScript for web sites or applications, you won't go very far before you start to use APIs — interfaces for manipulating different aspects of the browser and operating system the site is running on, or even data from other web sites or services. In this module we will explore what APIs are, and how to use some of the most common APIs you'll come across often in your development work. </dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt><strong><a href="https://developer.mozilla.org/en-US/docs/A_re-introduction_to_JavaScript">A re-Introduction to JavaScript</a></strong></dt> + <dd>A recap of the JavaScript programming language aimed at intermediate-level developers.</dd> + <dt><strong><a href="http://eloquentjavascript.net/" rel="external">Eloquent JavaScript</a></strong></dt> + <dd>A comprehensive guide to intermediate and advanced JavaScript methodologies.</dd> + <dt><strong><a href="http://speakingjs.com/es5/" rel="external">Speaking JavaScript</a> (Dr. Axel Rauschmayer)</strong></dt> + <dd>For programmers who want to learn JavaScript quickly and properly, and for JavaScript programmers who want to deepen their skills and/or look up specific topics.</dd> + <dt><strong><a href="http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/" rel="external">Essential JavaScript Design Patterns</a> (Addy Osmani)</strong></dt> + <dd>An introduction to essential JavaScript design patterns.</dd> +</dl> +</div> +</div> + +<h3 id="Προηγμένο_επίπεδο_3">Προηγμένο επίπεδο</h3> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Guide">Οδηγός JavaScript</a></dt> + <dd>A comprehensive, regularly updated guide to JavaScript for all levels of learning from beginner to advanced.</dd> + <dt><strong><a href="https://github.com/getify/You-Dont-Know-JS" rel="external">You Don't Know JS</a> (Kyle Simpson)</strong></dt> + <dd>Μια σειρά βιβλίων που μελετά τους κύριους μηχανισμούς της γλώσσας JavaScript εις βάθος.</dd> + <dt><strong><a href="http://bonsaiden.github.com/JavaScript-Garden/" rel="external">JavaScript Garden</a></strong></dt> + <dd>Τεκμηρίωση για τα πιο "περίεργα" μέρη της JavaScript.</dd> + <dt><strong><a href="http://exploringjs.com/es6/" rel="external">Εξερεύνηση του ES6</a> (Δρ. Axel Rauschmayer)</strong></dt> + <dd>Αξιόπιστες και αναλυτικές πληροφορίες στο ECMAScript 2015.</dd> +</dl> +</div> + +<div class="section"><strong><a href="http://shichuan.github.io/javascript-patterns" rel="external">Μοτίβα JavaScript</a></strong> + +<dl> + <dd>A JavaScript pattern and antipattern collection that covers function patterns, jQuery patterns, jQuery plugin patterns, design patterns, general patterns, literals and constructor patterns, object creation patterns, code reuse patterns, DOM.</dd> + <dt><strong><a href="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">Πώς λειτουργούν τα προγράμματα περιήγησης</a></strong></dt> + <dd>Ένας λεπτομερές ερευνητικό άρθρο που περιγράφει τα διαφορετικά, σύγχρονα προγράμματα περιήγησης, τους μηχανισμούς τους, την απόδοση σελίδων κλπ.</dd> + <dt><a href="https://github.com/bolshchikov/js-must-watch">Βίντεο JavaScript</a> (GitHub)</dt> + <dd>Μια συλλογή από βίντεο JavaScript προς παρακολούθηση.</dd> +</dl> +</div> +</div> + +<h3 id="Ανάπτυξη_επεκτάσεων">Ανάπτυξη επεκτάσεων</h3> + +<div class="row topicpage-table" style="width: 100%;"> +<div class="section"> +<dl> + <dt><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a></dt> + <dd>Το WebExtensions είναι ένα σύστημα για πολλαπλά προγράμματα περιήγησης και αφορά την ανάπτυξη προσθέτων για προγράμματα περιήγησης. Σε μεγάλο βαθμό, το σύστημα είναι συμβατό με το <a class="external-icon external" href="https://developer.chrome.com/extensions">API επεκτάσεων</a>, που υποστηρίζεται από το Google Chrome και το Opera. Οι επεκτάσεις που γράφονται για αυτά τα προγράμματα περιήγησης θα εκτελούνται, στις περισσότερες περιπτώσεις, στο Firefox ή στο <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/">Microsoft Edge</a> με <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Porting_from_Google_Chrome">λίγες μόνο αλλαγές</a>. Το API είναι επίσης πλήρως συμβατό με το <a href="https://developer.mozilla.org/en-US/Firefox/Multiprocess_Firefox">Firefox με πολυδιεργασίες</a>.</dd> +</dl> +</div> +</div> diff --git a/files/el/εργαλεία/about_colon_debugging/index.html b/files/el/εργαλεία/about_colon_debugging/index.html new file mode 100644 index 0000000000..0baeead55c --- /dev/null +++ b/files/el/εργαλεία/about_colon_debugging/index.html @@ -0,0 +1,227 @@ +--- +title: 'about:debugging' +slug: 'Εργαλεία/about:debugging' +translation_of: 'Tools/about:debugging' +--- +<p>{{ToolsSidebar}}</p> + +<p>The <code>about:debugging</code> page provides a single place from which you can attach the Firefox Developer Tools to a number of debugging targets. At the moment it supports three main sorts of targets: restartless add-ons, tabs, and workers.</p> + +<h2 id="Opening_the_aboutdebugging_page">Opening the about:debugging page</h2> + +<p>There are two ways to open <code>about:debugging</code>:</p> + +<ul> + <li>Type <code>about:debugging</code> in the Firefox URL bar.</li> + <li>In the <strong>Tools</strong> > <strong>Web Developer</strong> menu, click <strong>Remote Debugging</strong>.</li> +</ul> + +<p>When about:debugging opens, on the left-hand side, you'll see a sidebar with two options and information about your remote debugging setup:</p> + +<dl> + <dt>Setup</dt> + <dd>Use the Setup tab to configure the connection to your remote device.</dd> + <dt>This Firefox</dt> + <dd>Provides information about temporary extensions you have loaded for debugging, extensions that are installed in Firefox, the tabs that you currently have open, and service workers running on Firefox.</dd> +</dl> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16650/about_debugging_setup.png" style="border: 1px solid black; display: block; height: 751px; margin: 0px auto; width: 918px;"></p> + +<p>If your <code>about:debugging</code> page is different from the one displayed here, go to <code>about:config</code>, find and set the option <code>devtools.aboutdebugging.new-enabled</code> to <strong>true</strong>.</p> + +<h2 id="Setup_tab">Setup tab</h2> + +<h3 id="Connecting_to_a_remote_device">Connecting to a remote device</h3> + +<p>Firefox supports debugging over USB with Android devices, using the about:debugging page.</p> + +<p>Before you connect:</p> + +<ol> + <li>Enable Developer settings on your Android device.</li> + <li>Enable USB debugging in the Android Developer settings.</li> + <li>Enable <strong>Remote Debugging via USB</strong> in the Advanced Settings in Firefox on the Android device.</li> + <li>Connect the Android device to your computer using a USB cable.</li> +</ol> + +<p>If your device doesn't appear in the lefthand side of the about:debugging page, try clicking the <strong>Refresh devices</strong> button.</p> + +<p><strong>If it still doesn't appear</strong>, it may be because the link between your Android device and your computer is not authorized yet. First make sure you have installed <a href="https://developer.android.com/studio/command-line/adb.html">Android Debug Bridge</a> from Android Tools on your computer in order for it to be able to connect to your device. Next, disable every debugging setting already activated and repeat the steps described before. Your device should show a popup to authorize your computer to connect to it — accept this and then click the <strong>Refresh devices</strong> button again. The device should appear.</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: You do not need to install the full Android Studio SDK. Only adb is needed.</p> +</div> + +<p>To start a debugging session, first open the page that you wish to debug and then click <strong>Connect</strong> next to the device name to open a connection to it. If the connection was successful, you can now click the name of the device to switch to a tab with information about the device.</p> + +<p><img alt="Screenshot of the debugging page for an Android device" src="https://mdn.mozillademos.org/files/16915/device_information.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p> + +<p>The information on this page is the same as the information on the <strong>This Firefox</strong> tab, but instead of displaying information for your computer, it displays the information for the remote device with the addition of a <strong>Tabs</strong> section with an entry for each of the tabs open on the remote device.</p> + +<p>Note: If the version of Firefox on your remote device is more than one major version older than the version running on your computer, you may see a message like the following:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16917/version_warning.png" style="display: block; margin: 0 auto;"></p> + +<p>In the image above, there are three tabs open: <strong>Network or cache Recipe</strong>, <strong>Nightly Home</strong>, and <strong>About Nightly</strong>. To debug the contents of one of these tabs, click the <strong>Inspect</strong> button next to its title. When you do, the Developer Tools open in a new tab.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16916/remote_debugger.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p> + +<p>Above the usual list of tools, you can see information about the device you are connected to, including the fact that you are connected (in this example) via USB, to Mozilla Firefox Nightly, on a Moto G(5), as well as the title of the page that you are debugging, and the address of the page.</p> + +<h3 id="Connecting_over_the_Network">Connecting over the Network</h3> + +<p>You can connect to a Firefox Debug server on your network, or on your debugging machine using the <strong>Network Location</strong> settings of the about:debugging page.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16942/network_location.png" style="display: block; margin: 0px auto;"></p> + +<p>Enter the location and port on which the debugger server is running. When you do, it is added to the Network locations list along with the devices, as shown below:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16943/connect_network_location.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="This_Firefox">This Firefox</h2> + +<p>The <strong>This Firefox</strong> tab combines the features of Extensions, Tabs, and Workers into a single tab with the following sections:</p> + +<dl> + <dt>Temporary Extensions</dt> + <dd>Displays a list of the extensions that you have loaded using the <strong>Load Temporary Add-on</strong> button.</dd> + <dt>Extensions</dt> + <dd>This section lists information about the extensions that you have installed on your system.</dd> + <dt>Service Workers, Shared Workers, and Other Workers</dt> + <dd>There are three sections on this page that deal with Service Workers, Shared Workers, and Other Workers.</dd> +</dl> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16654/about_debugging_this_firefox.png" style="border: 1px solid black; display: block; height: 867px; margin: 0px auto; width: 1138px;"></p> + +<p>Whether internal extensions appear in the list on this page depends on the setting of the <code>devtools.aboutdebugging.showHiddenAddons</code> preference. If you need to see these extensions, navigate to <code>about:config</code> and make sure that the preference is set to <code>true</code>.</p> + +<h2 id="Extensions">Extensions</h2> + +<h3 id="Loading_a_temporary_extension">Loading a temporary extension</h3> + +<p>With the <strong>Load Temporary Add-on</strong> button you can temporarily load a web extension from a directory on disk. Click the button, navigate to the directory containing the add-on and select its manifest file. The temporary extension is then displayed under the <strong>Temporary Extensions</strong> header.</p> + +<p>You don't have to package or sign the extension before loading it, and it stays installed until you restart Firefox.</p> + +<p>The major advantages of this method, compared with installing an add-on from an XPI, are:</p> + +<ul> + <li>You don't have to rebuild an XPI and reinstall when you change the add-on's code;</li> + <li>You can load an add-on without signing it and without needing to disable signing.</li> +</ul> + +<p>Once you have loaded a temporary extension, you can see information about it and perform operations on it.</p> + +<p><img alt="Screenshot of the debugging information panel for a temporary extension" src="https://mdn.mozillademos.org/files/16652/temporary_extension.png" style="display: block; height: 322px; margin: 0 auto; width: 680px;"></p> + +<p>You can use the following buttons:</p> + +<dl> + <dt>Inspect</dt> + <dd>Loads the extension in the debugger.</dd> + <dt>Reload</dt> + <dd>Reloads the temporary extension. This is handy when you have made changes to the extension.</dd> + <dt>Remove</dt> + <dd>Unloads the temporary extension.</dd> +</dl> + +<p>Other information about the extension is displayed:</p> + +<dl> + <dt>Location</dt> + <dd>The location of the extension's source code on your local system.</dd> + <dt>Extension ID</dt> + <dd>The temporary ID assigned to the extension.</dd> + <dt>Internal UUID</dt> + <dd>The internal UUID assigned to the extension.</dd> + <dt>Manifest URL</dt> + <dd>If you click the link, the manifest for this extension is loaded in a new tab.</dd> +</dl> + +<h3 id="Updating_a_temporary_extension">Updating a temporary extension</h3> + +<p>If you install an extension in this way, what happens when you update the extension?</p> + +<ul> + <li>If you change files that are loaded on demand, like <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> or <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Browser_actions_2">popups</a>, then changes you make are picked up automatically, and you'll see them the next time the content script is loaded or the popup is shown.</li> + <li>For other changes, click the <strong>Reload</strong> button. This does what it says: + <ul> + <li>Reloads any persistent scripts, such as <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">background scripts</a></li> + <li>Parses the <code>manifest.json</code> file again, so changes to <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code>, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code>, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> or any other keys take effect</li> + </ul> + </li> +</ul> + +<h3 id="Installed_Extensions">Installed Extensions</h3> + +<p>The permanently installed extensions are listed in the next section, <strong>Extensions</strong>. For each one, you see something like the following:</p> + +<p><img alt="Screenshot of the debugging information panel for an installed extension" src="https://mdn.mozillademos.org/files/16651/installed_extension.png" style="display: block; margin: 0 auto;"></p> + +<p>The <strong>Inspect</strong> button, and the <strong>Extension ID</strong> and <strong>Internal UUID</strong> fields are the same as for temporary extensions.</p> + +<p>Just as it does with temporarily loaded extensions, the link next to <strong>Manifest URL</strong> opens the loaded manifest in a new tab.</p> + +<div class="note"> +<p><strong>Note: </strong>It's recommended that you use the Browser Toolbox, not the Add-on Debugger, for debugging WebExtensions. See <a href="/en-US/Add-ons/WebExtensions/Debugging">Debugging WebExtensions</a> for all the details.</p> +</div> + +<p>The Add-ons section in about:debugging lists all web extensions that are currently installed. Next to each entry is a button labeled <strong>Inspect</strong>.</p> + +<div class="blockIndicator note"> +<p><strong>Note: </strong>This list may include add-ons that came preinstalled with Firefox.</p> +</div> + +<p>If you click <strong>Inspect</strong>, the <a href="/en-US/docs/Mozilla/Add-ons/Add-on_Debugger">Add-on Debugger</a> will start in a new tab.</p> + +<p>{{EmbedYouTube("efCpDNuNg_c")}}</p> + +<p>See the page on the <a href="/en-US/docs/Mozilla/Add-ons/Add-on_Debugger">Add-on Debugger</a> for all the things you can do with this tool.</p> + +<h2 id="Workers">Workers</h2> + +<p>The Workers page shows your workers, categorised as follows:</p> + +<ul> + <li>All registered <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a></li> + <li>All registered <a href="/en-US/docs/Web/API/SharedWorker">Shared Workers</a></li> + <li>Other workers, including <a href="/en-US/docs/Web/API/ChromeWorker">Chrome Workers</a> and <a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers#Dedicated_workers">Dedicated Workers</a></li> +</ul> + +<p>You can connect the developer tools to each worker, and send push notifications to service workers.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16657/about_debugging_workers.png" style="border: 1px solid black; display: block; height: 642px; margin-left: auto; margin-right: auto; width: 567px;"></p> + +<h3 id="Service_worker_state">Service worker state</h3> + +<p>The list of service workers shows the state of the service worker in its <a href="https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle">lifecycle</a>. Three states are possible:</p> + +<ul> + <li><em>Registering</em>: this covers all states between the service worker's initial registration, and its assuming control of pages. That is, it subsumes the <em>installing</em>, <em>activating</em>, and <em>waiting</em> states.</li> + <li><em>Running</em>: the service worker is currently running. It's installed and activated, and is currently handling events.</li> + <li><em>Stopped</em>: the service worker is installed and activated, but has been terminated after being idle.</li> +</ul> + +<p><img alt="Screenshot of the debugging panel for a service worker that is in the Running state" src="https://mdn.mozillademos.org/files/16659/sample_service_worker.png" style="display: block; height: 237px; margin-left: auto; margin-right: auto; width: 556px;"></p> + +<div class="note"> +<p>This section uses a simple ServiceWorker demo, hosted at <a href="https://serviceworke.rs/push-simple/">https://serviceworke.rs/push-simple/</a>.</p> +</div> + +<h3 id="Unregistering_service_workers">Unregistering service workers</h3> + +<p>Click the <strong>Unregister</strong> button to unregister the service worker.</p> + +<h3 id="Sending_push_events_to_service_workers">Sending push events to service workers</h3> + +<p>To debug push notifications, you can set a breakpoint in the <a href="/en-US/docs/Web/API/PushEvent">push event</a> listener. However, you can also debug push notifications locally, without needing the server. Click the <strong>Push</strong> button to send a push event to the service worker.</p> + +<h3 id="Service_workers_not_compatible">Service workers not compatible</h3> + +<div> +<p>A warning message is displayed at the top of the <strong>This Firefox</strong> tab if service workers are incompatible with the current browser configuration, and therefore cannot be used or debugged.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16655/worker_warning.png" style="display: block; height: 44px; margin: 0px auto; width: 551px;"></p> +</div> + +<p>Service workers can be unavailable if the <code>dom.serviceWorkers.enable</code> preference is set to false in <code>about:config</code>.</p> diff --git a/files/el/εργαλεία/index.html b/files/el/εργαλεία/index.html new file mode 100644 index 0000000000..a49c30e6ab --- /dev/null +++ b/files/el/εργαλεία/index.html @@ -0,0 +1,230 @@ +--- +title: Εργαλεία Προγραμματισμού του Firefox +slug: Εργαλεία +translation_of: Tools +--- +<div class="summary">Εξετάστε, επεξεργαστείτε και αποσφαλματώστε την HTML, την CSS και την JavaScript στον υπολογιστή και το κινητό</div> + +<div class="column-container zone-callout"><a href="https://www.mozilla.org/en-US/firefox/aurora/" style="float: right; margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Εγκατάσταση του Firefox Aurora</a> + +<h3 id="Τι_νέο_υπάρχει_στο_Aurora">Τι νέο υπάρχει στο Aurora;</h3> + +<p>Το Aurora είναι μια έκδοση προεπισκόπησης έκδοσης του Firefox, όπου μπορείτε να έχετε τα τελευταία χαρακτηριστικά πριν εκδοθούν. Το τρέχον Aurora περιλαμβάνει αυτές τις ενημερώσεις για τα εργαλεία προγραμματισμού:</p> + +<ul> + <li><a href="https://www.youtube.com/watch?v=y2LcsxE2pR0">Μοντέλο χρωματικής επισήμανσης κουτιού στην Σελίδα Επιθεωρητή</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console#Working_with_iframes">Υποστήριξη κονσόλας ιστού για την εκτέλεση JS σε frames</a></li> + <li>Βελτιώσεις στην οθόνη της κονσόλας ιστού: χρωματικές <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console#Highlighting_and_inspecting_nodes">επισημάνσεις κώδικα, χρωματικές επισημάνσεις κόμβων και επιθεώρηση</a></li> + <li>Βελτιώσεις θεμάτων της επιθεώρησης δικτύου, <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#Network_request_fields"> μικρογραφίες εικόνων, προεπισκόπηση εικόνας</a>, <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#Preview">HTML προεπισκόπηση</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Browser_Console#Browser_Console_command_line">Η εισαγωγή της κονσόλας ιστού πρέπει τώρα να είναι ενεργοποιημένη στις Ρυθμίσεις</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools_Toolbox#Available_Toolbox_Buttons">Εικονίδια για το Scratchpad και άλλα εργαλεία είναι κρυμμένα ως προεπιλογή</a></li> +</ul> +</div> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7307/inspector.png" style="display: block; height: 467px; margin-left: auto; margin-right: auto; width: 815px;"></p> + +<div class="column-container"> +<div class="column-half"> +<h2 id="Creating" name="Creating">Δημιουργία</h2> + +<p>Εργαλεία σύνταξης για ιστοσελίδες και εφαρμογές ιστού.</p> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Scratchpad" title="Tools/Scratchpad">Scratchpad</a></dt> + <dd>'Ενας text editor (επεξεργαστής κειμένου) ενσωματωμένος στον Firefox, ο οποίος σας επιτρέπει τη σύνταξη και την εκτελέση της JavaScript.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Style_Editor">Επεξεργαστής στυλ</a></dt> + <dd>Δείτε και επεξεργαστείτε CSS styles για την τρέχουσα σελίδα.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Shader_Editor">Επεξεργαστής σκιών</a></dt> + <dd>Δείτε και επεξεργαστείτε τα vertex και fragment shaders που χρησιμοποιούνται από το <a href="/en-US/docs/Web/WebGL">WebGL</a>.</dd> +</dl> +</div> + +<div class="column-half"> +<h2 id="Exploring" name="Exploring">Εξερεύνηση και αποσφαλμάτωση</h2> + +<p>Ερευνείστε, ελέγξτε, και αποσφαλματώστε ιστοσελίδες και εφαρμογές ιστού.</p> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console">Κονσόλα ιστού</a></dt> + <dd>Δείτε τα μηνύματα που καταγράφονται σχετικά με μια ιστοσελίδα και αλληλεπιδράστε με την σελίδα χρησιμοποιώντας την JavaScript.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector">Επιθεωρητής σελίδας</a></dt> + <dd>Δείτε και αλλάξτε την σελίδα σε HTML και CSS.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger" title="Tools/Debugger">JavaScript διορθωτής σφαλμάτων κώδικα</a></dt> + <dd>Σταματείστε, ελέγξτε, ερευνείστε και αλλάξτε την JavaScript που τρέχει στην σελίδα.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor">Έλεγχος-Παρακολούθηση δικτύου</a></dt> + <dd>Δείτε τις απαιτήσεις του δικτύου που πραγματώνονται όταν φορτώνεται η σελίδα.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/GCLI">Εργαλειοθήκη προγραμματιστή</a></dt> + <dd>Μία γραμμή εντολών της επιφάνειας αλληλεπίδρασης για τα εργαλεία του προγραμματιστή.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/3D_View">Τρισδιάστατη (3D) εικόνα</a></dt> + <dd> Τρισδιάστατη (3D) θέαση της σελίδας.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Eyedropper">Eyedropper</a></dt> + <dd>Διαλέξτε ένα χρώμα από την σελίδα.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Working_with_iframes">Δουλέοντας με iframes</a></dt> + <dd>Πως να στοχοποιήσετε μια συγκεκριμένη iframe.</dd> +</dl> +</div> +</div> + +<hr> +<div class="column-container"> +<div class="column-half"> +<h2 id="Mobile" name="Mobile">Κινητά</h2> + +<p>Εργαλεία για προγραμματισμό σε κινητές συσκευές.</p> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/Firefox_OS/Using_the_App_Manager">Διαχειριστής Εφαρμογών</a></dt> + <dd>Σχεδιάστε και αναπτύξτε το λειτουργικό σύστημα (OS) Firefox .</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator" title="Tools/Firefox_OS_Simulator">Firefox OS εξομοιωτής</a></dt> + <dd>Τρέξτε και αποσφαλματώστε την εφαρμογή Firefox OS στον υπολογιστή σας, χωρίς να χρειάζετε να έχετε μια πραγματική συσκευή Firefox OS.</dd> + <dt><a href="https://developer.mozilla.org/en-us/docs/Tools/Responsive_Design_View">Εικόνα ανταπόκρισης σχεδίου</a></dt> + <dd>Δείτε πως η ιστοσελίδα ή η εφαρμογή θα έμοιαζε σε ένα διαφορετικό μέγεθος στην οθόνη χωρίς να χρειάζετε να αλλάξετε το μέγεθος του περιηγητή σας.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android" title="Firefox for Android">Αποσφαλμάτωση του Firefox για συσκευές Android</a></dt> + <dd>Συνδέστε την εργαλειοθήκη του προγραμματιστή με το Firefox για συσκευές Android.</dd> +</dl> +</div> + +<div class="column-half"> +<h2 id="Performance" name="Performance">Επιδόσεις</h2> + +<p>Διάγνωστε και επιδιορθώστε προβλήματα εκτέλεσης - αποδοτικότητας (επιδόσεων).</p> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Performance" title="Tools/Profiler">Ανάλυση προφίλ JavaScript </a></dt> + <dd>Ανακαλύψτε πού ο JavaScript κώδικας καταναλώνει χρόνο.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Paint_Flashing_Tool">Εργαλείο επισήμανσης χρώματος</a></dt> + <dd>Επισημαίνει τα μέρη της σελίδας που επαναχρωματίζονται σε απάντηση στα συμβάντα.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console#Reflow_events">Συμβάντα αναδιαμόρφωσης σύνδεσης</a></dt> + <dd>Δείτε συμβάντα αναδιαμόρφωσης στην κονσόλα ιστού.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#Performance_analysis">Επιδόσεις δικτύου </a></dt> + <dd>Δείτε πόσο χρόνο χρειάζονται να φορτώσουν όλα τα μέρη του ιστότοπου .</dd> +</dl> +</div> +</div> + +<hr> +<div class="column-container"> +<div class="column-half"> +<h2 id="Αποσφαλματώτοντας_τον_περιηγητή">Αποσφαλματώτοντας τον περιηγητή</h2> + +<p>Κατεξοχήν (ώς προεπιλογή) τα εργαλεία του προγραμματιστή επισυνάπτονται σε μια ιστοσελίδα ή σε μια εφαρμογή ιστού. Μπορείτε όμως να τα συνδέσετε συνολοκά στον περιηγητή. Αυτό είναι χρήσιμο για την ανάπτυξη του περιηγητή και των προσθέτων.</p> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Browser_Console">Κονσόλα Περιηγητή</a></dt> + <dd>Δείτε τα μηνύματα που καταγράφονται απο τον ίδιο τον περιηγητή καθώς και των προσθέτων, και τρέξτε τον κώδικα JavaScript στου περιηγητή .</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox">Εργαλειοθήκη Περιηγητή</a></dt> + <dd>Συνδέστε τα εργαλεία του προγραμματιστή στον ίδιο τον περιηγητή.</dd> +</dl> +</div> + +<div class="column-half"> +<h2 id="Επεκτείνοντας_τα_εργαλεία_του_προγραμματιστή">Επεκτείνοντας τα εργαλεία του προγραμματιστή</h2> + +<p>Τα εργαλεία του προγραμματιστή είναι σχεδιάσμενα με τέτοιο τρόπο ώστε να μπορούν να επεκταθούν. Τα πρόσθετα του Firefox μπορούν να προσπελάσουν τα εργαλεία του προγραμματιστή και τα εξαρτήματα που χρησιμοποιούν μπορούν να επεκτείνουν υπάρχοντα εργαλεία ή να προσθέσουν καινούρια εργαλεία. Με το πρωτόκολλο απομακρυσμένης αποσφαλμάτωσης μπορείτε να σχεδιάσετε τους δικούς σας πελάτες και εξυπηρετητές αποσφαλματώσης. Επίσης σας δίνει τη δυνατότητα να αποσφαλματώσετε ιστοσελίδες χρησιμοποιώντας δικά σας εργαλεία ή να αποσφαλματώσετε διαφορετικούς στόχους χρησιμοποιώντας τα εργαλεία του Firefox.</p> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Adding_a_panel_to_the_toolbox">Προσθέστε ένα νέο πίνακα στα εργαλεία προγραμματιστή</a></dt> + <dd>Γράψτε ένα πρόσθετο που προσθέτει έναν πίνακα στην εργαλειοθήκη.</dd> +</dl> + +<dl> + <dt><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol">Πρωτόκολλο Απομακρυσμένης Αποσφαλμάτωσης</a></dt> + <dd>Το πρωτόκολλο που χρησιμοποιείται για να συνδέει τα εργαλεία του προγραμματιστή του Firefox με τους στόχους αποσφαλμάτωσης π.χ όπως ο περιηγητής Firefox ή μία συσκευή με λειτουργικό Firefox.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Editor">Επεξεργαστής πηγαίου κώδικα</a></dt> + <dd>Μία έκδοση ενός επεξεργαστή κώδικα στον Firefox η οποιά μπορεί να ενσωματωθεί στα πρόσθετά σας.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger-API">The <code>Debugger</code> Interface</a></dt> + <dd>An API that lets JavaScript code observe the execution of other JavaScript code. The Firefox Developer Tools use this API to implement the JavaScript debugger.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Custom_output">Web Console custom output</a></dt> + <dd>How to extend and customize the output of the <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console">Web Console</a> and the <a href="https://developer.mozilla.org/en-US/docs/Tools/Browser_Console">Browser Console</a>.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Example_add-ons">Example devtools add-ons</a></dt> + <dd>Use these examples to understand how to implement a devtools add-on.</dd> +</dl> +</div> +</div> + +<hr> +<h2 id="Περισσότεροι_πόροι">Περισσότεροι πόροι</h2> + +<p>Αυτό το κεφάλαιο αναφέρει πόρους που δεν υποστηρίζονται από την ομάδα των εργαλείων του προγραμματιστή του Mozilla, αλλά οι οποίοι χρησιμοποιούνται ευρέως από τους προγραμματιστές του ιστού. Έχουμε συμπεριλάβει μερικά από τα πρόσθετα του Firefox σε αυτή τη λίστα, αλλά για την ολοκληρωμένη λίστα δείτε την κατηγορία: <a href="https://addons.mozilla.org/en-US/firefox/extensions/web-development/">"Προγραμματισμός Ιστού" στα πρόσθετα του mozilla.org</a>.</p> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="https://www.getfirebug.com/" title="Firebug">Firebug</a></dt> + <dd>Ένα δημοφιλές και πολύ δυνατό εργαλείο προγραμματισμού του ιστού, το οποίο συμπεριλαμβάνει τον JavaScript διορθωτή σφαλμάτων κώδικα, HTML και CSS θεατή και επεξεργαστή και παρακολούθηση δικτύου.</dd> + <dt><a href="/en-US/docs/DOM_Inspector" title="DOM_Inspector">Επιθεωρητής DOM </a></dt> + <dd>Επιθεώρησε, δες και επεξεργάσου την DOM στις ιστοσελίδες ή XUL(XML Mozilla) παράθυρα.</dd> + <dt><a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/" title="Web-Developer">Προγραμματιστής Ιστού</a></dt> + <dd>Προσθέτει ένα μενού επιλογών και μια εργαλειοθήκη στον περιηγητή με διάφορα εργαλεία για τους προγραμματιστές του ιστού.</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="https://webmaker.org/en-US/tools/">Εργαλεία Δημιουργίας Ιστού</a></dt> + <dd>Ένα σετ από εργαλεία που αναπτύχθηκαν απο τον Mozilla, το οποίο στοχεύει στον να ξεκινήσουν οι άνθρωποι να ασχολούνται με τον προγραμματισμού του ιστού.</dd> + <dt><a href="http://www.w3.org/Status.html" title="W3C">W3C Eπικυρωτής</a></dt> + <dd>Η W3C ιστοσελίδα φιλοξενεί ένα μεγάλο αριθμό από εργαλεία για να ελέγξεις την εγκυρότητα του ιστότοπού σου, συμπεριλαμβανομένων των <a href="http://validator.w3.org/" title="http://validator.w3.org/">HTML</a> και <a href="http://jigsaw.w3.org/css-validator/" title="http://jigsaw.w3.org/css-validator/">CSS</a>.</dd> + <dt><a href="http://www.jshint.com/" title="JSHint">JSHint (Υπόδειξη JS)</a></dt> + <dd>Εργαλέιο ανάλυσης του κώδικα JavaScript.</dd> +</dl> +</div> +</div> + +<h2 id="Subnav">Subnav</h2> + +<ol> + <li><a href="#">Creating</a> + + <ol> + <li><a href="/en-US/docs/Tools/Scratchpad" title="Scratchpad">Scratchpad</a></li> + <li><a href="/en-US/docs/Tools/Style_Editor" title="Style Editor">Style Editor</a></li> + <li><a href="/en-US/docs/Tools/Shader_Editor">Shader Editor</a></li> + </ol> + </li> + <li><a href="#">Debugging</a> + <ol> + <li><a href="/en-US/docs/Tools/Page_Inspector" title="Tools/Page_Inspector">Page Inspector</a></li> + <li><a href="/en-US/docs/Tools/Web_Console" title="Web Console">Web Console</a></li> + <li><a href="/en-US/docs/Tools/Debugger" title="Debugger">Debugger</a></li> + <li><a href="/en-US/docs/Tools/Network_Monitor" title="Network Monitor">Network Monitor</a></li> + <li><a href="/en-US/docs/Tools/GCLI" title="GCLI">Developer Toolbar</a></li> + <li><a href="/en-US/docs/Tools/3D_View" title="3D View">3D View</a></li> + </ol> + </li> + <li><a href="#">Mobile</a> + <ol> + <li><a href="/en-US/Firefox_OS/Using_the_App_Manager" title="App Manager">App Manager</a></li> + <li><a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android" title="Debugging Firefox for Android">Firefox for Android</a></li> + <li><a href="/en-US/docs/Tools/Firefox_OS_Simulator" title="Firefox OS Simulator">Firefox OS Simulator</a></li> + <li><a href="/en-US/docs/Tools/Responsive_Design_View" title="Responsive Design View">Responsive Design View</a></li> + </ol> + </li> + <li><a href="#">Performance</a> + <ol> + <li><a href="/en-US/docs/Tools/Profiler" title="Profiler">Profiler</a></li> + <li><a href="/en-US/docs/Tools/Paint_Flashing_Tool" title="Paint Flashing Tool">Paint Flashing Tool</a></li> + <li><a href="/en-US/docs/Tools/Web_Console#Reflow_events" title="Reflow event logging">Reflow Event Logging</a></li> + <li><a href="/en-US/docs/Tools/Network_Monitor#Performance_analysis" title="Network Performance">Network Performance</a></li> + </ol> + </li> + <li><a href="#">Debugging the browser</a> + <ol> + <li><a href="/en-US/docs/Tools/Browser_Console" title="Browser Console">Browser Console</a></li> + <li><a href="/en-US/docs/Tools/Browser_Toolbox" title="Browser Toolbox">Browser Toolbox</a></li> + </ol> + </li> + <li><a href="#">Extending the devtools</a> + <ol> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Adding_a_panel_to_the_toolbox">Adding a panel to the toolbox</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Example_add-ons">Example devtools add-ons </a></li> + <li><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol">Remote Debugging Protocol</a></li> + <li><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol_Stream_Transport">Stream Transport</a></li> + <li><a href="/en-US/docs/Tools/Editor" title="Source Editor">Source Editor</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger-API">The <code>Debugger</code> Interface</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Custom_output">Web Console custom output</a></li> + </ol> + </li> + <li><a href="/en-US/docs/Tools_Toolbox#Settings">Settings</a></li> + <li><a href="/en-US/docs/Tools/Release_notes">Release notes</a></li> +</ol> |