Postup řešení

Přiblížení naší cesty vytváření a splnění zadání daného projektu, které by do budoucna mohlo pomoct dalším studentům. Obsaženy jsou použité odkazy a taktéž příklady použitých kódů.

  1. Stažení bootstrapu z http://getbootstrap.com/ a použití předpřipravených komponent jako šablony Bootstrap theme z http://getbootstrap.com/examples/theme/ a patičky Sticky footer z http://getbootstrap.com/examples/sticky-footer/. Díky tomuto využití CSS fameworku se náš web stává automaticky multiplatformní (tj. přizpůsobí své zobrazení vůči např. mobilu, tabletu, PC apod.). 
    body {
  padding-top: 70px;
  padding-bottom: 30px;
}

.theme-dropdown .dropdown-menu {;
  position: static;
  display: block;
  margin-bottom: 20px;
}

.theme-showcase > p > .btn {
  margin: 5px 0;
}

.theme-showcase .navbar .container {
  width: auto;
}

img {
    max-width: 100%;
    height: auto;
}
  2. Vytvoření adresářové struktury
    public_html/		← kořenový adresář webu
├── bootstrap/		← adresář s CSS fameworkem
│   ├── css/		← CSS pro bootstrap
│   ├── fonts/		← písma pro bootstrap
│   ├── js/		← JS pro bootstrap
│
├── css/		← adresář s vlastním CSS
│   ├── theme.css       ← vlastní CSS
│
├── files/		← soubory
├── images/		← obrázky
└── index.html		← základní HTML stránka (ostatní HTML stránky jsou v adresáři na stejné úrovni)
  3. V souboru index.html použití základní HTML5 šablony stránky upravené pro naše potřeby podle poznatků získaných z článků https://www.zdrojak.cz/clanky/vyhnete-se-nejobvyklejsim-chybam-v-html5/ a http://www.jakpsatweb.cz/html/html5-strukturni.html
    <!DOCTYPE html>
<html lang="cs">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <meta name="description" content="Studentský projekt na předmět ETE60E - Web design
              (Česká zemědělská univerzita v Praze - Provozně ekonomická fakulta)">
        <link rel="icon" href="./images/favicon.png">

        <title>Název HTML stránky | WWW prezentace</title>

        <style>/* CSS styly na formátování všech těch tagů */</style>
    </head>
    <body>
        <header>
            <nav>Navigace</nav>
        </header>

        <main>
            <article>
                <section class="page-header">
                    <h1></h1>
                </section>
                <section>První kapitola, třeba i s podnadpisy</section>
                <section>Druhá kapitola nebo jakkoli odlišný obsah</section>
            </article>
        </main>

        <footer>Patička</footer>
        <script>/* JS */</script>
    </body>
</html>
  4. Připojení CSS stylů a JS (použití relativních cest k souborům = nepožíváme absolutní cesty viz http://www.jakpsatweb.cz/archiv/relativni-cesta.html) 
    <!-- Bootstrap -->
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="./bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="./css/theme.css" rel="stylesheet">  

<!-- Bootstrap core JavaScript ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="./bootstrap/js/bootstrap.min.js"></script>
  5. Vytvoření ostatních HTML stránek zkopírovaním souboru index.html (O projektu) a přepsáním jeho názvu:
    1. pozadavky.html: Požadavky na projekt
    2. blind-friendly-web.html: Blind Friendly Web 2.3
    3. hodnoceni.html: Hodnocení projektu
    4. nahrani-na-server-kit.html: Nahrání WWW prezentace na server KIT
    5. postup-reseni.html: Postup řešení
  6. Vytvoření obsahu v jednotlivých stránkách
    • Použití prvků ze šablony Bootstrap theme z http://getbootstrap.com/examples/theme/. Pro příklad uvádíme jen fixní menu:
      • Fixní menu z http://getbootstrap.com/examples/navbar-fixed-top/ (za povšimnutí stojí použití relativních cest k jednotlivým stránkám pomocí značky ./ výchozího adresáře a použití class="active" u momentálně aktivní stránky pro zvýraznění v menu) 
        <header>
    <!-- Fixed navbar -->
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="./index.html">ETE60E - Web design</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="./index.html">O projektu</a></li>
                    <li><a href="./pozadavky.html">Požadavky na projekt</a></li>
                    <li><a href="./blind-friendly-web.html">Blind Friendly Web 2.3</a></li>
                    <li><a href="./hodnoceni.html">Hodnocení</a></li>
                    <li><a href="./nahrani-na-server-kit.html">Nahrání na server KIT</a></li>
                    <li class="active"><a href="./postup-reseni.html">Postup řešení</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </nav>
</header>
    • Nastavení aby se obrázky zobrazovaly na 100% podle Blind Friendly Web 2.3 viz www.blindfriendly.cz 
      img {
    max-width: 100%;
    height: auto;
}
    • Do pozadavky.html vytvořen pomocí CSS ul seznam s vlastními odrážkami a CSS kód přidán do theme.css 
      ul.my-list>li{
    list-style-image : url('./../images/arrow-right.png');
}

ol.lower-alpha {
    list-style-type: lower-alpha;
}
    • Přidání patičky do theme.css, konrétně Sticky footer z http://getbootstrap.com/examples/sticky-footer/ 
      /* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 70px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 70px;
  background-color: #f5f5f5;
}

.footer-paragraph{
    margin-top: 20px;
}
  7. V souboru nahrani-na-server-kit.html použito na obrázky CSS3 podle poznatků z http://www.vzhurudolu.cz/prirucka/css3-transforms 
    /* CSS3 */

.skew { transform: skew(-5deg); }
.rotate { transform: rotate(-5deg); }
.translate { transform: translate(150%, 0%); }
.scale { transform: scale(0.8); }
.scale-and-rotate-and-translate { transform: scale(0.9) rotate(-4deg) translate(5%, 0%); }
  8. Přidána validace jednotlivých html stránek (extra odkazy na každou stránku pod ikonkou W3C HTML5 - vychazí se z adresy např. pro náš projekt http%3A%2F%2Fkitlab.pef.czu.cz%2F~ete60e_1516_10%2F = http://kitlab.pef.czu.cz/~ete60e_1516_10/ za kterou doplním název souboru, pro zpětné lomítko použiju náhradu %2F) a validace našeho CSS (konrétně souboru theme.css) znázorněna příslušnými ikonami v patičce. Vše validováno proti validátorům W3C, které jsou k nalezení pro html stránku zde https://validator.w3.org/nu/ a pro CSS zde https://jigsaw.w3.org/css-validator/. Ikona validity pro HTML5 nalezena volně na internetu a pro CSS byla využita ikona z oficiálních stránek http://www.w3.org/QA/Tools/Icons. Jako příklad uvádíme validační ikony s příslušnými odkazy pro stránku (soubor) postup-reseni.html: 
    <footer class="footer">
    <div class="container">
        <p class="text-muted footer-paragraph">
            Jedná se o studentský projekt na předmět ETE60E - Web design 
            (<a href="http://www.pef.czu.cz/cs/">Česká zemědělská univerzita v Praze 
                -&nbsp;Provozně ekonomická fakulta</a>).

            <a href="https://validator.w3.org/nu/?doc=http%3A%2F%2Fkitlab.pef.czu.cz%2F~ete60e_1516_10%2Fpostup-reseni.html"
               title="Validovat HTML5 podle W3C validátoru">
                <img src="./images/valid-html5-blue.png" alt="W3C HTML5 ikona validity"/>
            </a>

            <a href="https://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fkitlab.pef.czu.cz%2F~ete60e_1516_10%2Fcss%2Ftheme.css&amp;profile=css3&amp;usermedium=all&amp;warning=1&amp;vextwarning=&amp;lang=cs"
               title="Validovat CSS podle W3C validátoru">
                <img src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="W3C CSS ikona validity" /> 
            </a>

        </p>
    </div>
</footer>

Dodatečné úpravy

  1. Formátování a kontrola funkčnosti kódu
  2. Kontrola textů
  3. Větší kontrola pravidla 7. Označení každého odkazu výstižně popisuje jeho cíl i bez okolního kontextu. z www.blindfriendly.cz
  4. Pro zobrazení kódů zde na stránce využita párová značka <pre></pre> viz http://www.jakpsatweb.cz/html/bloky.html#pre a pro převod kódů do html tak, aby se zobrazily stejně jako je vidíme ve zdrojových kódech (obsahují speciální znaky pro html, které prohlížeč nezobrazí, pokud dohromady tvoří např. nějaký html tag), byly použita stránka http://www.plus2net.com/html_tutorial/tags-page.php (zatrhnout Line breaks not requried).
  5. Pro některé odkazy byl využit id atribut (hojně využit v Hodnocení). Díky němu se rovnou po přesměrování na cílovou stránku v dané stránce posuneme navíc na příslušné id (místo ve stránce) viz např. kap2 v http://blindfriendly.cz/metodika#kap2
  6. Použití tagů <strong></strong>, <em></em> apod.
  7. A další...