Skip to content
This repository was archived by the owner on Sep 6, 2021. It is now read-only.

Commit abdf55d

Browse files
yarik-vvpetetnt
yarik-vv
authored and
petetnt
committed
"Getting Started" page in ukrainian language (#13397)
* 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
1 parent fa18156 commit abdf55d

File tree

5 files changed

+263
-1
lines changed

5 files changed

+263
-1
lines changed

‎samples/uk/Починаємо роботу/index.html

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<title>ПОЧАТОК РОБОТИ З BRACKETS</title>
8+
<meta name="description" content="Інтерактивний посібник для початківців в Brackets.">
9+
<link rel="stylesheet" href="main.css">
10+
</head>
11+
<body>
12+
13+
<h1>ПОЧАТОК РОБОТИ З BRACKETS</h1>
14+
<h2>Ваш власний посібник!</h2>
15+
16+
<!--
17+
ЗРОБЛЕНО З <3 І JAVASCRIPT
18+
-->
19+
20+
21+
<p>
22+
Ласкаво просимо у ранню версію Brackets, нового редактора з відкритим кодом для вебу
23+
наступного покоління. Ми великі фанати стандартів і хочемо побудувати кращий інструмент
24+
для JavaScript, HTML і CSS та пов'язаних з ними відкритих веб-технологій. Це наш
25+
скромний початок.
26+
</p>
27+
28+
<!--
29+
ЩО ТАКЕ BRACKETS?
30+
-->
31+
<p>
32+
<em>Багато у чому, Brackets - незвичайний редактор.</em>
33+
Одна примітна особливість у тому, що цей редактор написаний на JavaScript,
34+
HTML та CSS. Це означає, що більшість користувачів Brackets мають необхідні
35+
навички для доопрацювання і розширення редактора. Насправді, ми використовуємо Brackets
36+
кожен день для того, щоб покращувати його. Він так само має декілька особливостей,
37+
таких як Швидке Редагування, Інтерактивний Перегляд та інших, які ви не зможете
38+
знайти у інших редакторах.
39+
Читайте далі для того, щоб дізнатися, як використовувати ці особливості редактора.
40+
</p>
41+
42+
43+
<h2>Ми випробуємо декілька нових штук</h2>
44+
45+
<!--
46+
ВІДНОСИНИ МІЖ HTML, CSS ТА JAVASCRIPT
47+
-->
48+
<h3>Швидке редагування CSS та JavaScript</h3>
49+
<p>
50+
Тепер ніякого перемикання між документами і втрати контексту. Під час редагування HTML використовуйте
51+
поєднання клавіш <kbd>Cmd/Ctrl + E</kbd> для відкриття швидкого редактора, який показує все пов'язане
52+
з цим рядком CSS. Зробіть зміну CSS-стилів, натисніть <kbd>ESC</kbd> і поверніться назад до редагування
53+
HTML. Або просто залиште блок з CSS-правил відкритим, і вони стануть частиною вашого HTML-редактора.
54+
Якщо ви натиснете <kbd>ESC</kbd> поза швидким редактором, усі CSS-правила закриються.
55+
</p>
56+
57+
<samp>
58+
Хочете побачити це в дії? Поставте курсор на тезі <!-- <samp> --> вище і натисніть
59+
<kbd>Cmd/Ctrl + E</kbd>. Ви повинні побачити, як вище з'явиться швидкий редактор CSS. Праворуч ви
60+
побачите список CSS-правил, які відносяться до цього тегу. Просто прокрутіть правила вниз, використовуючи
61+
<kbd>Alt + Up/Down</kbd>, щоб знайти те, що ви хочете відредагувати.
62+
</samp>
63+
64+
<a href="screenshots/quick-edit.png">
65+
<img alt="Скріншот який показує CSS Quick Edit" src="screenshots/quick-edit.png" />
66+
</a>
67+
68+
<p>
69+
Ви так само можете використовувати ці гарячі клавіши при роботі з кодом JavaScript,
70+
для того, щоб побачити зміст функції, просто наведіть курсор на її назву.
71+
На даний момент всередині вбудованого редактора не можна відкрити ще один, тому ви можете
72+
використовувати тільки Швидке Редагування, коли курсор знаходиться у "повноекранному" редакторі.
73+
</p>
74+
75+
<!--
76+
ІНТЕРАКТИВНИЙ ПЕРЕГЛЯД
77+
-->
78+
<h3>Переглядайте зміни CSS наживо в браузері!</h3>
79+
<p>
80+
Ви знаєте цю мороку зі "зберегти / перезавантажити", яку ми робимо роками? Коли ви робите
81+
зміни у вашому редакторі, натискаєте зберегти, перемикаєтеся у браузер і потім натискаєте
82+
перезавантажити, щоб нарешті побачити результат? Разом з Brackets цього більше не доведеться робити.
83+
</p>
84+
<p>
85+
Brackets відкриє <em>пряме з'єднання</em> з вашим локальним браузером та направить ваші зміни CSS, як
86+
тільки ви їх надрукуєте! Ви, можливо, вже робили щось подібне з інструментами, вбудованими в браузер,
87+
але з Brackets більше немає потреби копіювати та вставляти фінальний CSS назад у редактор.
88+
Ваш код запускається у браузері, але живе у вашому редакторі!
89+
</p>
90+
<h3>Підсвічування HTML-елементів і CSS-правил у реальному часі</h3>
91+
<p>
92+
З Brackets стало простіше зрозуміти, як зміни в HTML і CSS позначаться на сторінці. Коли ваш курсор
93+
знаходиться на CSS-правилі, Brackets підсвітить всі його елементи в браузері. Те ж саме і з редагуванням
94+
HTML-файлу, Brackets буде підсвічувати відповідні HTML-елементи у браузері.
95+
</p>
96+
<samp>
97+
Якщо у вас є встановлений Google Chrome, ви можете спробувати це самі. Натисніть на іконку
98+
блискавки у правому верхньому кутку або натисніть <kbd>Cmd/Ctrl + Alt + P</kbd>. Коли Інтерактивний
99+
Перегляд включений у HTML-документі, всі підключені CSS-документи можуть редагуватися у реальному
100+
часі. Іконка зміниться з сірої на золоту, коли Brackets встановить з'єднання з вашим браузером.
101+
102+
Тепер, поставте курсор на тезі <!-- <img> --> вище і використовуйте <kbd>Cmd/Ctrl + E</kbd>, щоб
103+
відкрити записані CSS-правила. Спробуйте змінити розмір межі з 10 пікселів до 20, або змінити
104+
колір фону з "transparent" на "hotpink". Якщо Brackets і ваш браузер працюють разом, ви побачите,
105+
як ваші зміни миттєво з'являться у вашому браузері. Круто, правда?
106+
</samp>
107+
108+
<p class="note">
109+
Сьогодні, Brackets підтримує Інтерактивний Перегляд тільки для CSS. Зараз ми працюємо над підтримкою
110+
Інтерактивного Перегляду для HTML та JavaScript. У поточній версії ви не побачите змін в вашому HTML-
111+
або JavaScript-файлі до тих пір, поки не збережете документ. Інтерактивний Перегляд працює тільки з
112+
Google Chrome. Але в майбутньому ми плануємо додати цю можливість для всіх основних браузерів.
113+
</p>
114+
<h3>Швидкий перегляд</h3>
115+
<p>
116+
Для тих з нас, хто до цієї пори не запам'ятав значення кольорів для HEX або RGB, Brackets дозволяє швидко і просто
117+
подивитися безпосередньо, який колір використовується. У будь-якому CSS- або HTML-файлі, просто наведіть курсор
118+
на значення кольору або градієнта і Brackets автоматично відобразить цей колір / градієнт. Те ж саме і з зображеннями:
119+
просто наведіть курсор на посилання з зображенням у редакторі і Brackets виведе мініатюру цього зображення.
120+
</p>
121+
122+
<samp>
123+
Спробуйте швидкий перегляд самі, помістіть курсор на тег <!-- <body> --> вгорі цього документа і натисніть
124+
<kbd>Cmd/Ctrl + E</kbd> для того, щоб відкрити швидкий редактор CSS. Зараз просто наведіть курсор на будь-яке
125+
значення кольору в CSS. Ви так само можете побачити це в дії з градієнтом, відкривши швидкий редактор CSS на
126+
тезі <!-- <html> --> та навівши курсор на будь-яке значення фонового малюнка. Спробуйте швидкий перегляд
127+
зображень, помістіть ваш курсор на будь-який скріншот у цьому документі.
128+
</samp>
129+
130+
<!--
131+
РОЗКАЖІТЬ, ЩО ВИ ДУМАЄТЕ
132+
-->
133+
<h2>Приймайте участь</h2>
134+
<p>
135+
Brackets &mdash; проект з відкритим кодом. Веб-розробники з усіх куточків світу сприяють
136+
створення кращого редактора коду. Багато розробляють доповнення, які розширюють можливості
137+
Brackets. Розкажіть нам, що ви думаєте, поділіться ідеями або безпосередньо підтримайте проект.
138+
</p>
139+
<ul>
140+
<li><a href="http://brackets.io">Brackets.io</a></li>
141+
<li><a href="http://blog.brackets.io">Блог команди Brackets</a></li>
142+
<li><a href="http://github.com/adobe/brackets">Brackets на GitHub</a></li>
143+
<li><a href="http://github.com/adobe/brackets/wiki">Brackets Wiki</a></li>
144+
<li><a href="http://groups.google.com/group/brackets-dev">Поштова розсилка розробників Brackets</a></li>
145+
<li><a href="https://twitter.com/#!/brackets">@Brackets у Twitter</a></li>
146+
<li>Спілкуйтеся з розробниками Brackets в IRC в #brackets на Freenode</li>
147+
</ul>
148+
149+
</body>
150+
</html>
151+
<!--
152+
153+
[[[[[[[[[[[[[[[ ]]]]]]]]]]]]]]]
154+
[:::::::::::::: ::::::::::::::]
155+
[:::::::::::::: ::::::::::::::]
156+
[::::::[[[[[[[: :]]]]]]]::::::]
157+
[:::::[ ]:::::]
158+
[:::::[ ]:::::]
159+
[:::::[ ]:::::]
160+
[:::::[ ]:::::]
161+
[:::::[ CODE THE WEB ]:::::]
162+
[:::::[ http://brackets.io ]:::::]
163+
[:::::[ ]:::::]
164+
[:::::[ ]:::::]
165+
[:::::[ ]:::::]
166+
[:::::[ ]:::::]
167+
[::::::[[[[[[[: :]]]]]]]::::::]
168+
[:::::::::::::: ::::::::::::::]
169+
[:::::::::::::: ::::::::::::::]
170+
[[[[[[[[[[[[[[[ ]]]]]]]]]]]]]]]
171+
172+
-->

‎samples/uk/Починаємо роботу/main.css

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
html {
2+
background: #e6e9e9;
3+
background-image: linear-gradient(270deg, rgb(230, 233, 233) 0%, rgb(216, 221, 221) 100%);
4+
-webkit-font-smoothing: antialiased;
5+
}
6+
7+
body {
8+
background: #fff;
9+
box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
10+
color: #545454;
11+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
12+
font-size: 16px;
13+
line-height: 1.5;
14+
margin: 0 auto;
15+
max-width: 800px;
16+
padding: 2em 2em 4em;
17+
}
18+
19+
h1, h2, h3, h4, h5, h6 {
20+
color: #222;
21+
font-weight: 600;
22+
line-height: 1.3;
23+
}
24+
25+
h2 {
26+
margin-top: 1.3em;
27+
}
28+
29+
a {
30+
color: #0083e8;
31+
}
32+
33+
b, strong {
34+
font-weight: 600;
35+
}
36+
37+
samp {
38+
display: none;
39+
}
40+
41+
img {
42+
animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1;
43+
background: transparent;
44+
border: 10px solid rgba(0, 0, 0, 0.12);
45+
border-radius: 4px;
46+
display: block;
47+
margin: 1.3em auto;
48+
max-width: 95%;
49+
}
50+
51+
@keyframes colorize {
52+
0% {
53+
-webkit-filter: grayscale(100%);
54+
filter: grayscale(100%);
55+
}
56+
100% {
57+
-webkit-filter: grayscale(0%);
58+
filter: grayscale(0%);
59+
}
60+
}

‎samples/uk/Починаємо роботу/screenshots/quick-edit.png

210 KB
Loading

‎src/nls/uk/urls.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/*
2+
* Copyright (c) 2012 - present Adobe Systems Incorporated. All rights reserved.
3+
*
4+
* Permission is hereby granted, free of charge, to any person obtaining a
5+
* copy of this software and associated documentation files (the "Software"),
6+
* to deal in the Software without restriction, including without limitation
7+
* the rights to use, copy, modify, merge, publish, distribute, sublicense,
8+
* and/or sell copies of the Software, and to permit persons to whom the
9+
* Software is furnished to do so, subject to the following conditions:
10+
*
11+
* The above copyright notice and this permission notice shall be included in
12+
* all copies or substantial portions of the Software.
13+
*
14+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
19+
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
20+
* DEALINGS IN THE SOFTWARE.
21+
*
22+
*/
23+
24+
define({
25+
// Relative to the samples folder
26+
"GETTING_STARTED" : "uk/Починаємо роботу",
27+
"ADOBE_THIRD_PARTY" : "http://www.adobe.com/go/thirdparty_uk/",
28+
"MDN_DOCS_LICENSE" : "http://creativecommons.org/licenses/by-sa/2.5/deed.uk"
29+
});

‎src/nls/urls.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ define(function (require, exports, module) {
5252
"sv": true,
5353
"zh-cn": true,
5454
"zh-tw": true,
55-
"tr": true
55+
"tr": true,
56+
"uk": true
5657
};
5758
});

0 commit comments

Comments
 (0)