Cvičení – nastavení struktury webové aplikace

  • 5 min

Existují různé způsoby vytváření a správy projektů webu. Některé z těchto rozdílů závisí na konkrétních nástrojích, které máte, a na předvolbách vaší organizace. Při vytváření webu není neobvyklé, že se struktura projektu v průběhu času změní, protože je složitější. Velké projekty často vyžadují vyšší stupeň péče a pozornost, takže mnoho lidí může udržovat vše uspořádané. Klíčem je udržovat semblanci organizace a existují běžné strategie, které vám pomůžou.

V této lekci vytvoříte malou strukturu projektu pomocí editoru Visual Studio Code. Projekt má tři soubory: soubor HTML, soubor CSS a javascriptový soubor. Přidáte také rozšíření editoru Visual Studio Code, které zjednodušuje spouštění webu v prohlížeči.

Vytvoření nové složky pro web

  1. Otevřete Visual Studio Code.

    Když otevřete Visual Studio Code, otevře se úvodní stránka. Všimněte si, že můžete vytvořit nový soubor nebo otevřít složku v seznamu Start .

    Snímek obrazovky ze stránky začátečníků Visual Studio Code

    Pokud úvodní stránka není viditelná, můžete ji zobrazit výběrem > nápověda v nabídce. (Případně můžete zobrazit uvítací stránku tak, že otevřete Paletu příkazů pomocí klávesové zkratky Shift+Ctrl+P na počítači s Windows nebo Shift+Cmd+P na počítači s macOS, nebo výběrem Zobrazit > Paleta příkazů z nabídky editoru Visual Studio Code. Když se zobrazí Paleta příkazů, zadejte >Help: Welcome do vyhledávacího pole, abyste otevřeli uvítací stránku.)

  2. Vyberte Otevřít složku v seznamu Start na úvodní stránce nebo vyberte Soubor > Otevřít složku z nabídky Visual Studio Code.

    Snímek obrazovky s dialogovým oknem Otevřít složku operačního systému Windows

    Při otevření složky má operační systém možnost nabídky pro vytvoření nové složky.

  3. Přejděte do umístění, kam chcete vytvořit novou složku pro svůj web, a vyberte Nová složka.

  4. Pojmenujte složku simple-website a pak vyberte Vybrat složku.

    Důležité

    Pokud se zobrazí dialogové okno editoru Visual Studio Code, vyberte Důvěřovat autorům všech souborů v nadřazené složce...; toto je funkce důvěryhodnosti pracovního prostoru, která umožňuje rozhodnout, jestli mají složky projektu povolit nebo omezit automatické spouštění kódu. Právě jste složku vytvořili, takže je v bezpečí.

Vytvoření některých souborů

  1. Vytvořte nový soubor tak, že v nabídce vyberete Soubor > Nový soubor nebo pomocí Control+N ve Windows nebo Command+N v macOS.

  2. Uložte soubor tak, že ve Windows vyberete Control+S nebo Command+S v macOS.

  3. Zadejte index.html název souboru a pak vyberte Uložit.

  4. Opakováním předchozích kroků vytvořte dva další soubory: main.css a app.js. Po dokončení by složka projektu simple-website v Průzkumníku editoru Visual Studio Code měla obsahovat následující soubory:

    • index.html
    • main.css
    • app.js

    Snímek obrazovky se soubory v zobrazení Průzkumníka editoru Visual Studio Code

Web můžete vytvořit tak, že do jednoho souboru zahrnete všechny své kódy HTML, CSS a JavaScript. V tomto cvičení ale pro váš obsah používáte soubor HTML, soubor CSS pro styly a javascriptový soubor pro vaši interaktivitu.

Nastavení tří souborů pomáhá udržovat projekt webu uspořádaný. Oddělení obsahu, stylů a logiky je příkladem progresivního vylepšení. Pokud javascript není povolený nebo podporovaný vašimi zákazníky, vaše šablony stylů CSS a HTML budou i nadále fungovat. Pokud ale vaši zákazníci nepodporují css, zobrazí se aspoň váš obsah HTML.

Instalace rozšíření nebo balíčků

Funkce editoru Visual Studio Code můžete rozšířit pomocí marketplace rozšíření. Mějte na paměti, že tato rozšíření jsou prostředky vyvinuté komunitou a často existuje několik řešení pro stejný typ funkce. Rozšíření můžete nainstalovat jednotlivě v editoru nebo několik najednou pomocí příkazového řádku.

Pro vývoj webů je vše, co teď potřebujete, otevřít v prohlížeči. Toto rozšíření vám pomůže rychle otevřít web ve výchozím prohlížeči místo kopírování a vkládání adresy URL souboru do prohlížeče.

Pokud chcete nainstalovat toto rozšíření, postupujte následovně:

  1. Vyberte ikonu Rozšíření na svislém panelu aktivit (levé podokno).

  2. Do vyhledávacího pole zadejte open in a pak vyberte otevřít v rozšíření prohlížeče , které publikoval TechER.

  3. Vyberte Nainstalovat a Visual Studio Code nainstaluje rozšíření.

    Snímek obrazovky s bočním panelem rozšíření editoru Visual Studio Code se slovy

  4. Přepněte zpátky do Průzkumníka kliknutím na horní ikonu na panelu aktivit nebo použijte Kombinaci kláves Control+Shift-E ve Windows nebo Command+Shift-E v macOS.

Jen tak dál! Instalace a instalace chvíli trvá, ale stačí nainstalovat a nastavit jenom jednou. Teď jste připraveni vytvořit web.