GuitArtist Article PL

Jak powstało GuitArtist

Krzysztof Kret, 25/05/2020

Click and change language to English

W tym poradniku pokaże Ci jak stworzyć stronę do nauki akordów na gitarze. Strona którą wspólnie stworzymy, pokaże nowe sposoby nauki! Słuchasz, uczysz się a przede wszystkim .. bawisz się !

Krok 1 - Pobierz paczkę

Pierwszy krok, to pobranie darmowej paczki z MDB: Kliknij tutaj, żeby pobrać !

Okej, zrobione ? Świetnie, w srodku znajdziesz plik index.html .
Otwórz go jakimś programem do programowania typu Visual Studio Code czy Sublime text.

Usuń wszystko pomiędzy<-- Start your project here --> i <-- End your project here -->

Końcowo nasz kod powinien wyglądać tak: 

          	 	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
			<!-- Bootstrap core CSS -->
			<link href="css/bootstrap.min.css" rel="stylesheet">
			<!-- Material Design Bootstrap -->
			<link href="css/mdb.min.css" rel="stylesheet">
			<!-- Your custom styles (optional) -->
			<link href="css/style.css" rel="stylesheet">
          		       <body>

					 <!-- Start your project here -->

					<!-- End your project here -->

			<!-- SCRIPTS-->
			<!-- JQuery -->
			<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
			<!-- Bootstrap tooltips -->
			<script type="text/javascript" src="js/popper.min.js"></script>
			<!-- Bootstrap core JavaScript -->
			<script type="text/javascript" src="js/bootstrap.min.js"></script>
			<!-- MDB core JavaScript -->
			<script type="text/javascript" src="js/mdb.js"></script>

				</body>

Krok 2 - Tło

Teraz stworzymy, i wybierzemy kolor "rogów strony". Ten efekt daje do zrozumienia, że nasza strona NIE jest przewijana. Osobiście uważam że wygląda również to nieco lepiej i daje to naszej stronie trochę pikanterii. Na tło które stworzyliśmy nałożymy właściwe tło, na którym będzie gitara.

Ten kod będzie w CSS . Możemy to zauważyć przez to że skrypt zaczyna się od sekcji style . A to z kolei znaczy że wszystko w środku tego kodu odpowiada głównie za desing.

Wklej ten kod pod sekcją /body . 

           		<style>
				html {
				    background-color: grey;
				}
				html,
				body {
				    height: 100%;
				}
				body {
				    background-image: url(https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/BuKKyFq/videoblocks-music-notes-fire-style-background-looped-animation_sae9zw4kb_thumbnail-full01.png);
				    background-size: cover;
				    border: 4px solid #424242;
				    border-radius: 50px;
				}
				img {
				    width: 98%;
				}
			</style>
  • background-color: To kolor naszych rogów, spróbuj zmienić wartość i sprawdź efekty. Więcej o tym znajdziesz tutaj !
  • background-image: url(https://(..) Po "url" wklej tło które będzie tłem dla naszej gitary, spróbuj znaleść coś z najlepszą jakością!
  • border: 4px solid #424242 Tworzy jedno-liniową obramówkę, z szerokością 4px i kolorze #424242.
  • border-radius: Jest odpowiedzialny za stopień skrzywienia naszych rogów, zmień wartość, i sprawdź efekty!.

Reszta powinna być zrozumiana, więc przejdę dalej

Końcowo nasza strona powinna wyglądać tak:

Krok 3 - Navbar

W tym kroku stworzymy tak zwany navbar. To coś jak pasek u spodni. Nie konieczny ale zawsze fajnie to wygląda. W tym przypadku stworzenie go nie jest specialnie konieczne, ponieważ nasz projekt jest krótki i nieprzewijany. W tym przypadku jest on tylko ze względu na design.

Zrobimy to samo, najpierw pokaże Ci kod, który wkleisz w body 

        		  <nav class="mb-1 navbar navbar-expand-lg navbar-dark lighten-1">
		            <a class="navbar-brand" href="#">GuitArtist</a>
		            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-4"
		              aria-controls="navbarSupportedContent-4" aria-expanded="false" aria-label="Toggle navigation">
		              <span class="navbar-toggler-icon"></span>
		            </button>
		            <div class="collapse navbar-collapse" id="navbarSupportedContent-4">
		              <ul class="navbar-nav ml-auto">
		                <li class="nav-item active">
		                  <a class="nav-link" href="#">
		                    <i class="fab fa-facebook-f"></i> Facebook
		                    <span class="sr-only">(current)</span>
		                  </a>
		                </li>
		                <li class="nav-item">
		                  <a class="nav-link" href="#">
		                    <i class="fab fa-instagram"></i> Instagram</a>
		                </li>
		                <li class="nav-item dropdown">
		                  <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-4" data-toggle="dropdown"
		                    aria-haspopup="true" aria-expanded="false">
		                    <i class="fas fa-user"></i> Profile </a>
		                  <div class="dropdown-menu dropdown-menu-right dropdown-info" aria-labelledby="navbarDropdownMenuLink-4">
		                    <a class="dropdown-item" href="#">My account</a>
		                    <a class="dropdown-item" href="#">Saved chords</a>
		                    <a class="dropdown-item" href="#">Log out</a>
		                  </div>
		                </li>
		              </ul>
		            </div>
		          </nav>
 Odświerz stronę. Możesz zauważyć naprawdę miły dla oka navbar. Ale powiem Ci coś o kodzie. I proszę, spróbuj zmienić wartości żeby upewnić się jak to wszystko działa. Oczywiście możesz zmienić cały tekst jaki jest na stronie. Ale skupie się na designie.

  • Po lewej stronie "facebooka" "instagrama" i "profilu" możesz zauważyć ikony. Przed tymi nazwami w kodzie, możesz znaleść coś takiego jak class="fab fa-facebook-f". Kliknij tutaj i spróbuj zmienić ikonę w środku class.
  • W pierwszej linijce kodu, w class możesz dodać kolor. Spróbuj dodać "blue" albo jakiś swój ulubiony. Więcej o nav znajdziesz tutaj. Ja osobiście końcowo zostawie przezroczysty efekt.

Myślę że to wszystko w tym kroku. Większosć kodu powinna być rozumiana

Twój navbar powinien wyglądać właśnie tak:

Step 4 - Przyciski

Tym razem skupimy się na naszej głównej części. W tym kroku stworzymy 6 przycisków które będą miały nazwy akordów, i jedno z nich będzie miało nazwę "demo". Ten przycisk będzie prezentował efekt kombinacji reszty przycisków. Nad nimi umieścimy napis "Click and listen"

W tej częsci użyjemy tak zwanego "gridu". To znaczy że nasza strona będzie responsywna!

Poczytaj więcej o grid'zie tutaj : Grid

Na początek stworzymy tekst, który także będzie używał grid'u.

Wklej to pod /nav :

		<main>
		     <div class="container mt-5">
		      <div class="row justify-content-center text-center">
		        <div class="col-md-12">
		          <h3 class="font-weight-bold"> Click and listen!</h3>
		        </div>
		      </div>
		</main>

Odświerz stronę. Jak możesz zauważyć, twój tekst jest na środku naszego tła. To zasługa naszego gridu.

Okej, czas na przyciski.

To raczej nie będzie nic ciężkiego, jednak jeżeli chcesz się podszkolić, możesz zajerzeć tutaj.

Wklej to nad /main :

          <div id="przyciski">

          	<div class="row justify-content-center text-center mt-4">
          		<div class="col-md-12">

             <button  class="btn btn-outline-warning waves-effect example z-depth-4">a-moll</button>

             <button class="btn btn-outline-warning waves-effect example z-depth-4">e-moll</button>


             <button class="btn btn-outline-warning waves-effect example z-depth-4">G7</button>


             <button class="btn btn-outline-warning waves-effect example z-depth-4">D</button>


             <button class="btn btn-outline-warning waves-effect example z-depth-4">D-dur</button>


            <button class="btn btn-warning btn-rounded example z-depth-4">Demo</button>
          </div>
      </div>
  </div>
</main>

Wygląda to już nieźle, prawda? Nasz gird ustawia wszystkie przyciski na środku, to sprawia że strona jest elegancka, miła dla oka a przede wszystkim, jak wcześniej wspomniałem - responsywna !

To prawda, ze nasze przyciski wyglądają naprawdę świetnie, jednak nie mają jeszcze żadnego zastosowania. Zanim jednak do tego przejdziemy, dodamy funkcje która doda nam podstawową - bez akordów, grafikę z gitarą. .

Wklej kod powyżej /main 
 <!-- guitar -->   
      <div class="row justify-content-center text-center">
        <div class="col-md-12">
                  <img id='guitar1' src="https://i.ibb.co/Nr7tMWg/guitar1.png">
              </div>
          </div>
<!--/guitar -->

Krok 5 - Skrypty (Scripts)

Musimy dodać skrypty, które zmienią nam obrazek z gitarą.

Do kodu z naszymi przyciskami musimy dodać onclick, który włączy nam skrypt podczas kliknięcia w przycisk, i zmieni zdięcie, z naszej podstawowej gitary, na nową, z src .

Kod przycisków, powinien zatem wyglądać tak 
          <div id="przyciski">

          	<div class="row justify-content-center text-center mt-4">
          		<div class="col-md-12">
             <button href="#"  onclick="document.getElementById('guitar1').src='https://i.ibb.co/wssd0gh/guitar2.png'" class="btn btn-outline-warning waves-effect example z-depth-4">a-moll</button>

             <button href="#"  onclick="document.getElementById('guitar1').src='https://i.ibb.co/F43FRmK/guitar3.png'" class="btn btn-outline-warning waves-effect example z-depth-4">e-moll</button>

             <button href="#" onclick="document.getElementById('guitar1').src='https://i.ibb.co/SN8vXSr/guitar4.png'" class="btn btn-outline-warning waves-effect example z-depth-4">G7</button>

             <button href="#" onclick="document.getElementById('guitar1').src='https://i.ibb.co/N9V8yqb/guitar5.png'" class="btn btn-outline-warning waves-effect example z-depth-4">D</button>

             <button href="#"  onclick="document.getElementById('guitar1').src='https://i.ibb.co/HzsMc49/guitar6.png'" class="btn btn-outline-warning waves-effect example z-depth-4">D-dur</button>

            <button href="#" onclick="document.getElementById('guitar1').src='https://i.ibb.co/ZmMTLG2/guitar7.png'"" class="btn btn-warning btn-rounded example z-depth-4">Demo</button>
          </div>
      </div>

Możesz zauważyć, że w kodzie znajduje się coś takiego jak getElementById('guitar1') i "guitar1" to ta nasza podstawowa gitara, której wcześniej daliśmy id="guitar1". Natomiast getElementById zmienia wartość tego id. To sprawia, że zdięcia po kliknięciu w przyciski się zmieniają.

Krok 6 - Dzwięki

Nieźle, teraz rozumiesz jak działa zmiana zdjęć po kliknięciu w nasze przyciski. Ale co z dzwiękiem ? Na mojej stronie którą możecie znaleść tutaj , one nie działają. Po prostu nie mogłem znaleść żadnej strony, która umorzliwiła dodanie dzwięku jako bezpośrendio mp3/4, ale dam wam paczkę, w której są dzwięki jak i zdjęcia a także pokażę jak dodać je na stronę.

Kliknij tutaj żeby pobrać paczkę dzwięków i zdjęć.

Teraz musimy dodać scripts i /scripts pod naszym /body .

Wklej to do scripts. I powiem Ci jak zmienić wartości: 

</body>
<script>
 // Gitara dzwieki
var guitarsound1 = new Audio();
guitarsound1.src= "./prezentacja/111.mp3";

var guitarsound2 = new Audio();
guitarsound2.src= "./prezentacja/222.mp3";

var guitarsound3 = new Audio();
guitarsound3.src= "./prezentacja/333.mp3";

var guitarsound4 = new Audio();
guitarsound4.src= "./prezentacja/444.mp3";

var guitarsound5 = new Audio();
guitarsound5.src= "./prezentacja/555.mp3";

var guitarsound6 = new Audio();
guitarsound6.src= "./prezentacja/666.mp3";

</script>
<style>

Okej, teraz wyjaśnie.

  • var guitarsoundx = new Audio daje wartość Audio, naszemu guitarsound1/2/3/..
  • W następnej linijce jest guitarsound.src. To znaczy, że piszemy tam url z strony albo ścieżkę z pulpitu do naszego pliku z dzwiękiem. (np. guitarsound4.src= dzwięk z naszego komputera np: "./prezentacja/444.mp3" ).

Jeżeli pobrałeś moją paczkę, umieść ją na pulpicie, w folderze gdzie znajduje się twoja strona, i wypakują ją właśnie tam. Musisz zmienić w swoim kodzie wartość guitarsoundX.src=(ZMIEŃ TO)

Okej, skrpty istnieją w naszym kodzie, jednak jeszcze nie działają.

Musimy znowu wrócić do naszych przycisków. W środku, za onclick, musimy dodać onmousedown="(nazwa dzwięku, który powinien się włączyć)".play()

Dokładniej to powinno wyglądać tak : 

<div id="przyciski">

          	<div class="row justify-content-center text-center mt-4">
          		<div class="col-md-12">
             <button href="#" onmousedown="guitarsound2.play()" onclick="document.getElementById('guitar1').src='https://i.ibb.co/wssd0gh/guitar2.png'" class="btn btn-outline-warning waves-effect example z-depth-4">a-moll</button>

             <button href="#" onmousedown="guitarsound3.play()" onclick="document.getElementById('guitar1').src='https://i.ibb.co/F43FRmK/guitar3.png'" class="btn btn-outline-warning waves-effect example z-depth-4">e-moll</button>


             <button href="#" onmousedown="guitarsound4.play()" onclick="document.getElementById('guitar1').src='https://i.ibb.co/SN8vXSr/guitar4.png'" class="btn btn-outline-warning waves-effect example z-depth-4">G7</button>


             <button href="#" onmousedown="guitarsound5.play()" onclick="document.getElementById('guitar1').src='https://i.ibb.co/N9V8yqb/guitar5.png'" class="btn btn-outline-warning waves-effect example z-depth-4">D</button>


             <button href="#" onmousedown="guitarsound6.play()" onclick="document.getElementById('guitar1').src='https://i.ibb.co/HzsMc49/guitar6.png'" class="btn btn-outline-warning waves-effect example z-depth-4">D-dur</button>


            <button href="#" onmousedown="guitarsound1.play()" onclick="document.getElementById('guitar1').src='https://i.ibb.co/ZmMTLG2/guitar7.png'"" class="btn btn-warning btn-rounded example z-depth-4">Demo</button>
          </div>
      </div>

Oświerz stronę, teraz powinna ona działać poprawnie.

Step 7 - Przycisk "Odświerz"

Na koniec dodamy przycisk odświerzenia. Będzie to bardzo przydatne jak i ładne. Tworzymy go, ponieważ nie możemy w inny sposób zatrzymać dzwięk który uruchomimy.

Wklej ten kod nad /main 

		<!-- /gitara -->
				<!-- refresh -->
				    <div class="row fixed-bottom-right">
				      <div class="col-md-2 text-left">
				        <a type="button" class="btn-floating black refresh"><i class="fas fa-sync" aria-hidden="true"
				           onClick="refreshPage()"></i></a>
				      </div>
				    </div>
				  </div>
		</main>

Stworzymy czarny, okragły przycisk. Przypomnę że więcej o przyciskach możesz znaleść tutaj . Ale przycisk jeszcze nie działa. Musimy dodać do script trochę kodu. Możesz zmienić też ikony tutaj class="fas fa-sync" Więcej ikon .

Skopiuj i wklej do skecji script 

			<script>

			// Stop the musio (refresh)
			function refreshPage(){
			    location.reload();
			}

Teraz nasza strona jest gotowa do korzystania ! Mam nadzieję że bawiłeś się razem ze mną tworząc tą stronę ;)


Gratuluje, ukończyłeś poradnik !