Dokumentace

Dokumentace k technickému řešení webu

hlavní idey

  • úpravy průběžne podle potřeb („agilní metodika“)
  • úvodní foto někde od přístuppové cesty - snadné rozeznání lokality pro návštěvníky místa
  • „univerzální text“ pro každou lokalitu
    • (ne)vhodnoust sešlapu
    • upozornění na soukromé vlastnictví parcel v lokalitě (otázka omezení vstupu)
    • prosba o fakta o lokalitě (historické využití atd)
  • průběžná integrace „pohledu na věc“ a aktuálních objevů

Funkce webu

  • propagace
    • samotná single-page pro jednotlivou lokalitu
    • tisknutelná verze
      • na samotnou lokalitu
      • a4 do eutofolií - minimální náklady
      • ze stránek by je mohl po zničení vytisnout/doplnit místní doborovolník (kdokoliv)
  • metody propagace
    • QR kódy
    • short URL

TODO list

  • vytvoření hlavní strany
    • seznam lokalit
    • „proklikávací“ mapy
    • automatizace tvorby map pomocí skriptů pro
      GRASS GIS
  • organizace
    • představení
    • územní působnost
  • vytvoření fotodokumentace
  • popis prozatimního stavu
  • stručný popis vhodný pro jednání s vlastníky či úřady

Hlavní (ne)výhody řešení

  • Funkce webu, snadno „stravitelné“ informace pro:
    • dotčené vlastníky
    • a jejich sousedy…
    • veřejnost s.l.
    • náhodně se vyskytvčí se turtisty, cyklisty (viz. tisknutelná verze webu)
    • školy v obci
    • možná i jiné obecní instituce
    • organizace působící v delší vzdálennosti od lokace
  • Responsivní design (rozložené webu se příspůsobý malému displeji smatphonu tak velkému displeji stolného PC
  • Snadné vytvoření nového projektu pro lokalitu
  • Oddělení obsahu a od formy/vzhledu při editaci

Vytvoření nového projektu

Konfigurace

Konfigurace se provádí upravpu textového souboru ve formátu YAML

  • git clone https://github.com/arkadianriver/spectral/archive/master.git
    • téma: Spectral
    • Autor: HTML5 UP (html5up.net), @n33co
    • Licence: Creative Commons Attribution 3.0 Unported License
  • vlastní upravy - vlastní fork
  • vytvoření nové lokace
  • úprava YAMLu
  • samotná editace YAMLu pro danou lokalitu
  • uložení fotek pod specifickými jmény do adresáře lokace
Příklad adresáře pro jednu lokalitu
                    
$WEB/stezka/
├── a.png
├── _config.yml
├── css
│   ├── font-awesome.min.css
│   ├── ie8.scss
│   ├── ie9.scss
│   ├── images
│   │   ├── arrow.svg
│   │   ├── bars.svg
│   │   └── close.svg
│   └── main.scss
├── elements.html
├── feed.xml
├── fonts
│   ├── FontAwesome.otf
│   ├── fontawesome-webfont.eot
│   ├── fontawesome-webfont.svg
│   ├── fontawesome-webfont.ttf
│   ├── fontawesome-webfont.woff
│   └── fontawesome-webfont.woff2
├── generic.html
├── images
│   ├── banner.jpg
│   ├── pic01.jpg
│   ├── pic02.jpg
│   ├── pic03.jpg
│   ├── pic04.jpg
│   ├── pic05.jpg
│   └── pic06.jpg
├── _includes
│   ├── footer.html
│   ├── header.html
│   ├── head.html
│   └── scripts.html
├── index.html
├── js
│   ├── ie
│   │   ├── backgroundsize.min.htc
│   │   ├── html5shiv.js
│   │   └── respond.min.js
│   ├── jquery.min.js
│   ├── jquery.scrollex.min.js
│   ├── jquery.scrolly.min.js
│   ├── main.js
│   ├── skel.min.js
│   └── util.js
├── _layouts
│   ├── default.html
│   ├── landing.html
│   └── page.html
├── LICENSE.txt
├── noname.gv
├── README.txt
└── _sass
    └── libs
        ├── _functions.scss
        ├── _mixins.scss
        ├── _skel.scss
        └── _vars.scss
                    
                
Konfigurační soubor
                
###############################################################################
# Metadata pro hlavičku
###############################################################################
title: Náučná stezka Štědrákova Lhota
description: |
  Náučná stezka Štědrákova Lhota
  od organizace [ČSOP ARION](http://html5up.net)
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
owner: ČSOP ARION
first_published: 2017
email: your-email@domain.com
baseurl: "/stezka"
url: "http://xlvz.mzf.cz" # the base hostname & protocol for your site
###############################################################################
# kontakty
###############################################################################
social:
  github: https://github.com/
  linkedin-square: https://linkedin.com/in/
  facebook-official: https://facebook.com/
  google-plus-square: https://plus.google.com/u/0/+
  #email: /contact/
###############################################################################
# nastavení samotného Jekyllu
###############################################################################
markdown: kramdown
#sass:
#  style: compressed
###############################################################################
# Blok pod hlavičkou
###############################################################################
infotitulek1kom: Další debilní stezka, která Vás chce
poučit a vysává veřejné finance. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. infotitulek1: Teplomilné stráně v podhůří Jeseníků ############################################################################### # Blok s miniaturami obrázků ############################################################################### imgA: Zastavení první - Geologie imgAkom: Sem přídou vybrané fotky. img2: Zastavení druhé img2kom: Text k druhému zastavení img3: Zastavené třetí img3com: Text k třetímu zastavení img4: Zastavené čtvrté img4com: Text k čtvrtému zastavení. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. img5: Zastavené páté img5com: Text k pátému zastavení img6: Zastavené šesté img7com: Text k sedmému zastavení img7: Zastavené sedmé ############################################################################### # Dvousloupcový blok s bledě zeleným podkladem, bez obrázků s fant-awesome ############################################################################### Three: Nadpis bloku # Nadpis bloku ThreeOne: Nadpis nahoře vlevo ThreeOneCom: Text k nadpisu vlevo nahoře. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ThreeTwo: Nadpis vpravo nahoře ThreeTwoCom: Nadpis vpravo nahoře. Ikonky podle font-awesome ThreeThree: Nadpis vlevo ve středu ThreeThreeCom: Text k nadpisu vlevo ve středu ThreeFour: Nadpis vpravo ve středu ThreeFourCom: Text k nadpisu vpravo ve středu ThreeFive: Nadpis vpravo vlevo dole ThreeFiveCom: Text k napidsu vlevo dole ThreeSix: Nadpis vpravo dole ThreeSixCom: Text k nadpisu vpravo dole ############################################################################### # Patka # * box „propagovat“ # * box „podpořte nás“ ############################################################################### CTA: | # nadpisu Nadpis k patce CTACom: | #komentar Text k patce