Jak pomocí Azure vyrobit jednoduchý zpěvník nejen na hudební výchovu?

20. 12. 2019 Azure, Programming

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

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:

Ukázka struktury | zdroj: code.visualstudio.com/

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.

  1. Zkopírujeme se si kód z indexové stránky a smažeme veškerý text mezi tagy <body>.
  2. Stránku s písní budeme strukturalizovat následovně:
    1. Header – hlavička slouží k navigaci
    2. Article – konkrétní text písně s jeho názvy
    3. Footer – slouží k navigaci či poznámkám
  3. Vytvoříme si kód dle uvedené struktury.
  4. 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>
  1. Díky tomuto vytvoříme hezkou hlavičku a možnost, jak se vracet do indexového souboru.
  2. Mezi tagy article budeme psát samotný text písničky.
  1. Mezi tagy article budeme psát samotný text písničky.
    1. 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.
    2. 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>
  1. Text písně budeme psát dle následujících pravidel:
    1. Akordy budeme psát do hranatých závorek do textu
    2. Odstavce budeme dělat v html nestandartně klasickým použitím klávesy ENTER
  2. 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>.

  1. 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

  1. Otevřeme soubor Main.css
  2. 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)

Vytvoříme si novou skupinu prostředků | zdroj: portal.azure.com
Vytvoříme webovou aplikaci| zdroj: portal.azure.com

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.

Plugin Azure App Service | zdroj: code.visualstudio.com/

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řihlášení do Azure App Service | zdroj: code.visualstudio.com/

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.

Nahrání web app | zdroj: code.visualstudio.com/

Nyní vybereme vytvořenou aplikaci a klikneme na ni. Vše se samo nahraje.

Vybrání aplikace | zdroj: code.visualstudio.com/

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.

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í.

Nastavení souborů Cookies

1. Co jsou soubory cookies

Soubory cookies jsou krátké textové soubory, které internetová stránka odešle do vašeho prohlížeče. Umožňují internetové stránce zaznamenat informace o vaší návštěvě, například zvolený jazyk a podobně. Následující návštěva stránek tak pro vás může být snazší a příjemnější. Soubory cookies jsou důležité, neboť bez nich by procházení sítě Internet bylo mnohem složitější. Soubory cookies umožňují lepší využití naší internetové stránky a přizpůsobení jejího obsahu vašim potřebám. Soubory cookies používá téměř každá internetová stránka na světě.

2. Druhy souborů cookies

Relační (tedy dočasné) soubory cookies nám umožňují propojovat vaše jednotlivé aktivity po dobu prohlížení těchto internetových stránek. V okamžiku otevření okna vašeho prohlížeče se tyto soubory vytvoří a po zavření okna vašeho prohlížeče se odstraní.

Trvalé soubory cookies nám pomáhají váš počítač identifikovat, jestliže opětovně navštívíte naši internetovou stránku.

3. Využívání souborů cookies

V souladu s ustanovením § 89 odst. 3 zák. č. 127/2005 Sb., o elektronických komunikacích, v účinném znění, si vás tímto dovolujeme informovat, že naše internetové stránky využívají pro svoji činnost soubory cookies, tedy vaše soubory cookies, včetně trvalých, zpracováváme.

Internetové prohlížeče obvykle obsahují správu souborů cookies. V rámci nastavení vašeho prohlížeče tak pravděpodobně můžete jednotlivé soubory cookies ručně mazat, blokovat či zcela zakázat jejich používání. Pro více informací použijte nápovědu vašeho internetového prohlížeče. Jsou-li cookies povoleny, lze toto nastavení internetového prohlížeče považovat za souhlas se zpracováním osobních údajů.

4. Účel použití souborů cookies

K personalizaci obsahu a reklam, poskytování funkcí sociálních médií a analýze naší návštěvnosti využíváme soubory cookies. Informace o tom, jak náš web používáte, sdílíme se svými partnery působícími v oblasti sociálních médií, inzerce a analýz. Používáním internetových stránek vyjadřujete souhlas propojením následujících služeb: Google Analytics, Google Tag Manager, Facebook Pixel, Microsoft Clarity.

Soubory cookies využíváme, kromě účelu uvedeného v předchozím odstavci, pouze pro měření návštěvnosti webové stránky.

5. Správce osobních údajů

Provozovatelem webové stránky studuj.digital a správcem osobních údajů je společnost: pg-sec s.r.o., sídlem Rybná 716/24, Staré Město, 110 00 Praha 1, identifikační číslo 09580905, zapsaná v obchodním rejstříku Městského soudu v Praze, oddíl C, vložka 338028.

​6. Zásady ochrany osobních údajů

Podrobnější informace o souborech cookies a zpracování tvých osobních údajů najdete v našich Zásadách ochrany osobních údajů.

Nezbytné

Tyto soubory cookie jsou nutné pro základní funkce stránky, a jsou proto vždy povolené. Mezi ně patří soubory cookie, které stránce umožňují si vás zapamatovat při procházení stránky v rámci jedné relace nebo, pokud o ně požádáte, mezi relacemi.

Volitelné

Výkon

Tyto soubory cookie nám pomáhají vylepšovat funkce stránek sledováním využití této webové stránky. V některých případech zrychlují zpracování vašeho požadavku a umožňují nám zapamatovat si vaše vybrané předvolby na stránce. Pokud soubory cookie zakážete, může se tím zhoršit přesnost našich doporučení a zpomalit funkčnost stránek.

Sociální média a relamy

Díky souborům cookies sociálních médií si můžete připojit ke svým sociálním sítím a prostřednictvím sociálních médií sdílet obsah z naší webové stránky. Reklamní soubory cookie (třetích stran) shromažďují informace pro lepší přizpůsobení reklamy tvým zájmům, a to na webových stránkách studuj.digital i mimo ně. V některých případech tyto soubory cookies zpracovávají vaše osobní údaje. Pokud chcete získat více informací o zpracování osobních údajů, přečtěte si naše Zásady ochrany osobních údajů. Pokud zakážete soubory cookies, mohou se zobrazovat reklamy, které méně souvisejí s vašimi zájmy, nebo nebudete moci účinně používat odkazy na Facebook, Instagram či jiné sociální sítě anebo nebudete moci sdílet obsah na sociálnch médiích.