Jemný, ale praktický úvod do statického webu
LinuxDays 2019

Lukáš Bařinka

Obsah

Praktický úvod
Instalace a použití SSG Jekyll
Nastavení jednostránkové šablony, obsah
Publikace (localhost vs gitlab)
Teoretické základy
Základy IA, obrácená pyramida, typy organizace dat
Koncept hierarchického web
Typické problémy obsahu a vzhledu

Obsah ...

Teorie v praxi
Hierarchický blog jako strukturované seznamy

Jekyll

Instalace SSG Jekyll


# apt install jekyll

$ jekyll new test-site
$ cd test-site
$ bundle install --path vendor/bundle
$ bundle exec jekyll serve

$ chromium http://localhost:4000
						

Instalace SSG Jekyll - FIT


$ mkdir ~/gems
$ export GEM_HOME=~/gems PATH=~/gems/bin:$PATH
$ gem install bundler jekyll
$ alias bundler=bundler.ruby2.5 jekyll=jekyll.ruby2.5
$ jekyll new test-site
$ cd test-site
$ bundle install --path vendor/bundle
$ bundle exec jekyll serve

$ chromium http://localhost:4000
						

Instalace šablony


$ cd ..

$ git clone https://github.com/jeromelachaud/freelancer-theme.git
$ cd freelancer-theme
$ gem install bundler -v '~> 1.12'    # FIT
$ gem listbundler                     # FIT
$ gem uninstall bundler -v ...        # FIT
$ bundle install --path vendor/bundle
$ bundle exec jekyll serve

$ chromium http://localhost:4000
						

Základní konfigurace


$ vim _config.yml
$ bundle exec jekyll serve
						
  • Úprava obsahu (jméno, e-mail, ...)
  • Úprava barev dle barevných schémat
  • Kontrola přístupnosti (barev)

Barvy


						

git

git-origin
git-clone
git-add
git-commit
git-push
git-remote
git-push
git-pull

GitLab

GitLab Pages

https://gitlab.com

  1. Register
  2. New Project (blank): username.gitlab.io
  3. .gitlab-ci.yml

CI/CD: .gitlab-ci.yml


image: ruby:2.3

variables:
  JEKYLL_ENV: production

pages:
  script:
  - bundle install
  - bundle exec jekyll build -d public
  artifacts:
    paths:
    - public
  only:
  - master
						

Nahrání na GitLab


$ git remote remove origin
$ git remote add origin \
      https://gitlab.com/username/username.gitlab.io.git

$ vim .gitlab-ci.yml
$ git add .gitlab-ci.yml
$ git comit -m 'Add GitLab CI'
$ git push origin master

$ chromium https://username.gitlab.io
						

GitLab Pages z Jekyll šablony

  1. Smazat původní projekt: Settings/General/Advanced/Remove
  2. New Project (template)
    • Pages/Jekyll
    • username.gitlab.io
  3. Spustit CI: CI/Pipelines/Run Pipeline

GitLab Pages jako kopie Jekyll tématu

  1. Smazat původní projekt: Settings/General/Advanced/Remove
  2. New Project (import project)
  3. Set up CI/CD: ze šablony Jekyll

Teorie

Architektura webu

jednostránkový web
  • Jednostránkový web
  • Blog
  • Hierarchický web
  • Hypertextový web

Architektura webu

blog
  • Jednostránkový web
  • Blog
  • Hierarchický web
  • Hypertextový web

Architektura webu

hierarchický web
  • Jednostránkový web
  • Blog
  • Hierarchický web
  • Hypertextový web

Architektura webu

hypertextový web
  • Jednostránkový web
  • Blog
  • Hierarchický web
  • Hypertextový web

UCD - User Centered Design

Návrh zaměřený na uživatele:
Web může být úspěšný, pokud plní potřeby a cíle svých uživatelů

  • Jaký je cíl/účel webu?
  • Kdo jsou jeho uživatelé?
  • Jaké mají potřeby a cíle?
  • Jaké mají vlastnosti a chování?

Teorie obrácené pyramidy

Od nejdůležitějšího k detailům

obrácená pyramida
Zlepšuje porozumnění
na začátku si čtenář vytvoří hrubou představu
Snižuje náročnost
čtenář rychle zjistí to podstatné
Pobízí ke posování obsahu
zaujatý čtenář se spíš bude zabývat dalším čtením
Strukturuje obsah logicky
čteář nepotřebuje odkazy přeskakující v textu dále
Podporuje rychločtení
čtenář může kdykoli přestat číst a přesto zjistit to nejdůležitější

Typické problémy obashu

  • Chybné umístění homepage, nekonzistence struktury
  • Nevýstižné texty odkazů (ZDE)
  • Špatné/nelogické členění obsahu (H1..H6)
  • Vizuální strukturování obsahu místo sémantického (B/I)
  • Nevhodné použití forátů dat (PDF/DOC, JPG pro screenshoty)

Typické problémy vzhledu

  • Nečitelnost vinou špatného kontrastu/velikosti písma
  • Banerová slepota (Banner-blindness)
  • Fixní vzhled (neresponsivita), fixní velikost písma
  • Nestandardní vzhled odkazů
  • Animované prvky rušící pozornost

Koncept hierarchického webu

hierarchický web
hierarchický web
hierarchický web
hierarchický web
hierarchický web
hierarchický web
hierarchický web
hierarchický web
hierarchický web
hierarchický web
hierarchický web

Teorie v praxi

Instalace šablony Skinny Bones


$ cd ..

$ git clone https://github.com/mmistakes/jekyll-theme-skinny-bones.git
$ cd jekyll-theme-skinny-bones
$ bundle install --path vendor/bundle
$ bundle exec jekyll serve

$ chromium http://localhost:4000
						

Adresářová struktura


_config.yml
_data/       - strukturovaná data pro generování obsahu (yml/json/csv/tsv)
_drafts/     - nepublikovaný dynamický obsah (--drafts)
_includes/   - načítání kusů kódů pomocí {% include file %}
_layouts/    - šablony stránek, obsah je vložen pomocí {{ content }}
_posts/      - dynamický obsah YYYY-MM-DD-title.MARKUP
_sass/       - definice CSS pro preprocesor SASS
_site/       - vygenerovaný výsledek (statický web)
index.html   - každý soubor zde nebo mimo ↑↑↑ s příponou html/md se zpracuje
						

Šablony a vkládání kusů kódu

vkládání souborů

Adresářová struktura - prakticky

použití souborů
?