Pix - Knowledge Base

Posledni revize: 20.02.2019

Obsah

Úvod

Na obsah 01 Úvod

Tato stránka slouží k uchování a rychlému dohledání příkladů z praxe, řešených situací a standardů, které bychom chtěli v kvalitě dodávaných prezentací dodržovat. V případě potřeby aktualizace kontaktute některého z projektových manažerů. Zdendu nebo Lukáše

PixTemplate

Na obsah 02 PixTemplate

PixTemplate je základní šablona struktury scss a js kodu pro převod designu do HTML šablon. Jednotné postupy a bestpractise jsou popsány ve zdrojových kódech. Kompletní balík template ke stažení zde. Pro konzultace ohledně návrhu: jan.stejskal@pixman.cz, nebo jarda@pixman.cz.

Více k PixTemplate a kompletně ke stylu vývoje se dočtete níže a to především v kapitoách 04, co se týče CSS a 06, co se týče zápisu JS

HEAD tagy (meta, OG, twitter, colors, icons)

Na obsah 03 HEAD tagy (meta, OG, twitter, colors, icons)

Ohledně ikonek a barviček doporučuji použít generátor www.favicon-generator.org/, případně http://www.favicomatic.com/ (zejména pro bezbarevné pozadí ikonky)


                           
        <meta property="og:title" content="{ifset $meta['title']}{$meta['title']}{/ifset}" />
        <meta property="og:description" content="{ifset $meta['description']}{$meta['description']}{/ifset}" />
        <meta property="og:url" content="https://{$_SERVER['SERVER_NAME']}{$_GET['url_call']}" />
        <meta property="og:image" content="https://{$_SERVER['SERVER_NAME']}{if isset($meta['image']) AND $meta['image']!=''}{$meta['image']}{/if}" />

        <meta name="twitter:card" content="summary" />
        <meta name="twitter:description" content="We" />
        <meta name="twitter:title" content="Czegency" />
        <meta name="twitter:site" content="" />
        <meta name="twitter:image" content="./images/og.jpg" />
        <meta name="twitter:creator" content="" />

        <!-- Chrome, Firefox OS, Opera and Vivaldi -->
        <meta name="theme-color" content="#0A355F">
        <!-- Windows Phone -->
        <meta name="msapplication-navbutton-color" content="#0A355F">
        <!-- iOS Safari -->
        <meta name="apple-mobile-web-app-status-bar-style" content="#0A355F">
        

        <link rel="apple-touch-icon" sizes="57x57"   href="./images/icons/apple/apple-touch-icon-57x57.png">
        <link rel="apple-touch-icon" sizes="114x114" href="./images/icons/apple/apple-touch-icon-114x114.png">
        <link rel="apple-touch-icon" sizes="72x72"   href="./images/icons/apple/apple-touch-icon-72x72.png">
        <link rel="apple-touch-icon" sizes="144x144" href="./images/icons/apple/apple-touch-icon-144x144.png">
        <link rel="apple-touch-icon" sizes="60x60"   href="./images/icons/apple/apple-touch-icon-60x60.png">
        <link rel="apple-touch-icon" sizes="120x120" href="./images/icons/apple/apple-touch-icon-120x120.png">
        <link rel="apple-touch-icon" sizes="76x76"   href="./images/icons/apple/apple-touch-icon-76x76.png">
        <link rel="apple-touch-icon" sizes="152x152" href="./images/icons/apple/apple-touch-icon-152x152.png">

        <link rel="icon"           type="image/png"  sizes="16x16"   href="./images/icons/favicon-16x16.png">
        <link rel="icon"           type="image/png"  sizes="32x32"   href="./images/icons/favicon-32x32.png">
        <link rel="icon"           type="image/png"  sizes="96x96"   href="./images/icons/favicon-96x96.png">
        <link rel="icon"           type="image/png"  sizes="192x192" href="./images/icons/favicon-192x192.png">
        <link rel="shortcut icon"                                    href="./favicon.ico" />

        <meta name="msapplication-TileColor" content="#0A355F">
        <meta name="msapplication-TileImage" content=".images/icons/mstile/mstile-144x144.png">
        <meta name="msapplication-config"    content="./browserconfig.xml">
                        

PixTemplate scss readme

Na obsah 04 PixTemplate scss readme

Co používáme

Využíváme css preprocesor sass, kompiluej se soubor /styles/sass/global.scss do souboru /styles/css/style.css, je vhodné generovat také style mapu, minimálně pro vývoj.

Jako pojmenovávací konveci pro třídy v css využíváme BEM zápis, doporučuji návod na vzhurudolu.cz (www.vzhurudolu.cz/prirucka/bem)



Výchozí struktura SASS souborů - pixtemplate

0_base:

Takové ty random věci, co jsme zapomněli, neřeší je Bootstrap, ale jsou moc fajn, resety, vlastní mixiny...

1_bootstrap:

Základní Bootstrap šablona, aktuálně na verzi v4.1.3
Před začátkem prací je doporučeno alespoň základně nastavit soubor _variables.scss

2_libs:

Složka pro umístění stylů pro js/css knihovny. Pokud možnost zachovávat podobné/stejné pojmenování jako samotného js soubru knihovny

3_layout:

_layout.scss Soubor pro základní nastavení tagu body a obecných pravidel pro celý web

/header (/footer, ...) složka pro umístění souborů týkajích se hlavičky.

V případě jednoduché hlavičky stačí vše psát do výchozího souboru dle názvu složky tedy například pro složku header bude soubor header.scss (HTML classa .header(dle názvu složky)) a dále classovat např.: .header__logo

V příapadě složitějších hlaviček dobré rozdělit navíc na více souborů např.: header/nav.scss, header/login.scss, header/header.scss) a v HTML struktuře classovat např.: .header-nav, .header-login.scss

4_atom:

Složka pro menší části, které se nacházejí napříč šablonama.
Může se jednat například o tlačítka, hvězdičková hodnocení

5_templates:

Složka 5_templates slouží pro styly větších částí/sekcí webu
Pro unikátní stránky(latte soubory) s unikátním obsahem vytváříme nové složky dle názvu latter souboru

např.: Homepage
složková scss struktura:
- /5_templates
- - /homepage
- - - slider.scss
- - - news.scss
- - - refs.scss

A oclassování:
.homepage-slider
      .homepage-slider__heading
      .homepage-slider__arrow
            .homepage-slider__arrow--left
            .homepage-slider__arrow--right
      .homepage-news
            .homepage-news__article
            .homepage-news__next

Přepřipravená složka /block slouží pro obecné části webu, které se opakují napříč webem.

např.: Galerie
složková scss struktura:
- /5_templates
- - /block
- - - gallery.scss

A oclassování:
.block-gallery
      .block-gallery__imgWrap
      .block-gallery__heading

Soupis JS knihoven

Na obsah 05 Soupis JS knihoven

Slick

Knihovna sloužící pro carousely a slidery. Jednoduchá na základní implementaci, ale zvládne prakticky vše.
kenwheeler.github.io/slick/

Tos "R"Us

LightBox na fotografie, videa, i text. Velmi jednoduchý na implementaci, proto vhodný jako základní. Ovšem i tak umožňuje příjemnou customizaci.
tosrus.frebsite.nl

Date Range Picker

Doporučená knihovna na datepickery, jednoduchá, funguje spolehlivě a umí vše.
Velké plus je, že se nebije ve volání v JS s jinými knihovnami, díky volání v js daterangepicker({})
www.daterangepicker.com

Instafeed.js

Doporučená knihovna na vytáhnuté fotek z Instagramu, jakmile se podaří získat accessToken, je to hračka
instafeedjs.com/

SelectBox

Instafeed.js

jQuery Ajax File Uploader Widget

Objektové literály

Na obsah 06 Objektové literály

Preferovaný zápis JS.

Výhody:
- jednoduchá možnost dostání dat z HTML do JS souboru
- Přehlednost (zapouzdření jednotlivých funkční a jejich následné volání)

learn.jquery.com/code-organization/concepts/#the-object-literal
https://www.interval.cz/clanky/objektove-orientovane-programovani-v-javascriptu/

Napojení na Mapy.cz

Na obsah 07 Napojení na Mapy.cz s vrstvami

Ukázkové použití knihovny v souboru smap_init.js:
Objekt obsahuje oSMap_Init, který ukazuje práci s knihovnou pro Seznam mapu:
 
- vytvoření mapy
- nastavení základních parametrů mapy (zacílení, přiblížení, výběr mapových podkladů...)
- rozmístění ovládacích prvků
- přidání vrstev pro body na mapě
- vložení bodů na mapu
- vygenerování tooltipů pro body na mapě
- přidání vlastních bodů zájmu na mapu
 
Pokud se některá data pro mapu (typicky body na mapě) načítají z databáze, je potřeba objektu oSMap_Init předat tato data v podobě javascriptových proměnných přes některou z latte šablon.


Soubory:
/aprb.cz/js/vendor/seznam_map.js = knihovna pro obsluhu Seznam map
/aprb.cz/js/helpers/smap_init.js = vytvoření mapy pro homepage (=ukázka práce s mapou)
/broumovsko.cz/styles/sass/5_templates/block/_map.scss = dostylování mapy: rozměry, pozice, doladění ovládacích prvků mapy (pozor: pozice ovládacích prvků se určuje inicializačním javascriptem)

Popis objektů v knihovně:
oSMap = hlavní objekt generující mapu. Nejprve je potřeba volat metodu init() s nastavením pro mapu (zacílení, přiblížení, typ mapového podkladu...). Pak je možné pomocí dostupných metod definovat rozmístění ovládacích prvků, vložit body na mapě..... Na závěr je potřeba zavolat metodu buildMap(), která dle zadaných nastavení a vložených dat vykreslí mapu.
oSMapTranslations = úložiště pro překlady
oSMapTypes = seznam druhů mapových podkladů, které API nabízí (turistické, letecké, zimní...).
(více viz komentáře ve zdrojáku :-) )

Co musím udělat, když chci mít na webu mapu:
Vložit si do projektu soubor s knihovnou seznam_map.js.
Vložit si do projektu soubor s ukázkovým použitím mapy smap_init.js
Předat do šablony data pro mapu z databáze (pokud je potřeba).
Dle svých potřeb upravit nastavení mapy v metodě oSMap_Init.createHomepageMap() zavolat tuto metodu.
Ve stylech určit umístění a velikost mapy plus doladit vzhled ovládacích prvků a informační bubliny u bodů na mapě.