"Getting Started" page in ukrainian language (#13397)

yarik-vv · petetnt · commit abdf55d51f7c · 2017-08-24T09:16:51.000+03:00
* added getting started page in ukrainian language

* added screenshot for getting started page in ukrainian language

* added path for getting started page in ukrainian language

* сorrected minor grammatical errors

* updated docs license
diff --git a/samples/uk/Починаємо роботу/index.html b/samples/uk/Починаємо роботу/index.html
@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<html>
+
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title>ПОЧАТОК РОБОТИ З BRACKETS</title>
+        <meta name="description" content="Інтерактивний посібник для початківців в Brackets.">
+        <link rel="stylesheet" href="main.css">
+    </head>
+    <body>
+
+		<h1>ПОЧАТОК РОБОТИ З BRACKETS</h1>
+		<h2>Ваш власний посібник!</h2>
+		
+		<!--
+			ЗРОБЛЕНО З <3 І JAVASCRIPT
+		-->
+		
+		
+		<p>
+			Ласкаво просимо у ранню версію Brackets, нового редактора з відкритим кодом для вебу 
+			наступного покоління. Ми великі фанати стандартів і хочемо побудувати кращий інструмент 
+			для JavaScript, HTML і CSS та пов'язаних з ними відкритих веб-технологій. Це наш
+			скромний початок.
+		</p>
+		
+		<!--
+			ЩО ТАКЕ BRACKETS?
+		-->
+		<p>
+			<em>Багато у чому, Brackets - незвичайний редактор.</em>
+			Одна примітна особливість у тому, що цей редактор написаний на JavaScript,
+			HTML та CSS. Це означає, що більшість користувачів Brackets мають необхідні
+			навички для доопрацювання і розширення редактора. Насправді, ми використовуємо Brackets
+			кожен день для того, щоб покращувати його. Він так само має декілька особливостей,
+			таких як Швидке Редагування, Інтерактивний Перегляд та інших, які ви не зможете
+			знайти у інших редакторах.
+			Читайте далі для того, щоб дізнатися, як використовувати ці особливості редактора.
+		</p>
+		
+		
+		<h2>Ми випробуємо декілька нових штук</h2>
+		
+		<!--
+			ВІДНОСИНИ МІЖ HTML, CSS ТА JAVASCRIPT
+		-->
+		<h3>Швидке редагування CSS та JavaScript</h3>
+		<p>
+			Тепер ніякого перемикання між документами і втрати контексту. Під час редагування HTML використовуйте 
+			поєднання клавіш <kbd>Cmd/Ctrl + E</kbd> для відкриття швидкого редактора, який показує все пов'язане 
+			з цим рядком CSS. Зробіть зміну CSS-стилів, натисніть <kbd>ESC</kbd> і поверніться назад до редагування 
+			HTML. Або просто залиште блок з CSS-правил відкритим, і вони стануть частиною вашого HTML-редактора. 
+			Якщо ви натиснете <kbd>ESC</kbd> поза швидким редактором, усі CSS-правила закриються.
+		</p>
+		
+		<samp>
+			Хочете побачити це в дії? Поставте курсор на тезі <!-- <samp> --> вище і натисніть
+			<kbd>Cmd/Ctrl + E</kbd>. Ви повинні побачити, як вище з'явиться швидкий редактор CSS. Праворуч ви
+			побачите список CSS-правил, які відносяться до цього тегу. Просто прокрутіть правила вниз, використовуючи
+			<kbd>Alt + Up/Down</kbd>, щоб знайти те, що ви хочете відредагувати.
+		</samp>
+		
+		<a href="screenshots/quick-edit.png">
+			<img alt="Скріншот який показує CSS Quick Edit" src="screenshots/quick-edit.png" />
+		</a>
+		
+		<p>
+			Ви так само можете використовувати ці гарячі клавіши при роботі з кодом JavaScript,
+			для того, щоб побачити зміст функції, просто наведіть курсор на її назву.
+			На даний момент всередині вбудованого редактора не можна відкрити ще один, тому ви можете
+			використовувати тільки Швидке Редагування, коли курсор знаходиться у "повноекранному" редакторі.
+		</p>
+		
+		<!--
+			ІНТЕРАКТИВНИЙ ПЕРЕГЛЯД
+		-->
+		<h3>Переглядайте зміни CSS наживо в браузері!</h3>
+		<p>
+			Ви знаєте цю мороку зі "зберегти / перезавантажити", яку ми робимо роками? Коли ви робите
+			зміни у вашому редакторі, натискаєте зберегти, перемикаєтеся у браузер і потім натискаєте
+			перезавантажити, щоб нарешті побачити результат? Разом з Brackets цього більше не доведеться робити.
+		</p>
+		<p>
+			Brackets відкриє <em>пряме з'єднання</em> з вашим локальним браузером та направить ваші зміни CSS, як
+			тільки ви їх надрукуєте! Ви, можливо, вже робили щось подібне з інструментами, вбудованими в браузер,
+			але з Brackets більше немає потреби копіювати та вставляти фінальний CSS назад у редактор.
+			Ваш код запускається у браузері, але живе у вашому редакторі!
+		</p>
+		<h3>Підсвічування HTML-елементів і CSS-правил у реальному часі</h3>
+		<p>
+		  З Brackets стало простіше зрозуміти, як зміни в HTML і CSS позначаться на сторінці. Коли ваш курсор 
+			знаходиться на CSS-правилі, Brackets підсвітить всі його елементи в браузері. Те ж саме і з редагуванням 
+			HTML-файлу, Brackets буде підсвічувати відповідні HTML-елементи у браузері.
+		</p>
+		<samp>
+			Якщо у вас є встановлений Google Chrome, ви можете спробувати це самі. Натисніть на іконку
+			блискавки у правому верхньому кутку або натисніть <kbd>Cmd/Ctrl + Alt + P</kbd>. Коли Інтерактивний 
+			Перегляд включений у HTML-документі, всі підключені CSS-документи можуть редагуватися у реальному
+			часі. Іконка зміниться з сірої на золоту, коли Brackets встановить з'єднання з вашим браузером.
+			
+			Тепер, поставте курсор на тезі <!-- <img> --> вище і використовуйте <kbd>Cmd/Ctrl + E</kbd>, щоб
+			відкрити записані CSS-правила. Спробуйте змінити розмір межі з 10 пікселів до 20, або змінити
+			колір фону з "transparent" на "hotpink". Якщо Brackets і ваш браузер працюють разом, ви побачите, 
+			як ваші зміни миттєво з'являться у вашому браузері. Круто, правда?
+		</samp>
+				
+		<p class="note">
+			Сьогодні, Brackets підтримує Інтерактивний Перегляд тільки для CSS. Зараз ми працюємо над підтримкою
+			Інтерактивного Перегляду для HTML та JavaScript. У поточній версії ви не побачите змін в вашому HTML-
+			або JavaScript-файлі до тих пір, поки не збережете документ. Інтерактивний Перегляд працює тільки з
+			Google Chrome. Але в майбутньому ми плануємо додати цю можливість для всіх основних браузерів.
+		</p>
+		<h3>Швидкий перегляд</h3>
+		<p>
+			Для тих з нас, хто до цієї пори не запам'ятав значення кольорів для HEX або RGB, Brackets дозволяє швидко і просто
+			подивитися безпосередньо, який колір використовується. У будь-якому CSS- або HTML-файлі, просто наведіть курсор 
+			на значення кольору або градієнта і Brackets автоматично відобразить цей колір / градієнт. Те ж саме і з зображеннями:
+			просто наведіть курсор на посилання з зображенням у редакторі і Brackets виведе мініатюру цього зображення.
+		</p>
+				
+		<samp>
+			Спробуйте швидкий перегляд самі, помістіть курсор на тег <!-- <body> --> вгорі цього документа і натисніть
+			<kbd>Cmd/Ctrl + E</kbd> для того, щоб відкрити швидкий редактор CSS. Зараз просто наведіть курсор на будь-яке
+			значення кольору в CSS. Ви так само можете побачити це в дії з градієнтом, відкривши швидкий редактор CSS на
+			тезі <!-- <html> --> та навівши курсор на будь-яке значення фонового малюнка. Спробуйте швидкий перегляд 
+			зображень, помістіть ваш курсор на будь-який скріншот у цьому документі.
+		</samp>
+		
+		<!--
+			РОЗКАЖІТЬ, ЩО ВИ ДУМАЄТЕ
+		-->
+		<h2>Приймайте участь</h2>
+		<p>
+			Brackets &mdash; проект з відкритим кодом. Веб-розробники з усіх куточків світу сприяють
+			створення кращого редактора коду. Багато розробляють доповнення, які розширюють можливості
+			Brackets. Розкажіть нам, що ви думаєте, поділіться ідеями або безпосередньо підтримайте проект.
+		</p>
+		<ul>
+			<li><a href="https://brackets.io">Brackets.io</a></li>
+			<li><a href="https://blog.brackets.io">Блог команди Brackets</a></li>
+			<li><a href="https://github.com/adobe/brackets">Brackets на GitHub</a></li>
+			<li><a href="https://github.com/adobe/brackets/wiki">Brackets Wiki</a></li>
+			<li><a href="https://groups.google.com/group/brackets-dev">Поштова розсилка розробників Brackets</a></li>
+			<li><a href="https://twitter.com/#!/brackets">@Brackets у Twitter</a></li>
+			<li>Спілкуйтеся з розробниками Brackets в IRC в #brackets на Freenode</li>
+		</ul>
+
+    </body>
+</html>
+<!--
+
+    [[[[[[[[[[[[[[[      ]]]]]]]]]]]]]]]
+    [::::::::::::::      ::::::::::::::]
+    [::::::::::::::      ::::::::::::::]
+    [::::::[[[[[[[:      :]]]]]]]::::::]
+    [:::::[                      ]:::::]
+    [:::::[                      ]:::::]
+    [:::::[                      ]:::::]
+    [:::::[                      ]:::::]
+    [:::::[     CODE THE WEB     ]:::::]
+    [:::::[  https://brackets.io  ]:::::]
+    [:::::[                      ]:::::]
+    [:::::[                      ]:::::]
+    [:::::[                      ]:::::]
+    [:::::[                      ]:::::]
+    [::::::[[[[[[[:      :]]]]]]]::::::]
+    [::::::::::::::      ::::::::::::::]
+    [::::::::::::::      ::::::::::::::]
+    [[[[[[[[[[[[[[[      ]]]]]]]]]]]]]]]
+
+-->
diff --git a/samples/uk/Починаємо роботу/main.css b/samples/uk/Починаємо роботу/main.css
@@ -0,0 +1,60 @@
+html {
+    background: #e6e9e9;
+    background-image: linear-gradient(270deg, rgb(230, 233, 233) 0%, rgb(216, 221, 221) 100%);
+    -webkit-font-smoothing: antialiased;
+}
+
+body {
+    background: #fff;
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
+    color: #545454;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 16px;
+    line-height: 1.5;
+    margin: 0 auto;
+    max-width: 800px;
+    padding: 2em 2em 4em;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    color: #222;
+    font-weight: 600;
+    line-height: 1.3;
+}
+
+h2 {
+    margin-top: 1.3em;
+}
+
+a {
+    color: #0083e8;
+}
+
+b, strong {
+    font-weight: 600;
+}
+
+samp {
+    display: none;
+}
+
+img {
+    animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1;
+    background: transparent;
+    border: 10px solid rgba(0, 0, 0, 0.12);
+    border-radius: 4px;
+    display: block;
+    margin: 1.3em auto;
+    max-width: 95%;
+}
+
+@keyframes colorize {
+    0% {
+        -webkit-filter: grayscale(100%);
+        filter: grayscale(100%);
+    }
+    100% {
+        -webkit-filter: grayscale(0%);
+        filter: grayscale(0%);
+    }
+}
diff --git a/samples/uk/Починаємо роботу/screenshots/quick-edit.png b/samples/uk/Починаємо роботу/screenshots/quick-edit.png
diff --git a/src/nls/uk/urls.js b/src/nls/uk/urls.js
@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2012 - present Adobe Systems Incorporated. All rights reserved.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a
+ * copy of this software and associated documentation files (the "Software"),
+ * to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the
+ * Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+ * DEALINGS IN THE SOFTWARE.
+ *
+ */
+
+define({
+    // Relative to the samples folder
+    "GETTING_STARTED"           : "uk/Починаємо роботу",
+    "ADOBE_THIRD_PARTY"         : "https://www.adobe.com/go/thirdparty_uk/",
+    "MDN_DOCS_LICENSE"          : "https://creativecommons.org/licenses/by-sa/2.5/deed.uk"
+});
diff --git a/src/nls/urls.js b/src/nls/urls.js
@@ -52,6 +52,7 @@ define(function (require, exports, module) {
         "sv": true,
         "zh-cn": true,
         "zh-tw": true,
-        "tr": true
+        "tr": true,
+        "uk": true
     };
 });
