Коли справа доходить до розмови про веб-дизайні, багато людей починають перли на кшталт "броузер" або того гірше. Нижче наведено список найпопулярніших термінів і виразів по фронтендів, для загальної освіти. Читаємо, вчимо, говоримо правильно!
адаптивний дизайн, підхід до дизайну сайтів, що враховує їх адаптацію під різні пристрої і умови, протиставляється поширеній «фіксованому» дизайну тільки для комп'ютерів.
анімація, плавна зміна візуальних параметрів об'єкта.
ресурс, зазвичай допоміжний, як стилі і картинки для сторінки, напр. ресурси сайту - site assets.
перевірка, умова, що перевіряється, употр. в тестуванні, напр. перевірка поля не пройшла - field assert has failed.
область веб-технологій, які працюють на сервері.
внутрішня частина серверної системи, займається обробкою даних.
background
фон, напр. фонове зображення - background image.
базова лінія, уявна лінія в підставі букв в рядку.
блокова цитата, HTML-елемент для виділення цитованої нестрочной області документа. Може містити атрибут cite з посиланням на першоджерело.
рамка, зовнішня видима частина блоку, напр. рамка зліва - border-left.
скругление рамки, напр. скругление рамки на 3 пікселя - border-radius: 3px, скругление верхнього лівого кута - border-top-left-radius, див. також округлені кути.
блокова модель, система розмірностей блоку, складається з вмісту, відступу і рамки, не включає зовнішній відступ і обведення.
тінь (блоку), напр. тінь блоку червона - box-shadow is red.
хлібні крихти, допоміжна навігація на сайті, послідовно відображає структуру або пройдені кроки.
елемент інтерфейсу, при натисканні відправляє форму або виробляє іншу дію
елемент форми button або input type = "button" (також submit і image).
зворотний виклик, виконання коду по завершенню роботи функції, напр. передай значення в зворотному виклику - pass value in a callback.
структурна одиниця таблиці.
елемент таблиці td або th
cellpadding
відступ в осередках таблиці.
відстань між осередками таблиці.
елемент інтерфейсу для вибору одного або декількох варіантів, напр. Галочка неактивний - checkbox is disabled.
елемент форми input type = "checkbox"
clear
clear: left - очищення зліва
clear: right - очищення справа
clear: both - повне очищення
client-side
кліентсайд, область технологій, які працюють в браузері, часто синонім фронтенда.
замикання, функція, яка містить в тілі посилання на змінні, оголошені в навколишньому коді.
сущ. код, неісчіслім. (Як цукор), напр. помилка в коді - error in code але не помилка в кодах (неправильно).
гл. писати код, верстати, програмувати, напр. верстати сайт - to code a site.
colspan
об'єднання стовпців, HTML-атрибут для об'єднання декількох елементів таблиці в одному рядку.
стовпець, колонка, вертикальна область в таблиці, розкладці або тексті.
кросбраузерності, що працює у всіх браузерах, разом.
багатоплатформовий, що працює під на всіх платформах, разом.
CSS Working Group (CSSWG)
Робоча група CSS
неактивний, стан елемента форми, в якому його можуть редагувати лише адміністратори, напр. неактивна кнопка - disabled button.
display: none - прихований вид
display: block - блоковий вид
display: inline - рядковий вид
display: inline-block - вид сатиричного блоку
об'єктна модель документа, будинок
доктайпів, конструкція виду DOCTYPE html на початку документа, яка позначає використовувану версію HTML.
меню, що випадає, елемент інтерфейсу, що розкриває додаткову інформаціію при активації.
плавність, функція плавності, описує зміна швидкості анімації за допомогою ключових слів або кривих Безьє, напр. плавність переходу лінійна - transition easing is linear.
ем, одиниця виміру в CSS, яка залежить від розміру шрифту батька, напр. розмір шрифту 3 ема - font-size: 3em.
активний, стан елемента форми, в якому його зміна дозволено, напр. активна кнопка - enabled button.
движок, напр. Сафарі працює на движку Вебком - Safari is based on WebKit engine.
фавікон, значок сайту, зазвичай 16 × 16 пікселів в форматі ICO.
група полів, елемент, який об'єднує кілька полів форми, напр. зелена рамка на групі полів - green border on a fieldset.
заголовок фігури, назву або підпис до фігури.
дод. плаваючий, властивість блоку, що змушує наступні блоки обтікати його, напр. розкладка на плаваючих блоках - float layout.
гл. обтікати, слідувати впритул до плаваючого блоку, напр. текст обтікає справа - text is floating to the right.
гл. притискати, упиратися вправо або вліво, зазвичай через плаваючих властивостей, напр. притисніть блок вліво - float block to the left.
font-weight - насиченість
font-weight: normal - нормальна
font-weight: bold - напівжирний, (не "жирний»)
font-weight: bolder - жирніше
font-weight: lighter - світліше
font-style - стиль шрифту
font-style: normal - прямий
font-style: italic - курсив
font-style: oblique - похилий
font-size - розмір шрифту, кегль
font-family - сімейство шрифту, гарнітура
font-family: serif - із зарубками
font-family: sans-serif - без зарубок
font-family: monospace - моно
характерна візуальна область в кінці сторінки.
елемент footer - смислова частина з метаінформацією.
фреймворк, набір готових рішень для спрощення розробки.
область технологій для розробки веб-інтерфейсів, включає допоміжні інструменти і технології працюють в браузері або кліентсайд.
зовнішня частина серверної системи, що відповідає за прийом даних, відправку відповідей і генерацію коду для браузера, входить в серверсайд.
повноекранний режим, поведінка програми або її частини, в якому вона займає весь екран цілком.
поступова деградація, підхід, при якому для старих браузерів пишуться милиці, які призводять зовнішній вигляд і поведінку сайту у відповідність з новими браузерами, однак в подальшому від старих браузерів і милиць для них відмовляються.
градієнт, плавний перехід від одного кольору до іншого.
linear gradient - лінійний градієнт
radial gradient - радіальний градієнт
conical gradient - конічний градієнт
grid
сітка, спосіб упорядкувати розташування елементів в дизайні за допомогою вертикального або горизонтального ритму, напр. модульна сітка - module grid.
характерна візуальна область на початку сторінки.
елемент header - смислова Озаглавлювати частина.
height
впроваджувати, реалізовувати напр. Firefox впровадив підтримку всього - Firefox has implemented support of everything.
inline block - рядковий блок
inline box - елемент рядка в рядковому форматування: частина наповнення контейнера рядка, до якої безпосередньо застосовуються CSS-правила, напр. анонімний елемент рядка - anonymous inline box.
inline element - рядковий елемент
inline styles - локальні стилі
input
поле (введення), елемент форми. TODO.
кернинг, відстань між парами букв, що враховує їх форму для більш рівномірного набору.
ключовий кадр, одна із заданих точок анімації, зміни між якими відбуваються автоматично.
покадрова анімація, спосіб завдання анімації в CSS за допомогою ключових кадрів.
розкладка, розташування основних блоків на сторінці, напр. розкладка в 3 стовпці - 3 columns layout.
межбуквенное відстань, трекінг, загальна відстань між буквами в тексті, відрізняється від кернинга.
контейнер рядки в рядковому форматуванні: віртуальний контейнер, що містить в собі всі елементи одного рядка.
висота рядка, інтерліньяж, відстань між базовими лініями тексту.
список, послідовне перерахування групи елементів.
ordered list - впорядкований список, відсортований по якомусь принципом.
unordered list - невпорядкований список, в якому порядок прямування не має значення.
зовнішній відступ, напр. нижній негативний відступ 10 пікселів - margin-bottom: -10px.
матриця (трансформації), опис трансформації об'єкта за допомогою матриці.
макет, зовнішній вигляд або дизайн сайту різного ступеня деталізації, напр. дизайнер надіслав макет сторінки - designer sent a page mock-up.
дод. модальний, блокуючий інтерфейс для виконання якої-небудь дії, напр. модальний діалог - modal dialog.
сущ. модальне вікно (діалог), елемент інтерфейсу, см. модальний.
multiple
множинний, повторений два і більше разів, напр. множинні фони - multiple backgrounds.
мультіколонкі, механізм з CSS, що дозволяє вибудувати текст в декілька колонок, напр. підтримка мультіколонок в IE - multiple columns support in IE. Переважно, ніж громіздкі «множинні колонки».
Багатоколоночних, що складається з декількох колонок, напр. багатоколонкові розкладка - multiple columns layout.
вкладений, що знаходиться всередині чого-небудь, напр. подвійна вкладеність - double nesting.
вузол, елемент структури, напр. дочірній вузол - child node.
прозорість, ступінь прозорості, напр. прозорість 10% - opacity: 0.1.
непрозорий, ступінь непрозорості, напр. непрозорий на 75% - opaque by 75%, значить прозорість 25%.
обведення, зовнішній рівномірний контур елемента, який не бере участі в блокової моделі.
внутрішній відступ, напр. верхній внутрішній відступ 10 пікселів - padding-top: 10px.
посторінкова навігація, зазвичай список посилань з номерами сторінок, на які розбитий документ.
поділ на сторінки, поділ документа на окремі сторінки для зручності читання, завантаження або інших цілей.
pattern
швидкодія, характеристика швидкості завантаження, відтворення і т.п. напр. швидкодія CSS.
піксель, одиниця виміру для екранного дизайну, в множині пікселі, скор. пк.
Поліфему скрипт, який відтворює відсутню функціональність, напр. новий Поліфем для IE6 - new polyfill for IE6.
спливаюче вікно, попап, окреме вікно або елемент інтерфейсу, який з'являється поверх поточного, напр. настирливий попап - annoying popup.
position: static - статичне
position: absolute - абсолютна
position: relative - відносне
position: fixed - фіксоване
position: sticky - закріплене
препроцесор, інструмент, що перетворює код з одного синтаксису в інший, напр. CSS-препроцесор Sass - Sass CSS preprocessor.
Проміс, спосіб асинхронного виконання скриптів, протиставляється використанню зворотних викликів.
індикатор виконання, елемент інтерфейсу, що відображає прогрес виконання операції.
прогресивне поліпшення, підхід, при якому всі браузери отримують базову функціональність, а більше отримують тільки здатні на це, наприклад округлені кути, градієнти і тіні.
радіокнопка, елемент форми input type = "radio" для вибору одного варіанта з декількох, напр. радіокнопка обрана - radio button is checked.
рем, одиниця виміру в CSS, яка залежить від розміру шрифту кореневого елементу html, напр. розмір шрифту 3 рема - font-size: 3rem.
скидання, зазвичай скидання стилів за замовчуванням в CSS, напр. файл скидання стилів - style reset file.
Responsive Images Community Group (RICG)
Громадська група з адаптивним зображень
округлені кути, напр. округлені кути вийшли з моди - rounded corners are out of fasion, див. також скругление рамки.
горизонтальна область в таблиці або розкладці.
елемент таблиці tr
об'єднання рядків, HTML-атрибут для об'єднання декількох елементів таблиці в одному стовпці.
скафолдінг, автоматична генерація коду за описом, метод метапрограмування.
сущ. масштаб
гл. масштабувати
скрипт, інструкції, які описують поведінку сторінок, напр. скрипти поки не довантажити - scripts are not loaded yet.
семантика, смислове навантаження HTML-елементів, напр. семантична верстка - semantic coding.
серверсайд, область технологій, які працюють на сервері, часто синонім бекенд.
тіньової DOM, тіньова модель документа
шим, код, що допомагає уніфікувати роботу з браузерами, зазвичай реалізує відсутню або нормалізує існуючу підтримку, напр. HTML5-шим для IE8 - HTML5 shim for IE8.
бічна панель, бічна частина сайту з другорядним вмістом, напр. справа знаходиться бічна панель.
сущ. нахил
гл. нахиляти
source maps
карти коду, спеціальна розмітка, що дозволяє привести у відповідність вихідні файли і скомпільований код для налагодження.
сущ. стилі, напр. застосувати стилі до елементу - apply styles to an element, мн.ч. краще: стилі елемента, а не стиль елемента (неправильно).
гл. оформляти, напр. як оформити СЕЛЕКТА - how to style selects. Переважно, ніж двозначне «стилізувати».
вкладка, один з шарів інтерфейсу сайту або програми, який активується вибором його заголовка, напр. відкрити в новій вкладці - open in new tab.
таб, клавіша табуляції, вставляє символ табуляції, перемикає фокус на наступний елемент інтерфейсу, або доповнює частково набране слово, напр. натисніть контрол-таб - press Ctrl Tab.
таб, символ табуляції, має регульований ширину і використовується для відступів в коді, напр. таби краще прогалин - tabs are better than spaces.
текстова область, елемент форми для введення багаторядкового тексту.
вирівнювання, використовувати вирівнювання, орієнтація рядків тексту в певному напрямку, або рівномірно по ширині блоку.
text-align: left - вліво
text-align: right - вправо
text-align: justify - по ширині
тінь (тексту), напр. тінь тексту червона - text-shadow is red.
мініатюра, зменшена копія зображення.
заголовок, якщо мова йде про елемент title, або про назву елемента.
підказка, якщо мова йде про атрибут title = "".
перемикати, переводити з одного стану в інший, переключити класи - toggle classes.
підказка, допоміжна інформація, що з'являється при наведенні на елемент або при його активації, зокрема title = "".
трансформація, напр. трансформація масштабуванням в 2 рази - transform: scale (2).
перехід, напр. лінійний перехід тривалістю 2 секунди - transition: all 2s linear.
переміщати, переміщення об'єкта за допомогою CSS-трансформації, напр. переміщення на X і Y - translate (x, y).
типографіка, оформлення тексту за допомогою вибору гарнітури, параметрів рядка і інших.
одиниця зміни, напр. одиниця виміру «рем» - rem unit.
утиліта, програма з вузьким призначенням.
браузерні префікс, приставка до CSS-властивості -webkit- або -moz-, напр. додайте браузерні префікси - add vendor prefixes.
вертикальне вирівнювання, розташування елементів по вертикалі в межах рядка тексту або таблиці.
видима область документа в рамках екрана.
елемент meta name = "viewport", керуючий адаптацією сторінок на мобільних пристроях.
website, web site
World Wide Web Consortium (W3C)
Консорціум всесвітньої мережі, організація, яка розробляє веб-стандарти. Переводити «web» як «павутину» в XXI столітті вже смішно.
обхідний рішення (прийом), спосіб вирішення завдання в обмежених умовах, напр. придумати обхідний прийом - to figure out workaround.
УВАГА! Ви використовуєте застарілий браузер Internet Explorer
Даний сайт побудований на передових, сучасних технологіях і не підтримує Internet Explorer 6-ої і 7-ої версії.
