Словник термінів веб-дизайну

Angular (Ангулар, Ангуляр) — один з найпопулярніших і сучасних фреймворків (бібліотек) JavaScript, що розвивається Google. Простими словами, це набір готових рішень, що дозволяють швидко створювати складні й динамічні інтерфейси на сайтах.

Angular можна розглядати як більш сучасну і потужну альтернативу широко відомої JavaScript бібліотеці jQuery.

Інша популярна JavaScript бібліотека для створення сучасних інтерфейсів сайтів — React від компанії Facebook.

Backend, back-end (бекенд) — це та «задня» частина сайту, яка невидима відвідувачеві, але яка безпосередньо відповідає за роботу сайту. Якщо порівняти сайт з кораблем, то бекенд — це машинне відділення.

Для простоти можна вважати, що бекенд — це CMS або движок сайту з усіма його зв’язками з механізмами хостинга — базою даних, веб-сервером, поштовими службами.

Відповідно, у сайту, крім бекенду, ще є фронтенд — лицьова частина, яку бачить відвідувач сайту і з якою він безпосередньо взаємодіє.

Бекенд і фронтенд сайту пишуться на різних мовах: для бекенду характерні мови PHP, Python, Ruby, Go, а для фронтенду — JavaScript, HTML, CSS. Тому у розробників сайтів є поділ спеціалізацій — програмісти бекенду і фронтенду.

Бекенд вважається більш складною і більш «програмістською» частиною створення сайту, а фронтенд — більш простою і пов’язаною з дизайном і естетикою сайту.

Bootstrap (Бутстрап) — найпопулярніший CSS фреймворк від компанії Twitter для адаптивної верстки сайтів. Bootstrap — це набір готових CSS файлів, який можна підключити до вашого сайту, щоб швидко і якісно зробити його «мобільним» — тобто таким, щоб він коректно відображався на телефонах і планшетах.

Основа Bootstrap — модульна сітка з 12 колонок, яка вміє перелаштовуватися в залежності від розміру екрану пристрою відвідувача вашого сайту.

Крім того, Bootstrap включає в себе стилі оформлення безлічі елементів сучасних сайтів: кнопок, форм, спливаючих вікон, навігаційних панелей і т.п.

Bootstrap — не єдиний спосіб створення адаптивної верстки. Є альтернативи — такі, як Foundation. Також можна зробити адаптивність повністю вручну, використовуючи Media Queries. Це значно довше, але цілком можливо.

Важлива перевага Bootstrap — в його масовості. Він використовується так давно і на такій великій кількості сайтів, що можна бути впевненим, що більшість проблем сумісності з браузерами та операційними системами в ньому вирішені.

CMS (сі-ем-ес, це-ме-ес) — скорочення від Content Management System. Українською — система керування контентом (вмістом). Людською мовою — движок сайту. За суттю, CMS — це тип програм, які дозволяють керувати сайтом.

На відміну від звичайних програм, які встановлюються і працюють прямо на вашому комп’ютері, планшеті або смартфоні, CMS встановлюється безпосередньо на сайт (точніше, на хостинг). Тому, щоб скористатися CMS, вам потрібно знати адресу сторінки для входу, логін і пароль.

З іншого боку, завдяки цій особливості CMS, ви можете більше ні про що не турбуватися: щоб керувати вашим сайтом, оснащеним CMS, потрібен тільки інтернет і браузер.

Django (Джанго) — найвідоміший фреймворк для мови програмування Python. На відміну від популярних CMS, таких, як WordPress або Drupal, Django не призначений для того, щоб швидко створити сайт одного з стандартних типів. Django призначений для розробки більш складних і індивідуальних рішень.

Важлива відмінність Django — він написаний не на найпопулярнішій мові програмування PHP, а на мові Puthon, який вважається більш якісним і передовим. Це висуває додаткові вимоги і до розробників сайтів на Django, і до хостингу, на якому розміщуватиметься написаний на Django сайт.

Django часто використовують у великих проектах — таких, як Instagram, Disqus, Mozilla, The Washington Times, Pinterest, YouTube, Google та інших.

Drupal (Дру́пал, Дру́пел) — безкоштовна система керування сайтами, що входить до трійки найпопулярніших в світі.

Для роботи Drupal підходить звичайний хостинг з PHP і базою даних MySQL або MariaDB.

На Drupal можна створювати як прості сайти-візитки, так і великі портали та інтернет-магазини.

Drupal підтримує багатомовність «з коробки».

Frontend, front-end (фронтенд, фронт-енд) — лицьова частина сайту, яку бачить та з якою безпосередньо взаємодіє відвідувач сайту.

Фронтенд — та частина розробки сайту, яка в підсумку робить найбільше візуальне враження на відвідувачів. Інша частина розробки сайту — бекенд, невидима користувачеві серверна частина.

До фронтенду також відносяться такі поняття веб-дизайну, як UI та UX — User Interface та User eXperience — це те, наскільки інтуїтивно зрозумілий користувачеві спосіб роботи з сайтом та наскільки приємне враження сайт залишає у користувача.

У механізмах фротненда в першу чергу використовуються технології JavaScript та CSS/HTML.

Minification (мініфікація) — спосіб збільшення швидкодії сайту за рахунок автоматичного зменшення розміру коду HTML, CSS та JavaScript файлів.

Коли розробники пишуть код, вони намагаються підтримувати його в читабельному вигляді — тобто в такому, щоб його можна було легко переглядати та розуміти. В усякому разі, так роблять хороші веб-розробники.

Для цього використовуються правила оформлення коду — Code Style Guide, свої для кожної мови програмування. Відповідно до цих правил, програмісти пишуть код з актівниі використанням численних пробілів, щоб виділяти відступами блоки коду, з коментарями та іншими прийомами, які полегшують читання коду.

Але для роботи сайту всі ці красивості коду не потрібні. Часто можна взагалі прибрати всі зайві пробіли та переноси рядків і перетворити код сайту в один суцільний довгий рядок, і при цьому він буде продовжувати працювати. А вага файлів з кодом зменшиться, і сайт буде завантажуватися швидше.

Наприклад, комплект CSS файлів Bootstrap можна стиснути за допомогою автоматичної мініфікаціі на 20-25%.

З файлами в такому мініфіцірованном вигляді складно працювати веб-програмістам, тому зазвичай мініфікація використовується як частина процесу деплоя — тобто в момент перенесення сайту на робочий хостинг.

Open Source (опен сорс) — ідеологія вільного (що включає в себе, в тому числі, безкоштовність) розповсюдження програмного забезпечення. Здавалося б, яке відношення має ідеологія до розробки сайтів? Як мінімум таке, що переважна більшість сайтів в світі працюють саме на програмах, написаних у відповідності з ідеологією Open Source — тобто на ліцензійно чистих і легально безкоштовних.

У розумінні ідеї Open Source є багато нюансів. Наприклад, те, що Open Source — це більше, ніж просто безкоштовне програмне забезпечення. Для Open Source важлива доступність початкових кодів програми, що дозволяє всім бажаючим розвивати і покращувати програму або робити власні модифіковані версії.

Протилежність Open Source — пропрієтарне, або невільне, програмне забезпечення (proprietary software). Ключова відмінність пропрієтарних програм в тому, що вони не тільки платні, але й їхні власники обмежують права користувачів на використання, копіювання або модифікацію цих програм.

Open Source має юридичне втілення у вигляді вільних ліцензій, з яких найвідоміша і використовується частіше за всіх — ліцензія GPL.

Для розробників сайтів і для власників сайтів важливо те, що Open Source забезпечує ліцензійну чистоту використовуваних програм. Тобто ви можете бути спокійні щодо ліцензійних відрахувань (їх немає) і легальності використання програмного забезпечення (вона є).

На програмах, написаних під Open Source ліцензіями, працюють не тільки більшість серверів в інтернеті, але і всі найпопулярніші CMS, а також безліч інструментів веб-розробників.

Найбільші світові технологічні компанії також підтримують рух Open Source і вносять істотний внесок в розробку Open Source проектів. Компанія Google відкрила спеціальний портал для підтримки Open Source: opensource.google.com

Більш того — рух Open Source підтримують навіть уряди, зокрема, США. Агентство національної безпеки США (АНБ) створило сайт nationalsecurityagency.github.io, на якому пропонує свої розробки для будь-якого використання, в т.ч. комерційного, і прямо говорить: «Уряд отримує вигоду у вигляді поліпшення технологій силами Open Source співтовариства».

PHP (пі-аш-пі, пе-ха-пе) — наймасовіша мова програмування сайтів. На PHP написані всі самі популярні CMS в інтернеті — WordPress, Drupal, Joomla. PHP найбільш широко підтримується на хостингах.

PHP — мова програмування, що інтерпретується (або сценарна мова). Це означає, що для запуску на комп’ютері програми на мові PHP потрібен працюючий на цьому комп’ютері інтерпретатор PHP. Тому в описах хостингів пишуть про підтримку PHP — це означає, що на хостингу працює інтепретатор PHP.

З одного боку, це незручно — ви не можете взяти файл з розширенням .php і просто його запустити — у кращому випадку буде показаний його код, в гіршому не відбудеться взагалі нічого. Але коли мова йде про розробку сайтів, то стає відчутно колосальну перевагу в зручності і оперативності розробки на мові, яка інтерпретується: написаний на PHP код не потрібно компілювати, на правильно налаштованому веб-сервері з підтримкою PHP цей код буде працювати відразу.

В сучасних умовах PHP — хороший варіант для малих і середніх сайтів і для ситуацій, коли потрібно мінімізувати витрати на початковому етапі розробки.

Звичайному розробнику або власнику сайту з нюансів PHP потрібно звертати увагу тільки на те, яка версія PHP використовується в вашому проекті, тому що є відмінності в підтримці хостингами старіших версій (5.4 і раніше) і нової 7-ї версії.

Python (Пітон, Пайтон) — мова програмування, яка в розробці сайтів поширена менше, ніж PHP, але частіше використовується в великих і відповідальних проектах.

У практиці веб-розробки Python, як і PHP, використовується як мова програмування, яка інтерпретується.

Для Python немає таких масових готових CMS, як WordPress або Drupal для PHP, але є потужний фреймворк Django, який істотно полегшує і прискорює розробку сайтів на Python.

Python розвивається за підтримки Google і широко використовується у внутрішніх проектах компанії.

React, ReactJS, React.js (Реакт, Реакт-джі-ес) — бібліотека JavaScript для створення сучасних інтерфейсів сайтів. React створений компанією Facebook і розвивається за підтримки Instagram і великого співтовариства розробників.

Існує досить велика кількість JavaScript бібліотек для вирішення схожих завдань — наприклад, Angular від компанії Google. При цьому можна використовувати і React, і Angular в одному проекті — оскільки спеціалізація у них відрізняється.

React використовується такими великими проектами, як Netflix, Yahoo, Airbnb, Sony, Atlassian і багатьма іншими.

SEO (вимовляється просто «сео») — абревіатура Search Engines Optimisation (оптимізація для пошукових систем). Ця назва комплексу робіт, який виконується для того, щоб забезпечити положення певного сайту на якомога більш високих позиціях при пошуку в Google, Яндексі, Bing та інших пошукових системах.

Інший синонім SEO, крім прямої розшифровки абревіатури як «оптимізація для пошукових систем» — це «просування в пошукових системах». Поняття просування в цьому випадку означає поступове отримання і поліпшення двох головних результату для сайту, до якого застосовуються технології SEO:

  • підвищення позицій сайту в результатах пошуку в Google та в інших пошукових системах;
  • збільшення кількості ключових слів, за якими сайт можна знайти в Google та в інших пошукових системах.

SEO — синтетична дисципліна, яка перебуває на стику технологій програмування, HTML-верстки, літературної роботи з текстами, Public Relations та статистичного аналізу. Це пов’язано з тим, що для визначення найбільш підходящих для користувачів результатів пошуку сучасні пошукові системи (в першу чергу Google) враховують велику кількість самих різних чинників.

Детальніше про те, як працює SEO, дивіться в нашій статті «SEO — оптимізація сайту для Google».

SVG (ес-ве-ге, ес-ві-джі) — абревіатура Scalable Vector Graphics (масштабована векторна графіка). Це мова розмітки, подібний до HTML, але для зображень. На основі мови SVG створюються файли зображень з розширенням .svg, які можна включати в сторінки сайтів. Переваги зображень у форматі SVG — вони мало важать і їх можна збільшувати і зменшувати без втрати якості.

Існує два широко поширених і принципових різних типи комп’ютерної графіки: растрова (.jpg, .png, .gif, .psd) і векторна (.svg, .ai, .eps). Растрова графіка — це завжди прямокутник, заповнений пікселями (прямокутниками окремих кольорів), а векторна графіка — це малюнок, який створюється на основі формул.

У растрової графіки головне обмеження — дозвіл зображення, фактично — кількість пікселів, які є в зображенні. У векторної графіки головний недолік — деталізація. Растровою графікою добре передаються фотографічні зображення, а векторною — малювання, такі, як логотипи, креслення і схеми.

Переваги векторної графіки, до якої відноситься SVG, в тому, що векторне зображення можна масштабувати (збільшувати і зменшувати) без втрати якості (без появи пікселів або нерізкості), і в розмірі файлу, який зазвичай істотно менше, ніж у аналогічного растрового зображення.

Scrum (Скрам) — один з найбільш популярних методів ефективної організації командної роботи над програмними проектами, в т.ч. при розробці веб-сайтів.

Існують різні способи організації робочого процесу при розробці сайту. Скрам — один з найбільш популярних способів..

Головна ідея в Скрам — розбивка роботи на спринти, порівняно короткі (1-6 тижнів) етапи. Під час спринту розробники зосереджені на створенні запланованого в рамках спринту функціоналу і не відволікаються ні на що інше.

По завершенню спринту тестується створений функціонал і коригується план наступного спринту.

Ця методика дозволяє, з одного боку, надійно і в очікувані терміни досягати запланованих цілей, а з іншого — гнучко реагувати на зміни завдань, які неминуче виникають по мірі розробки проекту.