Jste učitel hudební výchovy a máte problém s tím, že vám chybí nové písničky ve školních zpěvníčkách, zpěvníčky se vám často rozbijí či jsou těžké a nechtějí se vám nosit? V tom případě je digitální online zpěvníček přesně pro vás a jeho výroba není těžká. Výhoda zpěvníčku je, že ho můžete otevřít na jakémkoliv zařízení, které má nainstalovaný webový prohlížeč – takže na každém.
Požadavky
- Visual Studio Code – https://code.visualstudio.com
- Účet na Azure portálu
Výroba kódu
Spustíme si Visual Studio Code a založíme si v něm novou složku, ve které budeme pracovat. V ní si vytvoříme čtyři soubory:
- Index.html
- 001_FrenkieDlouhan_vzor.html
- Main.css
- Main.js
Indexový soubor se spustí při spuštění naší jednoduché webové aplikace. Budeme ho používat jako seznam písniček.
Soubor 001_FrenkieDlouhan_vzor.html použijeme jako konkrétní písničku.
Zbylé dva soubory použijeme k tvorbě jednoduchého skriptu pro zjednodušení psaní textů a pro nastylování naší stránky.
Tvorba indexové stránky
Jako první začneme psát příkaz a necháme si vygenerovat základní strukturu html stránky. Místo Page Title napíšeme název naší stránky. Veškerý další kód budeme psát mezi tagy <body>.
Indexový soubor můžeme pro začátek sestavit maximálně jednoduchý, další doplňky můžeme dodělat v budoucnu.
Vytvoříme nadpis první úrovně – ten vložíme mezi tagy <h1>. Do něj napíšeme název našeho zpěvníčku – např. Petrův zpěvníček.
Dále vytvoříme nadpis druhé úrovně (tagy <h>) a ten pojmenujeme obsah.
Po obsahu budeme tvořit seznam našich písniček. Každá písnička bude vypadat následovně:
<li><a href="001_FrankieDlouhan_vzor.html">název písničky - jméno autora</a></li>
Tagy <li> nám vytvoří seznam, tagy <a> odkaz. Za href vždy dopíšeme název souboru písničky.
Kód by měl vypadat nějako takto:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Zpevnicek</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css">
<script src="main.js"></script>
</head>
<body>
<h1>Petrův zpěvníček</h1>
<h2>Obsah</h2>
<li><a href="001_FrankieDlouhan_vzor.html">název písničky - jméno autora</a></li>
</body>
</html>
Tvorba konkrétní písně
Jelikož je již na internetu spousta písniček přepsána, je zbytečné všechny přepisovat. Proto budeme používat nejpoužívanější česko-slovenský server Supermusic.
- Zkopírujeme se si kód z indexové stránky a smažeme veškerý text mezi tagy <body>.
- Stránku s písní budeme strukturalizovat následovně:
- Header – hlavička slouží k navigaci
- Article – konkrétní text písně s jeho názvy
- Footer – slouží k navigaci či poznámkám
- Vytvoříme si kód dle uvedené struktury.
- Mezi tagy header napíšeme následující kód:
<li><a href="Index.html">Zpevnicek</a></li>
<li><a href="Index.html">Domů</a></li>
- Díky tomuto vytvoříme hezkou hlavičku a možnost, jak se vracet do indexového souboru.
- Mezi tagy article budeme psát samotný text písničky.
- Mezi tagy article budeme psát samotný text písničky.
- Opět vytvoříme nadpis prvního a druhé stupně. Do prvního napíšeme název písně, do druhé název autora či interpreta.
- Pote vytvoříme tag <p>. Do něho budeme psát text s akordy. Do tagu <p> také přiřadíme prvek: text-akordy. Kód bude tedy vypadat následovně:
<p id="text-akordy"></p>
- Text písně budeme psát dle následujících pravidel:
- Akordy budeme psát do hranatých závorek do textu
- Odstavce budeme dělat v html nestandartně klasickým použitím klávesy ENTER
- Mezi tagy <p> napíšeme text písničky i s akordy.
TIP: Zkuste si písničku najít na Supermusic a vyexportovat si ji ve formátu txt. Text následně stačí jen zkopírovat mezi tagy <p>.
- Mezi tagy footer napíšeme následující kód:
<li><a href=“Index.html“>Domů</a></li>
Ten nás opět odkáže na hlavní stránku.
TIP: Pro lepší přehlednost si můžete dávat slova jako ref. či sloka 1 mezi tagy <strong>. Ty zajistí zvýraznění textu.
Kód by měl vypadat nějako takto:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>STC zpěvníček</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
<link id="favicon" rel="shortcut icon" type="image/png" href="picture/favicon.png"/>
<script src="main.js"></script>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">STC zpěvníček</a></li>
<li><a href="index.html">Domů</a></li>
<span></span>
</ul>
</nav>
</header>
<article>
<header>
<h1>Frankie Dlouhán</h1>
<h2>Nedvědi</h2>
</header>
<section>
<p id="textSongu">
<strong>1:</strong>
[C]Kolik je smutného,
když [F]mraky černé [C]jdou
lidem nad [G]hlavou [F]smutnou dálavou[C].
Já slyšel příběh, který [F]velkou pravdu měl,[C]
za čas odle[G]těl, [F]každý zapo[C]mněl.
<strong>REF:</strong>
[C]Měl kapsu [G]prázdnou Franky Dlouhán,
po státech [F]toulal se jen [C]sám a že
byl [F]veselej, tak [C]každej měl ho [G7]rád.
Tam ruce k [F]dílu mlčky přiloží a [C]zase
jede [Ami]dál. A [F]každej kdo s ním
[G]chvilku byl, tak [F]dlouho [G7]se pak [C]smál.
<strong>2:</strong>
[C]Tam kde byl plač tam Franky [F]hezkou píseň měl [C]
slzy neměl [G]rád, [F]chtěl se jenom [C]smát.
[C]A když pak večer ranče [F]tiše usínaj[C]
Frankův zpěv jde [G]dál [F]nocí s písní [C]dál ...
<strong>REF:</strong>
[C]Měl kapsu [G]prázdnou Franky Dlouhán,
po státech [F]toulal se jen [C]sám a že
byl [F]veselej, tak [C]každej měl ho [G7]rád.
Tam ruce k [F]dílu mlčky přiloží a [C]zase
jede [Ami]dál. A [F]každej kdo s ním
[G]chvilku byl, tak [F]dlouho [G7]se pak [C]smál.
<strong>3:</strong>
[C]Tak Frankyho vám jednou [F]našli, přestal [C]žít,
jeho srdce [G]spí, [F]tiše smutně [C]spí.
Bůh ví jak, za co tenhle [F]smíšek konec [C]měl,
farář píseň [G]pěl, [F]umíraček zněl [C]
<strong>REF:</strong>
[C]Měl kapsu [G]prázdnou Franky Dlouhán,
po státech [F]toulal se jen [C]sám a že
byl [F]veselej, tak [C]každej měl ho [G7]rád.
Tam ruce k [F]dílu mlčky přiloží a [C]zase
jede [Ami]dál. A [F]každej kdo s ním
[G]chvilku byl, tak [F]dlouho [G7]se pak [C]smál.
</p>
</section>
</article>
<footer>
<a href="index.html">Domů</a>
</footer>
</body>
</html>
Vytvoření skriptu pro převod akordů
Akordy jsme pro jednodušší zápis psali do hranatých závor. Nyní je třeba vyrobit jednoduchý skript, který jim automaticky přidá určitý tag.
Otevřeme si soubor Main.js a zkopírujeme do něj následující kód i s jednoduchým vysvětlením:
/*spouští fci při otevření okna*/
window.onload = function chordFromSuperMusic() {
/*u elementů označených tímto tagem provede nasledující*/
let str = document.getElementById("text-akordy").innerHTML;
/*vytvoř novou proměnou a přičítej k ní 1 dokud se hodnota proměné nebude rovnat počtu písmen v elemtu... Takt oprojedem celý text*/
for (let index = 0; index < str.length; index++) {
let c = str[index];
/*když se znak rovná symbolu, přiřaď ho do ccs třídy*/
if (c == "[") {
str = str.replace("[", "<em>");
}else if (c == "]") {
str = str.replace("]", "</em>");
}
}
document.getElementById("text-akordy").innerHTML = str;
}
Zjednodušeně vysvětleno, kód prohledává stránku a když najde symbol hranaté závorky, vloží místo něho tag <em>.
Stylování stránky
- Otevřeme soubor Main.css
- Stylujeme ho například pomocí následujícího kódu s vysvětlením. Tj. stačí ho pouze zkopírovat.
Na závěr nás čeká doladit vzhled stránky.
body{
/*odsazení elemtu od okre nula*/
margin: 0px;
/*posune text od okrajů*/
padding: 2%;
/*nastavíme font*/
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
li{
/*vymaže kolečka u seznamu*/
list-style-type: none;
}
a{
/*vymaže formátování odkazu a nastaví naši barvu*/
color: rgba(100, 100, 100, 1);
text-decoration: none;
}
/*nastaví formát akordů*/
em{
/*nastavíme relativní pozici tj. text se nám posune o 12 px nahoru od normální pozice*/
position: relative;
top: -12px;
/*zvolíme barvu*/
color: rgb(90, 5, 76);
/*pro lepší viditelnost nastavíme tučné akordy*/
font-weight: bold;
}
#text-akordy{
/*nastaví speciální formátování textu. tj. nové řádky se budou zobrazovat jako nové*/
white-space: pre-line;
/*nastaví dvojnásobnou rozeč řádků*/
line-height: 200%;
}
h1{
/*nastaví barvu pro nadpis 1 úrovně*/
color: rgb(117, 16, 72);
}
header{
/*nastaví odsazení hlavičky od textu*/
margin-bottom: 30px;
}
/*zarovná minimenu vedle sebe*/
header li{
/*zarvná doleva*/
float: left;
/*nastaví mezeru mezi odkazy*/
margin-right: 20px;
}
Nahrání aplikace na Azure
Dotvořili jsme kód a nyní nám zbývá jediné – zveřejnit ho na internet. K tomu je třeba mít Azure účet a doplněk do Visual Studia Code na nahrávání do Azure.
TIP: Pokud nevíte jak si vytvořit účet, podívejte se sem – https://docs.microsoft.com/cs-cz/learn/modules/create-an-azure-account/
Vytvoření prostředku na Azure
Než přejdeme k nahrávání aplikace, je třeba si vytvořit prostředek přes Azure portál, do kterého aplikaci nahrajeme.
Přejdeme na Azure portál.
Vytvoříme si novou skupinu prostředků. (SKUPINY PROSTŘEDKŮ -> PŘIDAT)
TIP: Podle názvu aplikace bude mít náš zpěvník vygenerovanou také URL adresu.
Nahrání aplikace
Nainstalujeme si do Visual Studia Code rozšíření – Azure App Service.
Přihlasíme se do Azure. Kliknutím na nainstalované rozšíření -> zvolíme Přihlásit se do Azure/Sign in to Azure -> spustí se nám prohlížeč a pomocí něj se přihlasíme ke svému Azure účtu.
Přes Visual Studio Code klikneme pravým tlačítkem na složku, ve které máme nahrané všechny soubory a zvolíme možnost Deploy to Web App/Nahrát do webové aplikace.
Nyní vybereme vytvořenou aplikaci a klikneme na ni. Vše se samo nahraje.
Nyní již zbývá poslední věc. Navštívit naši aplikaci a pořádně si ji užít!
Tipy a nápady na vychytávky
Nezapomeňte si během práce vše ukládat. Stačí stisknout kombinaci kláves CTRL + S.
- Vytvořte si pomocí jednoduchého skriptu i noční mód pro váš zpěvníček.
- Vytvořte si tlačítko, pomocí kterého Vám bude text automaticky rolovat dolů.
- Vytvořte si skript na rychlou transpozici akordů.
Celý projekt najdete na: https://github.com/MicrosoftSTC/zpevnicek
Závěr
Doufám, že vám tento návod byl užitečnou inspirací, pomohl vám vytvořit si vlastní zpěvníček a ukázal vám nový způsob jak hostovat aplikace přes Azure. Výhodou je, že základní balík máte zcela zadarmo a nahrávání je velice jednoduché a intuitivní.
