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.
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ě:
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ě:
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ě:
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ě:
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
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:
Frankie Dlouhán
Nedvědi
1:
[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.
REF:
[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.
2:
[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 ...
REF:
[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.
3:
[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]
REF:
[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.
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("[", "");
}else if (c == "]") {
str = str.replace("]", "");
}
}
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.
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ů.
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í.
