ЖМК-301/2. Веб-дизайн. Практическое занятие №10. Skeuomorphism-дизайн с интерактивными элементами (пианино)

Вам нужно создать страницу, реализованную по принципам скеоморфизма и имитирующую на экране реальный объект (пианино). Для этого вам потребуются:

- 24 аудио фрагмента в mp3, отвечающие за ноты (белые клавиши) и бемоль/диез (черные клавиши) по схеме:



загрузите все аудио фрагменты в репозиторий;

- макет клавиш пианино, реализованный через классическое сочетание HTML + CSS + JS;

- дополнительная иллюстрация, находящаяся над клавишами. В моем примере она демонстрирует открытую крышку музыкального инструмента. Также загрузите исходное фото в репозиторий.


CSS

1) Создаем идентификатор пианино. Ширину и отступ сверху регулируйте в зависимости от той картинки, которую будете в дальнейшем использовать:     

 #piano {

   width: 1200px;

   margin-top: 150px;

     }

2) Добавляем селектор иллюстрации. Также отрегулируйте положение иллюстрации в зависимости от расположения клавиш пианино:    

  img {

  position: absolute;

  margin-top: -560px;

  margin-left: 10px;

     }

3) В селекторе основного содержимого страницы укажите фоновый цвет. В моем примере он черный:

  body {

  text-align: center;

}

4) Добавляем маркированный список для расположения клавиш:

ol {

  position: relative;

  display: inline-block;

  margin-top: -250px;

}

5) Идентификаторы клавиш левой руки и правой руки:

#leftHand {

  margin-right: -20px;

}


#rightHand {

  margin-left: -20px;

}

6) Идентификатор аудио:

#audio {

  z-index: -1;

  background-color: transparent;

}

7) Отображение клавиш и их активности:

li {

  position: relative;

  background-color: #FFFFF0;

  z-index: 1;

  padding: 220px 30px 100px;

  display: inline-block;

  border: 1px solid #ccc;

  font-size: 20px;

  margin-right: -1px;

  margin-left: -2px;

  border-radius: 0px 0px 7px 7px;

  color: transparent;

  box-shadow: -3px 7px 4px #2a2a2a;

}


li:active {

  box-shadow: -1px 2px 3px #2a2a2a;

}

8) создаем класс черных клавиш для бемоль/диез:

.black-key {

  position: absolute;

  z-index: 2;

  background-color:#1d1d1d;

  padding: 230px 12px 12px;

  top: 0px;

  margin-left: -31px;

  box-shadow: none;

  border-width: 0px 6px 12px;

  border-color: #000;

  border-bottom-color: #2a2a2a;

}

9) И их отображение как активных:

.black-key:hover {

    color: FFF000;

}

.black-key:active {

  border-bottom-width: 8px;

  box-shadow: none;

}

10) Теперь класс белых клавиш:

.white-key {

  margin: 0;

}

11) Идентификаторы нот:

#C {

  border-top-left-radius: 7px;

}


#B1 {

  border-top-right-radius: 7px;

}

HTML

12) Указываем базовые теги:

<!DOCTYPE html>

<html lang="en">


13) Открываем  <head>, указываем кодировку и заголовок:

    <meta charset="UTF-8">

    <title>Morphism Piano</title>

14) Встраиваем стили, закрываем  </head>, открываем <body>

15) Открываем идентификатор пианино:  

 <div id="piano">

16) Встраиваем картинку, расположенную над клавишами.

17) Открываем идентификатор клавиш левой руки:

<ol id="leftHand">

18) Располагаем 12 клавиш слева:

      <li class="white-key" id="C" data-note='noteC' data-key='81'>C</li>

      <li class="black-key" id="Cs" data-note='noteCs'>C#</li>

      <li class="white-key" id="D" data-note='noteD'>D</li>

      <li class="black-key" id="Ds" data-note='noteDs'>D#</li>

      <li class="white-key" id="E" data-note='noteE'>E</li>

      <li class="white-key" id="F" data-note='noteF'>F</li>

      <li class="black-key" id="Fs" data-note='noteFs'>F#</li>

      <li class="white-key" id="G" data-note='noteG'>G</li>

      <li class="black-key" id="Gs" data-note='noteGs'>G#</li>

      <li class="white-key" id="A" data-note='noteA'>A</li>

      <li class="black-key" id="As" data-note='noteAs'>A#</li>

      <li class="white-key" id="B" data-note='noteB'>B</li>

 19) Закрываем идентификатор клавиш левой руки:       

    </ol>

 20) Задаем идентификатор для клавиш правой руки: 

    <ol id="rightHand">

21) Добавляем сами клавиши:

      <li class="white-key" id="C1" data-note='noteC1'>C</li>

      <li class="black-key" id="C1s" data-note='noteC1s'>C#</li>

      <li class="white-key" id="D1" data-note='noteD1'>D</li>

      <li class="black-key" id="D1s" data-note='noteD1s'>D#</li>

      <li class="white-key" id="E1" data-note='noteE1'>E</li>

      <li class="white-key" id="F1" data-note='noteF1'>F</li>

      <li class="black-key" id="F1s" data-note='noteF1s'>F#</li>

      <li class="white-key" id="G1" data-note='noteG1'>G</li>

      <li class="black-key" id="G1s" data-note='noteG1s'>G#</li>

      <li class="white-key" id="A1" data-note='noteA1'>A</li>

      <li class="black-key" id="A1s" data-note='noteA1s'>A#</li>

      <li class="white-key" id="B1" data-note='noteB1'>B</li>

 22) Закрываем клавиши правой руки и идентификатор пианино:  

 </ol>

  </div>

23) Теперь нужно добавить звук для каждой клавиши, указав идентификатор нот. Предварительно для каждого фрагмента преобразуйте ссылку из репозитория (view raw) в рабочую. Ваша исходная ссылка будет выглядеть так:

https://github.com/Никнейм/имя репозитория/raw/refs/heads/main/01.mp3

Рабочая должна быть преобразована так:

https://raw.githubusercontent.com/Никнейм/имя репозитория/refs/heads/main/01.mp3 

24) Теперь расставьте ваши фрагменты от 1 до 24 в строгой последовательности по идентификатору нот - от первого до последнего файла:

  <div id="audio">

    <audio id="noteC" preload='auto' >

      <source src="фрагмент 1"></audio>

    <audio id="noteCs" preload='auto' >

      <source src="фрагмент 2" type="audio/mpeg"></audio>

    <audio id="noteD" preload='auto' >

      <source src="фрагмент 3" type="audio/mpeg"></audio>

    <audio id="noteDs" preload='auto' >

      <source src="фрагмент 4" type="audio/mpeg"></audio>

    <audio id="noteE" preload='auto' >

      <source src="фрагмент 5" type="audio/mpeg"></audio>

    <audio id="noteF" preload='auto' >

      <source src="фрагмент 6" type="audio/mpeg"></audio>

      <audio id="noteFs" preload='auto' >

      <source src="фрагмент 7" type="audio/mpeg"></audio>

    <audio id="noteG" preload='auto' >

      <source src="фрагмент 8" type="audio/mpeg"></audio>

        <audio id="noteGs" preload='auto' >

      <source src="фрагмент 9" type="audio/mpeg"></audio>

    <audio id="noteA" preload='auto' >

      <source src="фрагмент 10" type="audio/mpeg"></audio>

          <audio id="noteAs" preload='auto' >

      <source src="фрагмент 11" type="audio/mpeg"></audio>

    <audio id="noteB" preload='auto' >

      <source src="фрагмент 12" type="audio/mpeg"></audio>


25) Теперь правая рука:    

      <audio id="noteC1" preload='auto' >

      <source src="фрагмент 13" type="audio/mpeg"></audio>

    <audio id="noteC1s" preload='auto' >

      <source src="фрагмент 14" type="audio/mpeg"></audio>

    <audio id="noteD1" preload='auto' >

      <source src="фрагмент 15" type="audio/mpeg"></audio>

    <audio id="noteD1s" preload='auto' >

      <source src="фрагмент 16" type="audio/mpeg"></audio>

    <audio id="noteE1" preload='auto' >

      <source src="фрагмент 17" type="audio/mpeg"></audio>

    <audio id="noteF1" preload='auto' >

      <source src="фрагмент 18" type="audio/mpeg"></audio>

      <audio id="noteF1s" preload='auto' >

      <source src="фрагмент 19" type="audio/mpeg"></audio>

    <audio id="noteG1" preload='auto' >

      <source src="фрагмент 20" type="audio/mpeg"></audio>

        <audio id="noteG1s" preload='auto' >

      <source src="фрагмент 21" type="audio/mpeg"></audio>

    <audio id="noteA1" preload='auto' >

      <source src="фрагмент 22" type="audio/mpeg"></audio>

          <audio id="noteA1s" preload='auto' >

      <source src="фрагмент 23" type="audio/mpeg"></audio>

    <audio id="noteB1" preload='auto' >

      <source src="фрагмент 24" type="audio/mpeg"></audio>

  </div>

JavaScript

26) Встраиваем библиотеку JavaScript. Вам понадобится jQuery 2.1.3. Взять ее можно, например, здесь: https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js 

27) Добавляем скрипт нажатия на клавиши:

$(document).ready(function(){

  $('li').click(function() {

      $('#'+$(this).data('note')).prop('currentTime',0);

      $('#'+$(this).data('note'))[0].play();

})

})

28) Закрываем теги </body> и </html>

Если все верно, то ваша страница будет выглядеть примерно так: https://konoplevdesign3.blogspot.com/p/virtual-piano-body-background.html


Проверьте - все клавиши должны реагировать на нажатие и быть рабочими.

Ссылки на выполненное задание принимаются в комментариях к данному посту для ЖМК-302 до 17:00 10 апреля, для ЖМК-301 - до 17:00 13 апреля.

РЕЗУЛЬТАТЫ (данные обновляются):

Ананина Виктория - 5

Андрюк Анастасия - 5

Власов Максим - 5

Гайфуллина Анна - 5

Гостева Полина - 5

Григорьева Екатерина - 5

Кобякова Дарья - 5

Корнилова Полина - 5

Куликова Мария - 4

Маханек Вера - 5

Орлова Арина - 4

Слободская Елизавета - 5

Хайруддинов Тимур - 5

Цветкова Виктория - 5

Чугунова Елизавета - 5

Шабалина Виктория - 4

Широкоумова Полина - 5





Комментарии

  1. Polina Shirokoumova6 апреля 2026 г. в 23:28

    https://polinashirokoumova.blogspot.com/2026/04/morphism-piano-piano-width-1200px_82.html

    ОтветитьУдалить
  2. Слободская Елизавета6 апреля 2026 г. в 23:30

    https://slobodskayaelizavta.blogspot.com/p/piano-piano-width-1200px-margin-top_96.html

    ОтветитьУдалить
  3. мур7 апреля 2026 г. в 07:09

    https://kukukukukukukukuky.blogspot.com/p/blog-page_6.html - Чугунова Елизавета!

    ОтветитьУдалить
  4. Гайфуллина Анна8 апреля 2026 г. в 09:00

    Гайфуллина Анна, ЖМК-302:
    https://wev-desing.blogspot.com/p/10.html

    ОтветитьУдалить
  5. Маханек Вера9 апреля 2026 г. в 09:36

    https://makhanekvera.blogspot.com/2026/04/morphism-piano-piano-width-1200px.html

    ОтветитьУдалить
  6. Ананина Виктория9 апреля 2026 г. в 13:04

    https://mediaeconomicsananina.blogspot.com/2026/04/piano-piano-width-1200px-margin-top.html

    ОтветитьУдалить
  7. Екатерина Григорьева9 апреля 2026 г. в 22:13

    https://kukukukukukukukuky.blogspot.com/p/blog-page_82.html

    ОтветитьУдалить
  8. Полина Гостева9 апреля 2026 г. в 22:27

    https://gostevapolina.blogspot.com/2026/04/piano-width-1200px-margin-top-150px-img.html


    ОтветитьУдалить
  9. Вика Цветкова9 апреля 2026 г. в 22:34

    https://vikka56.blogspot.com/p/morphism-piano-piano-width-1200px.html

    ОтветитьУдалить
  10. Poly10 апреля 2026 г. в 05:41

    https://pkornilova.blogspot.com/p/piano-gi-piano-width-1200px-margin-top.html

    ОтветитьУдалить
  11. Max Vlasov10 апреля 2026 г. в 08:09

    https://maxvlasovblog.blogspot.com/p/morphism-piano-piano-width-1200px.html

    ОтветитьУдалить
  12. Маханек Вера10 апреля 2026 г. в 21:46

    Куликова Мария
    https://makhanekvera.blogspot.com/2026/04/piano-width-1200px-margin-top-150px_10.html

    ОтветитьУдалить
  13. Дарья Кобякова11 апреля 2026 г. в 10:54

    https://dariakobykova.blogspot.com/2026/04/23-10.html

    ОтветитьУдалить
  14. Арина Орлова11 апреля 2026 г. в 11:22

    https://philosopherarishka.blogspot.com/2026/04/piano-width-1200px-margin-top-150px-img.html

    ОтветитьУдалить
  15. Виктория Шабалина11 апреля 2026 г. в 11:44

    https://supervikaw.blogspot.com/p/pianino-piano-width-1200px-margin-top.html

    ОтветитьУдалить
  16. Andriuk12 апреля 2026 г. в 02:50

    https://uchebaandriuk.blogspot.com/2026/04/blog-post.html

    ОтветитьУдалить
  17. Хайруддинов Тимур12 апреля 2026 г. в 04:13

    https://shadowdarksaid.blogspot.com/p/piano-width-1200px-margin-top-150px-img.html

    ОтветитьУдалить

Добавлять новые комментарии запрещено.

Популярные сообщения