Як досвід створення бітів може допомогти розібратися в HTML і CSS

Якось у суботу я засидівся до двох годин ночі за новим проектом. Так як я бітмейкер, ви, напевно, думаєте, що на екрані було щось на зразок цього:



Але насправді, там було ось що:


Джерело: Мій екран в ту суботу, в дві години ночі

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

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

Приблизно так, тільки вусів поменше.

Тому, природно, я ходив з думкою: «Слава богу, мені нічим таким займатися не доводиться. Просто сиджу собі цілісінький день, роблю біти пачками!».

Що тут скажеш. Недовго це тривало.

Завдяки Soundcloud, Spotify і Bandcamp, музикантам стало значно простіше ділитися своїми творіннями з публікою. З іншого боку, композиції зараз розкидані по такій величезній кількості платформ, що слухачам складно знайти саме те, що потрібно.

Було ясно: мені потрібен веб-сайт, який би служив централізованої майданчиком для зберігання всіх моїх робіт. Мені хотілося, щоб все було, як у моїх улюблених музикантів: акуратна панель навігації, велике фонове зображення зі мною, підкреслено дивиться повз об'єктива.


Данину поваги моїм героям.

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

До того ж всі їх варіанти дизайну вже приїлися. Набираєш имялюбимогомузыканта.сом — і в тисячу перший раз бачиш все той же набив оскому шаблон.

Мені хотілося створити сторінку з нуля — незважаючи на те, що ніяких фонових знань з HTML або CSS у мене не було. Хотілося кинути собі виклик.

Тому я заплатив за курс від Udemy, скачав Brackets і приступив до занять. І — вау! — відразу ж підсів.

Через якихось пару місяців сайт був запущений — і я зробив його своїми силами, від і до.

Чому це досвід мені так сподобався?

Ось кілька речей, які мені здалися мені особливо класними:

1) Філософія «зроби з лайна цукерку»: можливість створювати сирої контент в HTML (нехай навіть страшний до сліз), а потім прикрашати його в CSS.

2) Використання існуючих ресурсів в новому контексті: накачайте звідусіль іконок, шрифтів і так далі і підженете їх під загальну концепцію сайту.

3) Застосування сторонніх інструментів: доступність плагінів jQuery, які я міг використовувати, щоб поліпшити цю сторінку.

Коли я трохи абстрагувався і поміркував, стало ясно, чому мені все це припало до душі. Адже ті ж самі аспекти міцно вбудовані і в процес битмейкинга!

Можливо, це прозвучить сумнівно, але для мене стало очевидно, що між веб-розробкою і створенням музики існує сильний зв'язок. Давайте не пошкодуємо часу і розглянемо цей зв'язок докладніше.

Процес битмейкинга в загальних рисах

Для тих, хто не в курсі, як створюються треки в хіп-хопі, я спрощено представлю весь процес як сукупність трьох кроків:

  1. Драм-партія
  2. Семплування
  3. Інструментування
Ці етапи я буду розбирати на прикладі свого біта «Clear Skies Ahead» (джерело: Soundcloud). Я вибрав його тому, що структура у нього досить проста і всі вихідні коди доступні… ну і взагалі, це прикольний біт.

Виявляємо зв'язку

Подібність №1: Драм-партію можна порівняти з HTML-контентом, який потім доопрацьовується в CSS



Хотілося б виділити дві основні характеристики HTML:

1) HTML задає структуру, вибудовуючи загальну схему сторінки. У стандартному HTML-документі є такі теги, як html, head, body, footer, які чітко окреслюють кожну з секцій і відсилають до всіх необхідних CSS файлів і плагінів jQuery.

2) HTML несе в собі контент, який згодом певним чином оформляється. Хоча HTML відповідає в першу чергу за контент, ми спочатку пишемо код так, щоб простіше було надати йому той чи інший стиль згодом. Перші версії, як правило, виглядають огидно, але ми готуємо контент до того, щоб прикрасити його в CSS.

Такі ж характеристики ми знаходимо і в драм-партії:

1) Драм-партія задає структуру. Це каркас мелодії. Вона формує ритм, яким буде слідувати слухач.

2) Драм-партія несе в собі звуки, які згодом певним чином оформляються. Спочатку їм не вистачає індивідуальності. Зазвичай тільки після застосування ефектів трек «оживає».

Давайте послухаємо драм-партію до розглянутого нами біту «Clear Skies Ahead». Базовий патерн складається з бочок, снейров і зацикленої барабанної партії.

Звучить… як-то ніяк. Структура є, ритм простежується, але не відчувається індивідуальності. Бочка ріже слух, снейры звучать мляво, а барабани губляться на задньому плані.

А значить, потрібно зробити все стильно і красиво!



Для посилення низької частоти у бочки я застосував до неї еквалайзер. Цей ефект дозволяє регулювати різні частоти звуку. Щоб зробити снейры жвавіше, я додав реверберацію (3), яка створює ефект луни. Зробити семплированную (4)
партію помітніше мені допоміг ефект під назвою stereo imager (5).

Все це можна уподібнити присвоєння елементу класів «equalizer», «reverb» і «stereo-imager» на різних ділянках коду.

<div class="equalizer">
<h2>Kicks</h2>
<p>The "boom"</p>
</div>
<div class="reverb">
<h2>Snare</h2>
<p>The "bap"</p>
</div>
<div class="stereo-imager">
<h2>Drum Break</h2>
<p>"Boom-bap"</p>
</div>

Далі ми можемо визначити стиль для кожного з класів CSS.

.equalizer {
font-weight: bolder;
}
.reverb {
text-shadow: 1px 1px blue;
}
.stereo-imager {
letter-spacing: 1px;
}

Ось звуковий еквівалент стилізації драм-партії.

Як ви самі чуєте, застосування доречних ефектів вдихнуло в трек життя. Так само йдуть справи і з контентом на вашій веб-сторінці його можна представляти аудиторії тільки якщо він був належним чином оформлений в CSS.

Подібність №2: Семплування — майже те ж саме, що адаптування іконок і шрифтів під нову концепцію



Як би ви не ставилися до семплированию, культуру хіп-хопу це стандартна практика. Я особисто дуже його люблю і вважаю відмінним способом вдихнути нове життя у твір.

У хіп-хопі існує техніка під назвою «нарізка» (chopping) — існуюча пісня розбивається на маленькі фрагменти, які потім перемішуються в іншій послідовності, щоб вийшов новий трек.

У цьому кліпі я на прикладі треку «Clear Skies Ahead» докладно розглядаю три кроки:

  1. Знайдіть пісню для вибірки (з 00:00)
  2. Складіть з фрагментів нову композицію (з 00:13)
  3. Додайте ефекти і додайте їх в біт (з 00:24)
Створення веб-сайту відбувається за тією ж схемою.

Скажімо, ви робите простеньку сторінку з чотирма картинками по центру, у яких змінюється прозорість, коли на них наводять мишку. Ті ж три кроки актуальні і в цьому випадку:

1. Відберіть картинки, які будете використовувати

Можете заглянути на Unsplash або будь-якої іншої стоковий сайт, щоб підібрати зображення за своїм смаком.

2. За допомогою HTML розташуйте картинки в тому порядку, який відповідає вашій концепції.

<div class="box">
<img src="spring.jpg" alt="spring">
<img src="summer.jpg" alt="summer">
<img src="fall.jpg" alt="fall">
<img src="winter.jpg" alt="winter">
</div>

3. Додайте необхідні ефекти в CSS, щоб надати сторінці закінчений вигляд.

.box img {
/* Resize images */ 
width: 50%;
height: auto;
/* Center images */
display: block;
margin-left: auto;
margin-right: auto;
/* Space out images */
margin-bottom: 30px;
}
img:hover {
opacity: 0.5;
transition: 0.3 s;
}

Процес активного пошуку джерел, вибудовування їх у потрібній послідовності і стилізації у відповідності із власними уподобаннями відбувається як в хіп-хопі, так і в веб-розробці.

Подібність №3: Додавання віртуального інструменту — все одно що додавання плагін jQuery, щоб поліпшити цю сторінку.



В якості фінального акорду я хотів додати низький звук саб-баса, який зв'яже всі воєдино. Він виступить в якості «клею» для композиції, вирівняє низькі частоти і заповнить порожнечі.

«А що робити, якщо у мене немає гітари? Та й була б, я все одно не вмію на ній грати!»

Тут в гру вступають віртуальні інструменти. Вони існують у вигляді стічних звуків і сторонніх плагінів і дають доступ до звуків, які іншим чином складно було б отримати. З їх допомогою ви можете генерувати звук синтезатора, не маючи відповідного модуля, звук скрипки, навіть якщо цієї скрипки немає під рукою, і так далі.

Для «Clear Skies Ahead» я додав віртуальний інструмент, який містив саб-бас, записав його і застосував до існуючого біту.

По суті, використання віртуальних інструментів демонструє той же підхід, що і застосування плагінів jQuery для створення сайту. В обох випадках ви отримуєте доступ до компонентів, які проблематично було б виготовити своїми силами.

Щоб проілюструвати цей процес на матеріалі мого веб-сайту, давайте додамо галерею, щоб відображати ті чотири картинки з порами року, про яких йшла мова раніше. Замість того, щоб робити її самостійно, скористаємося яким-небудь симпатичним плагіном від jQuery. Я зупинив вибір на Swipebox:


Ось посилання на мій JSFiddle

Як і у випадку з семплированием, я вдався до сторонніх ресурсів, акуратно вмонтувавши їх на відповідну платформу. Застосовані ресурси були у відкритому доступі і збагатили досвід для відвідувача або слухача.

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

І це підводить мене до останнього висновку.

Щоб вчитися було веселіше, знайдіть зв'язок між своїми поточними захопленнями і тією областю, яку хочете освоїти.



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

В моєму випадку розуміння зв'язку між HTML/CSS і створенням музики значно прискорило процес навчання і зробило його цікавіше. Працюючи над сайтом, я входив у той же потокове стан, який часто відчуваю в процесі створення бітів.

Що спільного у ваших інтересів з тими новими навичками, яким ви намагаєтеся навчитися? На перший погляд вони можуть здатися докорінно різними, але не поспішайте, подивіться уважніше. Раз вже такі несхожі з увазі вміння, як розробка і створення бітів, можна об'єднати, то у вас не повинно виникнути проблем з тим, щоб виявити таку ж сильну зв'язок між вашими захопленнями!

Примітки(1) Бочка — великий барабан, по якому визначається темп композиції.
(2) Снейр — малий барабан.
(3) Реверберація — це процес поступового зменшення інтенсивності звуку при його багаторазових відображеннях. Іноді під реверберацією розуміється імітація даного ефекту з допомогою ревербераторів.
(4) Семплування – використання семплів для написання своєї музики. Семпл — відносно невеликий оцифрований звуковий фрагмент. Семпли широко використовуються при написанні сучасної музики.
(5) Stereo imager – стереокартина, яка, по суті, є додатковою характеристикою звукової сцени, а фактично ні чим іншим, як її образністю. Цей параметр визначає величину і локалізацію музичних образів на звуковий сцені.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.