Vizuální koncept

Konzultace:

• Visual Web Design Process for Clients & the Responsive Web - web obsahuje odkazy na zdroje otázek pro zákazníka (Resources for asking Questions)
  • ​ukázka viz např. https://projects.invisionapp.com/share/RKJ12JTX#/screens

Vizuální koncept:

• invisionapp.com – vizualizace včetně možnosti vkládání připomínek 

Cílová zařízení

• osobní počítač
• kapesní počítač
  • PDA (Personal Digital Assistant – osobní digitální pomocník)
  • palmtop
• mobilní telefon
• WebTV
• herní konzole
• jiná alternativní zařízení (např. lednička )

Webový dokument

Používané technologie

Výběr použitých technlogií závisí na cílové skupině uživatelů.

Hypertextové značkovací jazyky (obsah)

• HTML
  • osobní a kapesní počítače
• XML
  • WML (Wireless Markup Language) umožňuje tvorbu online dokumentů pro mobilní zařízení
    • známý také jako WAP 1.0 (Wireless Application Protocol) systém zajišťující provoz elektronických služeb na mobilních telefonech
  • XHTML MP (Mobile Profile)
    • následovník WML
    • nazývaný také jako WAP 2.0
    • zjednodušen pro mobilní telefony
    • podporuje barvy, obrázky, tabulky a CSS
  • XHTML
    • osobní a kapesní počítače
    • mobilní telefony s WAP od verze 2.0

Grafické objekty

• GIF
• JPG
• PNG

Multimédia

• Flash animace
• Applety – samostatné aplikace většinou s uživatelským rozhraním (zobrazení času, přehrávače multimédií, 3D modely, hry atd.)

Jazyk pro popis způsobu zobrazení stránek (prezentace)

• CSS (Cascading Style Sheets – tabulky kaskádových stylů)

Skriptovací jazyky (chování)

• JavaScript: jazyk
  • jQuery: framework – usnadňuje práci např. tím, že nabízí předpřipravené knihovny funkcí u kterých není nutné "řešit" verze prohlížečů atd.
• VBscript
• PHP
• ASP

Techniky

• AJAX: asynchronní způsob komunikace mezi klinetm a serverem bez nutnosti načítání (reload) stránky tzv. "RESTful"

Databázové systémy (dynamický obsah)

• MySQL
• PostgreSQL

Grafický návrh

Webový dokument má neurčité rozměry závislé na velikosti zobrazovacího zařízení (pokud je vůbec nějaké použito např. u zrakově postižených). Webový dokument je možné vnímat podobně jako pohled např. na toaletní papír (při větším dokumentu vidíte vždy pouze jeho část).

Posouvání obsahu (scrolling)

• horizontální – v našich podmínkách nevhodné
• vertikální

Šířka obsahu

Lidské oko dokáže najednou vnímat plochu přibližně o rozměrech 800x600 bodů.

• minimální šířka obsahu
  • pozor na dlouhá slova, vložené objekty, odkazy na soubory s dlouhými názvy atd. (zejména u vícesloupcového rozvržení)
• maximální šířka obsahu
  • ideální šířka textového bloku (sloupce) je přibližně 30-70 znaků na řádek

CSS vlastnosti

• overflow
• min-width, max-width
  • IE6- tyto CSS vlastnosti nezná, ale je možné jej to "naučit" pomocí vlastnosti width:expression...

Rozvržení vzhledu

Generátory rozvržení vzhledu:

• CSS Layout Generator
• ATCK theme builder

Jednosloupcové

• výchozí vlastnost bloků

Vícesloupcové

• HTML
  • tabulka
    • 
    • rozvržení je realizovatelné i bez CSS a tudíž funkční ve všech prohlížečích
    • nevýhodná pro přenostná zařízení (horizontální posun)
    • problémy při formátování tisku (vypnutí postranních sloupců)
    • neumožňuje změnu pořadí prvků stránky bez zásahu do zdrojového kódu nebo použitím CSS tj. obsah bude většinou až za navigací
    • zobrazí se až po načtení celého obsahu tabulky (dá se vyřešit více tabulkami)
• CSS2
  • absolutní pozicování
    • 
    • vyjme blok z toku textu
    • jednoduchá změna pořadí prvků stránky tj. obsah může být před navigací
    • důležitý obsah patičky nemůže být širší než hlavní obsah, aby jej nepřekryly postranní sloupce
  • plovoucí bloky
    • 
    • využívá se funkce obtékání
    • jednoduchá změna pořadí prvků stránky tj. obsah může být před navigací
    • ukončení plovoucího boxu
      • prvkem obsahující alespoň 1 znak (např.  ) s CSS vlastnosmi (ne vždy je takový prvek k dispozici):

        • clear: both;
          font-size: 1px /* NN7+ */
          height: 1px

      • pouze pomocí CSS vlastností

        • /*  
           * http://perishablepress.com/new-clearfix-hack
           * (http://www.positioniseverything.net/easyclearing.html)
           */
          .clearfix:after {
            visibility: hidden;
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 0;
          }
          * html .clearfix             { zoom: 1; } /* IE6 */
          *:first-child+html .clearfix { zoom: 1; } /* IE7 */

        • univerzální řešení
          • vychází z principu 3-col layout via CSS, ale navíc upravuje pořadí na "content first" 
          • výhoda: kromě .clearfix není potřeba znát šířku sloupce s osahem 
          • nevýhoda: je třeba pomocný prvek
          • 

          • #section-header { }
            
            #section-content {
              /* obtekani ukonceno pomoci .clearfix */
            }
            #content-wrapper {
              float: left;
              width: 100%;
            }
            #content {
              margin-left: 300px; /* %, em */
              margin-right: 200px; /* %, em */
            }
            #sidebar-left {
              float: left;
              width: 300px; /* %, em */
              margin-left: -100%;
            }
            #sidebar-right {
              float: left;
              width: 200px; /* %, em */
              margin-left: -200px; /* %, em */
            }
            
            #section-footer { }

        • řešení vhodné pouze pro GRID
          • výhoda: kromě .clearfix není potřeba žádný pomocný prvek
          • nevýhoda: je třeba znát šířky všech sloupců 

          • /* http://www.palantir.net/blog/responsive-design-s-dirty-little-secret */
            #section-header,
            #section-content,
            #section-footer {
              width: 960px; /* %, em */
            }
            #section-content {
              /* obtekani ukonceno pomoci .clearfix */
            }
            #content {
              float: left;
              width: 460px; /* %, em */
              margin-left: 300px; /* %, em */
              margin-right: -100%;
            }
            #sidebar-left {
              float: left;
              width: 300px; /* %, em */
              margin-left: 0;
              margin-right: -100%;
            }
            #sidebar-right {
              float: right;
              width: 200px; /* %, em */
              margin-right: 0;
              margin-left: -100%;
            }

        • Flexbox (Flexible reordering) – "řešení budoucnosti"?
          • 

          • <header>...</header>
            <main>
              <article>...</article>
              <nav>...</nav>
              <aside>...</aside>
            </main>
            <footer>...</footer>

            • main {
                display: flex;
              }
              nav {
                width: 13em;
                flex: none;
              }
              article {
                width: auto;
                flex: auto;
                order: 2;
              }
              aside {
                width: 20%;
                flex: none;
              }

              • Podpora: IE 10+, Opera 12.1+, Chrome, Firefox, Safari, iOS, Android
                • planningforaliens.com/blog/2014/03/11/real-world-flexbox
                • css-tricks.com/using-flexbox
                • philipwalton.github.io/solved-by-flexbox
                  • Better, Simpler Grids
                  • The Media Object
                  • Input Add-ons
                  • Sticky Footer
                  • Holy Grail Layout
                  • Vertical Centering

  Poznámka: CSS vlastnosti marginse dá využít také jako "relativní pozicování"

  Pevná šířka

  • v současnosti zpravidla 960 px (dříve 740 px)
  • jednoduchý návrh rozvržení vzhledu (layout)
  • vhodné pro komplikované grafické návrhy
  • u menšího rozlišením (velikosti okna) se zobrazí horizontální posuv
  • u většího rozlišením (velikosti okna) není využita celá dostupná plocha okna prohlížeče
  • při zvětšení písma hrozí rozpad layoutu nebo se zobrazí horizontální posuvníky

  Přizpůsobivá šířka

  • je udávána v jednotkách em
  • přizpůsobuje velikosti textu, sož je výhoda pro uživatele s horším zrakem
  • odstraňuje nevýhodu nevyužité plochy prohlížeče u velkého rozlišení (okna prohlížeče)

  Pružná šířka

  • je udávána v %
  • komplikovanější grafický návrh
  • přizpůsobuje se velikosti okna prohlížeče a využívá tak celou jeho dostupnou plochu, což ocení uživatelé s větší obrazovkou
  • ve většině případů se nastavuj minimální (usnadňuje návrh layoutu) a maximální (usnadňuje čtení) hodnotou šířky.

  Šablony se většinou navrhují buďto s pevnou nebo pružnou šířkou. Pružná šířka ovšem bývá kombinací přizpůsobivé a pružné varianty v kombinaci se záporným pozicováním plovoucích bloků.

  Při rozvržení obsahu je vhodné dle typografie dodržovat šířku odstavce (bloků) 30-80 znaků.

  Pevnou nebo minimální šířku grafického návrhu je možné odhadnout ze statistik návštěvnosti.

Příloha	Velikost
flexbox.png	5.45 KB

Grafika

Pro práci s grafikou je vhodné mít:

• zkalibrovaný monitor, projektor, tiskárnu, skener, fotoaparát atd. (např. kalibrační sonda x-rite)
  • při předávání dokumentů předávat i barevný profil monitoru (ICC, ICM)
  • při úpravách fotografií používejte příslušný Minilab ICC (ICM) profil prostřednictvím kterého budete fotografie tisknout
• osvětlení 5200 K
• co možná největší zobrazovací plochu
• tablet (tablet notebook, tablet pc, apple tablet)

Pro média je vhodné na web umístit logo ve vektorové grafice společně s informacemi o barvách a písmu (např. Loga a grafický manuál | Česká pojišťovna)

Rastrová grafika

V rastrové (bitmapové) grafice je celý obrázek popsán pomocí jednotlivých barevných bodů (pixelů) uspořádaných do pravoúhlé mřížky. Každý bod má určen svou přesnou polohu a barvu. Kvalitu záznamu obrázku ovlivňuje především rozlišení (zobrazení 96 dpi, tisk 300 dpi) a barevná hloubka (počet barev).

Výhody:

• obrázek je možné vytvořit pomocí digitálního fotoaparátu nebo skeneru

Nevýhody:

• velké nároky na výkon počítače (plocha m² ≈ souboru o velikosti 1 GB)
• při změně velikosti dochází ke zhoršování kvality

Použití:

• úprava digitálních fotografií
• webová grafika
• vlastní grafická díla

Editory:

• Gimp (XCF)
• Adobe Photoshop (PSD)
• Corel PHOTO-PAINT (CPT)

Ukázka: Dove Evolution

Otázky

Jaký bude obrázek při změně rozlišení monitoru z 1024x768 px na 800x600 px?

1. menší
2. stejně velký
3. větší

Kolik pixelů má 12 Mpx foťák?

1. 120 milionů
2. 12 milionů
3. 12 tisíc

Vektorová grafika

Vektorový obrázek je složen ze základních geometrických útvarů jako jsou body, přímky, křivky a mnohoúhelníky.

Výhody:

• změna velikosti bez ztráty kvality
• obrázek je rozdělen na samostatné objeky, se kterými je možné pracovat odděleně
• mnohem nižší nároky na výkon počítače než u rastrové grafiky

Nevýhody:

• pracné vytvoření obrázku
• příliš složiné objekty zvyšují nároky na výkon počítače (nevhodné pro fotografie)

Použití:

• logo
• počítačová sazba
• diagramy
• animace
• vlastní grafická díla

Editory:

• Inkscape (SVG)
• Adobe Illustrator (AI)
• CorelDraw (CDR)

Bézierova křivka

Obrázek není složen z jednotlivých bodů, ale z křivek – vektorů.

Křivky spojují jednotlivé kotevní body a mohou mít definovanou výplň (barevná plocha nebo barevný přechod). Tyto čáry se nazývají Bézierovy křivky, které umožňují pomocí čtyř bodů popsat libovolný úsek křivky.

Křivka je popsána pomocí dvou krajních kotevních bodů a dvou editačních bodů, které určují tvar křivky. Spojnice mezi kotevním a editačním bodem se nazývá směrová úsečka a je tečnou k výsledné křivce.

Grafické formáty

Rastrové (bitmapové) formáty

Přehled základních rastrových formátů

Vlastnost	GIF	JPEG	PNG	TIFF
Model RGB	256 barev (8 bitů)	16 milionů (24 bitů)	16 milionů (24 bitů)	16 milionů (24 bitů)
Model CMYK		4 miliardy (32 bitů)		4 miliardy (32 bitů)
Gama korekce
Průhlednost	2 úrovně (1 bit)		256 úrovní (8 bitů)	256 úrovní (8 bitů)
Komprese	bezztrátová	ztrátová	bezztrátová	bezztrátová
Proklad
Animace
Vrstvy

GIF (Graphics Interchange Format)

• určení: archivace, webová grafika, nadpisy, plakáty, loga
• nevhodné pro: barevné fotografie

JPEG (Joint Photographic Experts Group)

• určení: fotografie, hladké přechody v tónu a barvě
• nevhodné pro: mnohonásobné zpracování a fotomontáže, perokresbu, text, ikonky (rušivé artefakty)

PNG (Portable Network Graphics)

• určení: archivace, text, čárová grafika, čisté barevné plochy a ostré rozhraní barev
• nevhodné pro: fotografie (5-10x větší soubor oproti JPEG)
• průhlednost PNG umí až IE7+
  • pokud webový prohlížeč neumí zobrazit PNG průhlednost, zobrazí místo ní barvu nastavenou jako barvu pozadí při ukládání obrázku

TIFF (Tag Image File Format)

• určení: tisk, archivace obrázků

ICO

Ikona favicon.ico (Favorite Icon – favicon) usnadňuje uživateli vizuální odlišení jednotlivých webů. Obsahuje několik vrstev stejného obrázku v různé kvalitě.

1. Vrstva (adresní řádek prohlížeče, minimalizované okno atd.):
   • velikost: 16x16 px
   • počet barev: 16 (4 bity)
2. Vrstva (hlavní panel systému atd.):
   • velikost: 32x32 px
   • počet barev: 256 (8 bitů)
3. Vrstva (pracovní plocha atd.):
   • velikost: 48x48 px
   • maximální počet barev: 2³² (32 bitů)

Asi nejrychleji můžete vytvořit ale hlavně zkontrolovat funkčnost favicony pomocí online služby Realfavicongenerator. 

Další rozměry:

• Favicon
  • favicon-16x16.png - The classic favicon, displayed in the tabs
  • favicon-32x32.png – Main panel, Safari on Mac OS
  • favicon-48x48.png – Desktop
  • favicon-96x96.png - Google TV
  • favicon-160x160.png - Opera Speed Dial
  • favicon-192x192.png - Android Chrome M36+
• Apple Icons
  • apple-touch-icon.png
  • apple-touch-icon-57x57.png - Android Stock Browser and non-Retina iPhone and iPod Touch
  • apple-touch-icon-60x60.png - Same as apple-touch-icon-57x57.png, for non-retina iPhone with iOS7
  • apple-touch-icon-72x72.png - iPad mini and the first- and second-generation iPad (1× display) on iOS ≤ 6
  • apple-touch-icon-76x76.png - iPad mini and the first- and second-generation iPad (1× display) on iOS ≥ 7
  • apple-touch-icon-114x114.png - iPhone (with 2× display) iOS ≤ 6
  • apple-touch-icon-120x120.png - iPhone (with 2× and 3 display) iOS ≥ 7
  • apple-touch-icon-144x144.png - iPad (with 2× display) iOS ≤ 6
  • apple-touch-icon-152x152.png - iPad 3+ (with 2× display) iOS ≥ 7
  • apple-touch-icon-180x180.png - iPad and iPad mini (with 2× display) iOS ≥ 8
  • apple-touch-icon-precomposed.png (180x180)
• Windows 8 Icons
  • mstile-70x70.png - Windows 8.1 / IE11
  • mstile-144x144.png - Windows 8 / IE10
  • mstile-150x150.png - Windows 8.1 / IE11
  • mstile-310x150.png - Windows 8.1 / IE11
  • mstile-310x310.png - Windows 8.1 / IE11
• Apple Startup Images
  • apple-touch-startup-image-1536x2008.png - iOS 6 & 7 iPad (retina, portrait)
  • apple-touch-startup-image-1496x2048.png - iOS 6 & 7 iPad (retina, landscape)
  • apple-touch-startup-image-768x1004.png - iOS 6 iPad (portrait)
  • apple-touch-startup-image-748x1024.png - iOS 6 iPad (landscape)
  • apple-touch-startup-image-640x1096.png - iOS 6 & 7 iPhone 5
  • apple-touch-startup-image-640x920.png - iOS 6 & 7 iPhone (retina)
  • apple-touch-startup-image-320x460.png - iOS 6 iPhone

Odkaz na ikonu umístěte do hlavičky (X)HTML dokumentu:

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

Nejlepším místem pro soubor favicon.ico je kořenový adresář (root) webu.

apple-touch-icon.png

Apple zařízení iPhone, iPod a iPad hledá pro zobrazení ikony webu na plože níže uvedené soubory:

1. apple-touch-icon-57×57-precomposed.png
2. apple-touch-icon-57×57.png
3. apple-touch-icon-precomposed.png
4. apple-touch-icon.png (129x129 px)
5. použije se náhled webu (ovšem v logu webu budou chybová hlášení 404 – soubor nenalezen)

Obrázky se umisťují buď přímo do kořene webu nebo se pomocí meta tagu k nim definuje cesta (jedna):

<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />

nebo více cest pro každý rozměr (57x57, 72×72, 114×114 a 129x129 px) zvlášť:

<link rel="apple-touch-icon" sizes="57×57" href="images/apple-touch-icon-ipad-57.png" />
<link rel="apple-touch-icon" sizes="72×72" href="images/apple-touch-icon-ipad-72.png" />
<link rel="apple-touch-icon" sizes="114×114" href="images/apple-touch-icon-iphone-114.png" />
<link rel="apple-touch-icon" sizes="129×129" href="images/apple-touch-icon-iphone-129.png" />

V nejjednodušší variantě stačí pouze umístit do kořene webu apple-touch-icon.png o rozměrech 129x129 px.  Zařízení si velikosti přizpůsobí dle potřeb (k zakulacení rožků dochází automaticky). Při použítí pouze souboru apple-touch-icon.png nebudou použity žádné další efekty.

Tvorba a editace

Asi nejrychleji můžete vytvořit favicon pomocí online služby Bradicon. Pro vytváření a editaci je možné použít např. aplikaci Gimp.

Poznámka:
V Internet Exploreru se ikona zobrazuje až po přidání webové stránky do oblíbených položek.

XCF

• nativní formát aplikace Gimp
• umožňuje ukládat společně rastrové i vektorové obrázky
• zachovává vrstvy, kanály a cesty

PAT

• formát obrázků používaných nástrojem Plechovka a Razítko pro výplně vzorkem
• v aplikaci Gimp se ukládají do adresáře patterns

ABR

• formát pro stopy štětce

GBR

• formát pro stopy štětce
• mód:
  • RGB – otisk štětce je barevnou kopií stopy
  • odstíny šedi – pro otisk se použije aktuální barva popředí

GIH

• formát pro animované stopy štětce citlivé na směr pohybu štětce

PSD

• nativní formát aplikace Adobe Photoshop
• umožňuje ukládat společně rastrové i vektorové obrázky
• zachovává vrstvy, kanály a cesty

CPT

• nativní formát aplikace Corel PHOTO-PAINT
• umožňuje ukládat společně rastrové i vektorové obrázky
• zachovává vrstvy, kanály a cesty

TGA

• textury 3D modelovacích programů

Vektorové formáty

SVG

• nativní formát aplikace Inkscape
• umožňuje ukládat společně rastrovou i vektorovou grafiku
• založen na jazyce XML
• příklad využití SVG formátu na webu: Demonstration of the SVG Checkbox and Radio Button Object
• jednoduchý on-line SVG editor
• podpora v prohlížečích: IE9+ (IE6+ s Chrome Frame rozšířením), Firefox 1.5+, Opera 9.50+, Safari 4+, Chrome 1+

AI

• nativní formát aplikace Adobe Illustrator
• umožňuje ukládat společně rastrovou i vektorovou grafiku
• lepší vektory než EPS

CDR

• nativní formát aplikace CorelDraw
• umožňuje ukládat společně rastrovou i vektorovou grafiku

PS (PostScript)

• nezávislý na zařízení, na kterém se má tisknout
• tisknutelná oblast je celý list papíru

EPS (Encapsulated PostScript)

• nezávislý na zařízení, na kterém se má tisknout
• tisknutelná oblast je pouze obrázek
• umožňuje ukládat společně rastrovou i vektorovou grafiku
• lepší barvy než AI

Digitální negativ

RAW [ro:] (surový, nezpracovaný)

• data digitálního snímače, která nejsou nijak zpracovaná (soubor RAW není jako obrázek přímo použitelný, ale obsahuje všechny potřebné informace k jeho vytvoření)
• vlastnosti fotografie (např. vyvážení bílé) se dají upravit ještě stažením do počítače
• každý výrobce používá svoji vlastní příponu RAW soboru (RAW, NFG, DNG, CRW, CR2, NEF, ORF, MRW atd.)

 

Barvy

Při volbě barev grafického návrhu je možné využít:

1. logo společnosti
2. zaužívaná barevná schémata společnosti
3. generátory barevných schémat (Color Scheme Designer) usnadňují u grafického návrhu určit barvu:
   • pozadí
   • textu
   • nadpisů
   • nenavštívených odkazů
   • navštívených odkazů
   • aktivních odkazů

Zadavatel by měl určit:

1. alespoň jednu oblíbenou barvu
2. nevhodné barvy

Objem dat

Objem přenášených dat (zdrojové kódy, CSS, skripty, obrázky, přílohy, multimédia atd.) by měl být co nejmenší.

Doporučený postup optimalizace grafického návrhu

1. Grafický návrh vzhledu webové stránky ukládejte v nativním formátu aplikace ve které jej vytváříte SVG, CDR, AI, XCF, PSD, CPT atd.
2. Návrh exportujte do formátu PNG a rozdělte na opakující se části.
3. Vytvořte prvotní návrh webové stránky s PNG obrázky.
4. Jakmile jste s návrhem spokojeni optimalizujte obrázky:
   • uložte PNG obrázky do formátu GIF a JPG s 85% kvalitou (nejlépe dávkově např. aplikací Gwenview nebo IrfanView)
   • porovnejte velikost a kvalitu stejného obrázku ve všech třech formátech
   • opravte přípony zvolených obrázků v CSS souborech se vzhledem

 

Uživatelské rozhraní

Uživatelské skupiny

• BFU (běžný Franta uživatel), Lama, Lamer – nezkušený uživatel (úplně neschopný a zároveň všeho schopný)

• Geek, Guru – uživatel, který má hluboké technické nebo odborné znalosti, talent a obzvláštní zapálení pro svůj obor

Uživatelské rozhraní by měl být schopen ovládat i běžný uživatel, ale např. administrace webu již předpokládá více zkušeností (např. auto také může řídit jak profesor, tak i skladník, ale bagr pouze osoba s příslušným speciální zaškolením).

Při návrhu uživatelského rozhraní používejte standardní prvky (podtržené odkazy, menu, formulářové prvky, tlačítka atd.), které uživatelé očekávají. Inovace je možná, ale ne na úkor zvyklostem (např. posuvné dveře místo klasických mohou pro někoho představovat neočekávanou překážku). Uživatelské rozhraní by se mělo blížit spíše dálkovému ovladači televize, než kokpitu letadla.

Požadavky

• jednoduchost
• přehlednost
• čitelnost (kontrast mezi textem a pozadím)
• použitelnost
• minimum grafiky
• maximum funkčních prvků
• vyhledávací služba
• co nejméně nespokojených uživatelů

Odkazy:

• collections favorite design elements

 

Adresářová struktura

Příklad adresářové struktury webu:

files/
  attachments/
  documents/
  images/
  media/
includes/
scripts/
themes/
  blue/
    images/
    styles/
  green/
    images/
    styles/

Odkazy

• relativní k aktuálnímu umístění
  • kořenový adresář (webu) /
  • aktuální adresář ./
  • o adresář výš ../ (o dva adresáře výš ../../)
• absolutní např. http://

Určení cesty

• kořenový adresář (webu) /
• aktuální adresář ./
• o adresář výš ../

Názvy souborů

Pokud se chcete vyhnout problémům při přenosu dat, vytvářejte názvy souborů pouze z malých písmen (Windows není case sensitive) anglické abecedy, tj. bez diakritiky, číslic, pomlčky, podtržítka a tečky.

Windows není case sensitive, unixové systémy jsou.

Speciální znaky

U názvů souborů pozor na speciální znaky jako je např. "dlouhá" pomlčka (–), která může být při kopírování souborů na server nahrazena jiným znakem.

"Dlouhou" pomlčku (–) je možné vložit omylem do názvu souboru např. při kopírování z aplikace, která má povolené automatické nahrazování znaků (Writer, Word atd.).

Implementační chyby prohlížečů

Box model

Vizuální prezentace dokumentu se skládá z bloků. Blok je čtyřhranný objekt, který tvoří:

• obsah
• vnitřní okraj (padding)
• rámeček (border)
• vnější okraj (margin)

Chyba výpočtu rozměrů prvku se projevuje u prohlížečů:

• IE4 až IE5.5 ve všech režimech
• IE6 pouze v přechodném režimu a režimu s rámci (u IE6 ve striktním režimu je box model v pořádku dle specifikace W3C)

Výpočet:

• moderní prohlížeče dle specifikace W3C
  • width = šířka obsahu
  • height = výška obsahu
• IE6-
  • width = šířka obsahu + vnitřní okraj (padding) + orámování (border)
  • height = výška obsahu + vnitřní okraj (padding) + orámování (border)

Pozadí elementu vyplňuje obsah, vnitřní okraj a rámeček (viditelné v místech přerušení). Vnější okraj je vždy transparentní.

Nastavení box modelu pomocí CSS

/* Box model (dimension = content + padding + border), http://html5please.com/#box-sizing */
*,
*:before,
*:after {
  -moz-box-sizing: border-box; /* FF(3.5-3.6) */
  -webkit-box-sizing: border-box; /* iOS(3.2-4.3), Android(2.1-3) */
  box-sizing: border-box; /* Opera17+, IE8+, Chrome28+, Safari5.1+ */
}
iframe {
  -moz-box-sizing: content-box; /* FF(3.5-3.6) */
  -webkit-box-sizing: content-box; /* iOS(3.2-4.3), Android(2.1-3) */
  box-sizing: content-box; /* Opera17+, IE8+, Chrome28+, Safari5.1+ */
}

Hodnota jednotky em

Chyba výpočtu hodnoty jednotky em vnořených prvků u IE6-:

• IE6- při zvětšování písma velikost vnořených prvků v jednotkách em násobí (proto je např. vhodnější pro texty používat jednotku %).

Úvod

Název Internet je složen z původně latinské předpony inter (mezi, mezinárodní) a anglického slova net (počítačová síť).

Síťová služba World-Wide Web (celosvětová pavučina – zkráceně web) umožňuje prezentovat informace v přehledném grafickém prostředí. Libovolnou webovou stránku je možné v prohlížeči zobrazit zadáním její unikátní adresy URL (Uniform Resource Locator). Informace jsou uloženy v textovém dokumentu, doplněném o grafické prvky a multimédia ve formě webových stránek. Stránka může obsahovat odkazy, pomocí nichž je možné přejít na jiné místo aktuálního, nebo i jiného dokumentu v Internetu – tento způsob členění se nazývá hypertext.

Webová stránka je textový dokument s příponu html (dynamicky generované stránky mohou mít i jiné přípony např. php, asp atd.) obsahující zdrojový kód. Z důvodu zmenšení objemu přenášených dat obsahuje zdrojový kód pouze ta nejnutnější data, která je schopen prohlížeč interpretovat (předat uživateli v přehledné formě). Webovou stránku je  možné přirovnat k "receptu", podle kterého prohlížeč "vaří".

Zdrojový kód webové stránky je možné zobrazit:

• ve webovém prohlížeči příkazem Zobrazit, Zdrojový kód;
• v textovém editoru, kde je možné jej také upravovat.

Aplikace

Kvalita webových stránek závisí na znalostech a časových možnostech tvůrce.

Serverové aplikace

Serverové aplikace pro tvorbu webových stránek umožňují snadno a rychle vytvářet jednoduché webové stránky pomocí průvodců a připravených šablon. Např.:

• optimizepress.com – responzivní web (jednorázová platba) 
• webflow.com – responzivní web (zdarma doména 3. řádu, další možnosti -> měsíční platba) 
• webnode.cz – snadná tvorba www stránek zdarma (osobní, firemní, e-shop)
• blogger.com – vlastní blog snadno ve 3 krocích
• estranky.cz – snadná tvorba www stránek a fotogalerie
• ebrana.cz – tvorba webových stránek, e-shopů, internetová reklama a SEO, PPC
• home.spaces.live.com - blog, fotografie, videa, další moduly a miniaplikace (500 MB týdně, fotka max. 600 px)
• webmium.com - vytvořte si web snadno a rychle (firemní)
• drupalgardens.com – snadná tvorba www stránek (CMS Drupal)
• wix.com – flash technologie
• webareal.cz – webo stránky nebo eshop snadno a rychle (placené)
• inpage.cz – webové stránky pro každého (placené)
• webové fotogalerie
  1. flickr.com – sdílení fotografií
     • 100 MB měsíčně
     • GNU/Linux, Mac, Windows
  2. picasa.google.com – sdílení fotografií
     • 1 GB
     • čeština
     • úprava fotek (ořez, jemná rotace, červené oči, kontrast, barva, jas, výplň, světla, stíny, teplota barev)
     • efekty, koláž
  3. rajce.idnes.cz – místo pro vaše fotografie
     • pouze JPG
     • fotka max. 700 px
  4. photoserver.eu – fotogalerie, fórum, hodnocení fotek
     • fotka max. 980 px a max. 200 kB
• webdomu.cz – aplikace pro bytová družstva a společenství vlastníků jednotek (SVJ)
• miniaplikace (služby), které lze vložit do vlastního webu
  • BlueBoard.cz
  • VseVJednom.cz
  • WebLight.cz
  • Webber.cz

Lokální editory

Lokální (X)HTML editor je softwarová aplikace určená k vytváření webových stránek, která poskytuje řadu podpůrných nástrojů a funkcí pro usnadnění a zrychlení tvorby.

Způsoby vytváření webových stránek

Způsob	Editor	Výhody	Nevýhody
Rychle	WYSIWYG (What You See Is What You Get) editor – při vytváření vidíte stránku tak, jak by měla vypadat v prohlížeči	K vytvoření stránek stačí pouze základní znalost ovládání počítače.	Závislost na kvalitě editoru
Kvalitně	Textový (strukturní) editor – vytváříte přímo zdrojový kód	Úplná kontrola nad obsahem stránek	Znalost (X)HTML, CSS, skriptování atd.
Efektivně	Editor zvládající WYSIWYG i textový režim	K zrychlení práce je možné využít vhodné funkce WYSIWYG editoru

Přehled vybraných WYSIWYG editorů (WYSIWYG i textový režim)

Editor	Cena	Poznámky
Adobe Dreamweaver (GoLive)		usnadňuje psaní elementů a atributů
Quanta		usnadňuje psaní elementů a atributů WYSIWYG i textový režim současně
Microsoft FrontPage		usnadňuje psaní elementů a atributů pouze kódování win-1250
CKeditor		funkční v prohlížečích možnost integrace do webových stránek závisí na povoleném skriptování v prohlížeči validní víceúrovňové odrážky a číslování je možné zvolit prvky pro zvýraznění textu <strong>, <em>
Kompozer (NVU)		do seznamu stylů se automaticky načte externí styl připojený k dokumentu) nevalidní víceúrovňové odrážky a číslování místo zvýraznění <strong>, <em> a <u> zapisuje do zdroje dokumentu styl Nástroje -> Předvoly -> Nová stránka Jazyk: cs Znaková sada: UTF-8 Nástroje -> Předvolby -> Pokročilý zatrhněte volbu Chování návratové klávesy Speciální znak: Pouze & < > ' a nerozbitné prázdné místo Soubor -> Nový ze šablony tlačítko Nový obsahuje rozbalovací seznam vytvořit novou stránku / další volby / ze šablony
Writer/Web editor z OpenOffice		není možné zvolit typ dokumentu
Easy Editor
Mozilla Editor		je součástí prohlížeče Mozilla
Netscape Editor		je součástí prohlížeče Netscape
Amaya Editor		je součástí prohlížeče Amaya

Přehled vybraných textových (struktrálních) editorů

Editor	Cena	Poznámky
Eclipse		PHP Flex
NetBeans IDE Solaris		usnadňuje psaní elementů a atributů (Ctrl + mezera) tzv. IntelliSense doplňování rozepsaného textu (Tab) odstraňování chyb (pravý Alt + Enter) správa projektů podpora verzování pomocí SVN a CVS
PSPad		usnadňuje psaní elementů a atributů kontrola validity (správnosti) dokumentu integrovaný prohlížeč s možností volby rozlišení zobrazení český slovník kontroly pravopisu
Notepad++
Macromedia HomeSite		usnadňuje psaní elementů a atributů pouze kódování win-1250
AceHTML
EasyPad
Bluefish		obsahuje různé šablony

Některé aplikace umožňují uložit (exportovat) dokument jako webovou stránku:

• Microsoft Word, Excel, PowerPoint
  • funkčnost je "zaručena" pouze u Microsoft Internet Exploreru

Existuje také mnoho průvodců a podpůrných utilit na vytváření webových stránek či dotazníků:

• Website Mentor
• Ma Page Web
• Gecon
• SiteStyler
• a další

 PSPad

• umožňuje provádě úpravy přímo na FTP:
  • v nabídce Zobrazit, Nástrojový panel si zapněte boční panel s projekty
  • přejděte na záložku FTP a stiskněte tlačítko se symbolem síťového kabelu
  • v novém okně stisknete tlačítko Nové připojení, zadejte údaje o svém FTP a nastavení uložte
• ve stavovém řádku je možné klepnutím na slovo TEXT změnit režim zvýrazňování
  • výběr zvýrazňovače je možné upravit v Nastavení, Nastavení zvýrazňovačů
  • zvolte např. PHP, klepněte na záložku Upřesnění a do políčka Masky souborů doplňte příponu souboru např. *.module
• "čistič" TiDy zajistí, že v kódu nebudou chyby (např. neuzavřené elementy)
• PSPad umožňuje:
  • převést HTML značky na malá nebo velká písmena
  • získat textový obsah html souboru odstraněním tagů (HTML -> Konverze -> Odstanit tagy)
  • importovat text z RTF do HTML
  • snadné vkládání barev
  • obsahuje "kapátko"
  • kontrola pravopisu
  • zalomení řádků
  • nahrazování textu
  • zobrazit více oken (rozdělit plochu)
  • nobrazovat online nápovědu (nástroje)
  • podporuje klávesovou zkratku (Shift)+Tab
• obsahuje interní prohlížeč s možností nastavení např. rozlišení
• vytvoření (ne)číslovaného seznamu z x řádků textu:
  • označte si požadované řádky a zvolte Úpravy, Operace s řádky, Vložit text do řádku
  • v zobrazeném okně do políčka "na začátek" napište <li>a do políčka "na konec" napište </li>
  • volbu potvrďte
  • nyní stačí jen ručně doplnit před a za např. značky <ul>a </ul>pro nečíslovaný seznam
• funkce Porovnávání textu umožňuje porovnat dva textové soubory (v jednom panelu si otevřete starší soubor, v novém nejnovější soubor a okamžitě vidíte, kde jsou odlišnosti)
• v souborovém manžeru (např. Total Commanderu) je možné nastavit PSPad jako výchozí editor textových souborů
• k usnadění psaní elementů, atributů a stylů je možné používat klávesovou zkratku Ctrl+mezera
• pevnou mezeru  je možné vkládat klávesovou zkratkou Ctrl+Shift+mezera
• uzavírání elementu pomocí klávesové zkratky Ctrl+tečka
  • stáhněte si skript a rozbalte ho do adresáře CESTA-K-PSPAD\Script\JScript
  • nyní můžete používat klávesovou zkratku Ctrl+tečka na uzavírání (dokončování) libovolného elementu

 

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
  "http://www.w3.org/TR/html4/frameset.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

http://cs.wikipedia.org:80/w/wiki.phtml?title=URL&action=edit

<h1>Nadpis první úrovně</h1>

<h1><em></h1></em>
<h1><em></em></h1>

<hr></hr>

<h1 id="nadpis1">Nadpis první úrovně</h1>
<hr class="vytisknout" />
<img src="logo.jpg" alt='Popis “našeho” obrázku' />

<!-- komentar -->

<!--[if IE]>
  Používáte Internet Explorer.
<![endif]-->

<!--[if IE 6]>
  Používáte Internet Explorer verze 6.
<![endif]-->

<!--[if lte IE 6]>
  Používáte Internet Explorer verze 6 nebo nižší.
<![endif]-->

<!--[if (gte IE 5)&(lte IE 7)]>
  Tento text se zobrazí v IE od verze 5 až po verzi 7.
<![endif]-->

<!--[if (gte IE 5)&(lte IE 7)]>
  Tento text se zobrazí v IE od verze 5 až po verzi 7.
  <![if IE 6]>
    Tento text doplní výše uvedený text, ale pouze v IE 6
    (vnořená podmínka).
  <![endif]>
<![endif]-->

<!--[if !IE]>
  Text, ktery se nezobrazi (obycejny komentar).
  -->
    Nepoužíváte Internet Explorer.
  <!--
  Text, ktery se nezobrazi (obycejny komentar).
<![endif]-->

<!--[if !IE]> -->
  Nepoužíváte Internet Explorer.
<!-- <![endif]-->

<!--[if !IE]><!-->Nepoužíváte Internet Explorer.<!--<![endif]-->

<!--[if !IE]><!--><html><!--<![endif]-->

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="cs">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="content-language" content="cs">
    <meta name="language" content="cs">
    <title>HTML dokument</title>
    <meta name="description" content="Základní šablona HTML dokumentu">
    <meta name="keywords" content="html,dokument,šablona">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <h1>Můj první HTML dokument</h1>
    <p>Jak snadné, že?</p>
  </body>
</html>

<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-language" content="cs" />
    <meta name="language" content="cs" />
    <title>XHTML dokument</title>
    <meta name="description" content="Základní šablona XHTML dokumentu" />
    <meta name="keywords" content="xhtml,dokument,šablona" />
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <h1>Můj první XHTML dokument</h1>
    <p>Jak snadné, že?</p>
  </body>
</html> 

<!DOCTYPE html>
<html lang="cs">
  <head>
    <meta charset="utf-8">
    <title>HTML 5 dokument</title>
    <meta name="description" content="Základní šablona HTML 5 dokumentu">
    <meta name="keywords" content="html,dokument,šablona">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1>Můj první HTML5 dokument</h1>
    <p>Jak snadné, že?</p>
  </body>
</html>

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
  <head>
    <meta charset="utf-8" />
    <title>XHTML 5 dokument</title>
    <meta name="description" content="Základní šablona XHTML 5 dokumentu" />
    <meta name="keywords" content="html,dokument,šablona" />
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <h1>Můj první XHTML5 dokument</h1>
    <p>Jak snadné, že?</p>
  </body>
</html>

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">

<head>

</head>

<body>

</body>

Hlavička dokumentu

Obsah hlavičky dokumentu <head>prohlížeče přímo nezobrazují, mohou ho ovšem zpřístupnit jiným způsobem.

Např. vizuální prohlížeče mohou:

• zobrazovat navigační lištu (např. Opera)
• umožnit výběr vzhledu dokumentu

Název dokumentu <title>

• povinný pro každý dokument (právě jednou)
• obsahem může být pouze text (včetně znakových entit)
• nemůže obsahovat žádné elementy, ani komentáře
• měl by vystihovat obsah dokumentu:
  • nadpis stránky ve výsledku vyhledávání
  • velká priorita pro vyhledávače
  • název ukládaného souboru
  • neuvádějte u všech stránek stejný titulek
• neměl by obsahovat:
  • nadbytečná slova
  • speciální znaky a interpunkční znaménka (aaa Web!)
  • obecné fráze (vítejte, online, web, stránka atd.)

Špatně:

<title>Vojsko</title>

<title>Moje stránky</title>

Dobře:

<title>Velitelství výcviku&nbsp;&ndash; Vojenská akademie</title> 

<title>Tomáš Daněk &#062;&nbsp;životopis</title>

Poznámka: entita &#062; se zobrazí jako znak větší než >

Meta data <meta>

Meta data (informace) – specifikují informace o daném dokumentu.

• mohou být zpřístupněny uživateli, ale ne jako obsah stránky
• mohou být využity při ukládání dokumentu do databází
• užitečné pro vyhledávací roboty

Kódování znaků

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

 Kódování uvádějte v hlavičce dokumentu vždy před prvním textem tj. i před elementem <title> .

Jazyk dokumentu

Primární jazyk dokumentu a sémantická informace o jazyku obsahu dokumentu

<meta http-equiv="content-language" content="cs" />
<meta name="language" content="cs" />

Popis dokumentu

• zobrazuje se pod odkazem ve výsledcích vyhledávání
• neměl by být stejný na všech stránkách webu
• maximálně 256 znaků
• rozšíření názvu stránky
• pokud stránka obsahuje stejný obsah ve více jazycích:
  • uveďte pro každý jazyk jeden tento element s atributy xml:lang a lang
• měl by
  • být informativní, ale stručný
  • obsahovat jedinečná slova
• neměl by
  • obsahovat nadpis
  • měnící se informace (cena, datum, čas, adresa, telefon, fax, e-mail, URL atd.)
  • být zakončen výrazy "atd.", "apod."

<meta name="description" content="Resortní vzdělávací a výcvikové zařízení Ministerstva obrany České republiky" />

Klíčová slova

• nedoporučuje se používat příliš mnoho slov (přibližně 10)
• slova by měla odpovídat obsahu stránky

<meta name="keywords" content="velitelství,výcvik,vojenská,akademie,Vyškov,vzdělání,kurz,vojsko,armáda" />

Autor dokumentu

Jeden

<meta name="author" content="all: Odbor informačních technologií (OIT) VeV-VA; oit@ispovy.acr" />

Více

<meta name="author" content="code: Tomáš Daněk (Tomas Danek); tomas.danek@ispovy.acr" />
<meta name="author" content="style: Petr Novák (Petr Novak); pepa@z-depa.cz" />
<meta name="author" content="scripts: Petr Kozina; kozina@skriptovani.com" />

Webmaster dokumentu

<meta name="webmaster" content="Bc. Tomáš DANĚK (http://tomas.dankovi.info/)" />

Copyright dokumentu

<meta name="copyright" content="2009 Velitelství výcviku&nbsp;&ndash; Vojenská akademie - Odbor informačních technologií (oit@ispovy.acr)" />

Stylový jazyk

Pokud používáte u elementů atributy styleje vhodné doplnit do hlavičky:

<meta http-equiv="content-style-type" content="text/css" />

Implicitní (výchozí) styl dokumentu

<meta http-equiv="default-style" content="nazev-stylu" />

Skriptovací jazyk

<meta http-equiv="content-script-type" content="text/javascript" />

nebo

<meta http-equiv="content-script-type" content="text/vbscript" />

Automatické obnovení dokumentu

Počet sekund do obnovy dokumentu – použitelné např. u webových kamer

<meta http-equiv="refresh" content="10" />

Cache (paměť) prohlížeče

Neukládat dokument do cache

Používejte pouze u webů, které velmi často mění svůj obsah (webové kamery, zpravodajství, webová fóra atp.)

<!-- dokument se nesmi ukladat do cache -->
  <!-- CACHE - MSIE -->
    <meta http-equiv='cache-control' content='must-revalidate, post-check=0, pre-check=0' />
    <meta http-equiv='pragma' content='public' />
  <!-- CACHE - MSIE end -->
  <!-- CACHE - other browsers -->
    <meta http-equiv='cache-control' content='no-cache' />
    <meta http-equiv='pragma' content='no-cache' />
    <meta http-equiv='expires' content='-1' />
  <!-- CACHE - other browsers end -->
<!-- end: dokument se nesmi ukladat do cache -->

Platnost dokumentu k uvedenému datu

Po uvedeném datu žádá prohlížeč o obnovení dokumentu (neuvádějte hodnotu nula), hodnota -1 znamená neukládat do cache viz víše:

<meta http-equiv="expires" content="Thu, 30 Dec 2002 15:17:45 GMT" />

Platnost dokumentu od posledního požadavku

Dokument je platný (může být nahráván z cache prohlížeče) jeden týden tj. 604 800 s od posledního požadavku:

<meta http-equiv="cache-control" content="max-age=604800, must-revalidate">

Dokument je platný (může být nahráván z cache prohlížeče) jeden den tj. 86 400 s od posledního požadavku:

<meta http-equiv="cache-control" content="max-age=86400, must-revalidate" />

 Dublin Core

Soubor metadatových prvků, jehož záměrem je usnadnit vyhledávání elektronických zdrojů.

<meta name="DC.Title" content="Velitelství výcviku&nbsp;&ndash; Vojenská akademie" />
<meta name="DC.Identifier" content="http://www.vavyskov.cz" />
<meta name="DC.Language" content="cs" />

 Informace pro vyhledávací roboty

Klíčová slova:

• index: indexovat URL a obsah
• follow: následovat URL odkazy
• snippet: okolo výsledku vyhledávání zobrazit část textu
• archive: vytvořit a archivovat snímek stránky

Indexovat obsah, následovat odkazy, okolo výsledku vyhledávání zobrazit i část textu a archivovat snímek stránky:

<meta name="robots" content="index,follow" />
<meta name="googlebot" content="index,follow,snippet,archive" />

Neindexovat obsah, nenásledovat odkazy, okolo výsledku vyhledávání nezobrazovat část textu a nevytvářet snímek stránky:

<meta name="robots" content="noindex,nofollow" />
<meta name="googlebot" content="noindex,nofollow,nosnippet,noarchive" />

Klíčová slova bez a se záporem no je možné i kombinovat.

Souhrn 1

1. Základními prvky (X)HTML jsou elementy, jejich atributy, znakové entity a samozřejmě text, který reprezentuje informace samotné.
2. Syntaxe jazyka (X)HTML je vyjádřena v DTD (Document Type Definition). Jedná se o textový soubor, kde se nacházejí deklarace (stanovení) všech povolených elementů, jejich atributů a jejich povoleného obsahu.
3. (X)HTML dokument je obyčejný textový soubor v určitém kódování, jenž je uvedeno v XML deklaraci a pomocí elementu <meta>. Univerzálním řešením je používat kódování UTF-8. Pro češtinu je také možné použít ISO-8859-2 nebo windows-1250.
4. (X)HTML dokument je celý uzavřen v elementu <html> a skládá se ze dvou základních částí: hlavičky <head> a těla <body>.
5. Každý (X)HTML dokument by měl ve své hlavičce obsahovat informaci o kódování a jazyku dokumentu.
6. Hlavička dokumentu musí obsahovat element <title>.

Tělo dokumentu

Tělo dokumentu <body>:

• je „zobrazovaný“ obsah dokumentu
• je povinné pro každý (X)HTML dokument
• do tohoto elementu není možné vkládat text „přímo“, ale je nutné ho obalit ještě do nějakého jiného elementu

<h1>Nadpis první úrovně</h1>

<p>Odstavec textu</p>

<hr />

<address>Velitelství výcviku&nbsp;&ndash; Vojenská akademie
  (VeV-VA), 682&nbsp;01 Vyškov, Víta Nejedlého,
  Tel. +420 973&nbsp;451&nbsp;022</address>

<address>
  Velitelství výcviku&nbsp;&ndash; Vojenská akademie (VeV-VA)<br />
  Víta Nejedlého<br />
  682&nbsp;01 Vyškov<br />
  Tel. +420 973&nbsp;451&nbsp;022
</address>

<blockquote cite="http://cs.wikipedia.org/wiki/Jan_Werich">
  <p>Mějte dobrou náladu. Dobrá nálada vaše problémy sice nevyřeší, 
   ale naštve tolik lidí kolem, že stojí za to si ji užít.</p>
  <p>Kdo víno má a nepije, kdo hrozny má a nejí je,
   kdo ženu má a nelíbá, kdo zábavě se vyhýbá,
   na toho vemte bič a hůl, to není člověk, to je vůl.</p>
  <div>Autor: <cite>Jan Werich</cite></div>
</blockquote>

<p>Vyhledávač <a href="http://www.google.com">Google</a></p> 

<p>Webová standardizační organizace <a href="http://www.w3.org"
 type="text/html" charset="utf-8" hreflang="en" xml:lang="en"
 lang="en" title="The World Wide Web Consortium">W3C</a></p>

<p><a href="#odstavec1">První odstavec</a></p>

<!-- kotva -->
<p><a id="odstavec1" name="odstavec1"></a></p>

<p>Text psaný <strong>tučně</strong>.</p>

<p>Text psaný <em>kurzivou</em>.</p>

<p>2<sup>3</sup></p>

<p>H<sub>2</sub>0</p>

<p>Citace: <q>Armáda beranů, kterou vede lev, je silnější, 
 než armáda lvů, kterou vede beran</q>, řekl kdysi <cite>Napoleon
 Bonaparte</cite>.</p>

<p>Používáme rozšiřitelný hypertextový značkovací jazyk <abbr
 title="EXtensible HyperText Markup Language">XHTML</abbr>.</p>

<p>Zkratkovité slovo <acronym title="Československá dopravní
 kancelář">ČEDOK</acronym>.</p>

<p>Definice: <dfn>Lednička</dfn> se&nbsp;obvykle používá
 k&nbsp;chlazení potravin.</p>

<p>Odkaz se&nbsp;v&nbsp;(X)HTML vytváří pomocí elementu
 <code>a</code>.</p>

<p>Do následujícího pole vložte svůj <kbd>rok narození</kbd>.</p>

<p>Kurz bude zahájen <del cite="duvod-zmeny.html" datetime="2010-04-17T01:09:03+1:00"> 19. 9. 2010</del><ins>20. 9. 2010</ins>.</p>

<del>
  <p>Kurz bude zahájen: 19. 9. 2010</p>
</del>
<ins>
  <p>Kurz bude zahájen: 20. 9. 2010</p>
</ins>

<pre>

  Předformátovaný text         s mezerami
→     →     tabulátory

a s odřádkováním

</pre>

<p>Jednoslabičné předložky a&nbsp;spojky na&nbsp;koncích rádků
  je vhodné spojovat s&nbsp;následujícím slovem.</p>

<address>
  Jméno a příjmení<br />
  Ulice<br />
  Město<br />
  PSČ
</address>

<address>
  Jméno a příjmení<br>
  Ulice<br>
  Město<br>
  PSČ
</address>

<p lang="en">English language</p> 

<p xml:lang="en" lang="en">English language</p>

<div id="header">
  <h1>Nadpis první urovně</h1>
</div>

<div id="content">
  <p>První odstavec textu</p>
  <p>Druhý odstavec textu</p>
  <p>Třetí odstavec textu</p>
</div>

<div id="footer">
  <p>SkPoVzd/OIT VAV</p>
</div>

<p><span lang="en">Copyright</span> SkPoVzd/OIT VAV</p>

<p><span xml:lang="en" lang="en">Copyright</span> SkPoVzd/OIT VAV</p>

<ul>
  <li>jedna položka</li>
  <li>druhá položka</li>
  <li>třetí položka</li>
</ul>

<ol>
  <li>první položka</li>
  <li>druhá položka</li>
  <li>třetí položka</li>
</ol>

<ol start="4">
  <li>čtvrtá položka</li>
  <li>pátá položka</li>
  <li value="2">druhá položka</li>
</ol>

<dl>
  <dt>první pojem</dt>
  <dd>vysvětlení prvního pojmu</dd>
  <dt>druhý pojem</dt>
  <dd>vysvětlení druhého pojmu</dd>
  <dd>jiné vysvětlení druhého pojmu</dd>
</dl>

<ul>
  <li>text ... 
    <ol>
      <li>text ... </li>
      <li>text ... </li>
    </ol>
  </li>
  <li>text ... </li>
</ul>

<dl>
  <dt>první pojem</dt>
    <dd>vysvětlení ... 
      <ul>
        <li>text ... </li>
        <li>text ... </li>
      </ul>
    </dd>
  <dt>druhý pojem</dt>
  <dd>vysvětlení ...</dd>
</dl>

<table border="1" cellspacing="0" summary="Tabulka obsahuje
  3 sloupce a 1 řádek a ukazuje možnosti zobrazení tabulek
  u webových stránek.">
  <caption>Jednoduchá tabulka</caption>
  <tr>
    <th>Hlavičková buňka</th>
    <td>Datová buňka 1</td>
    <td>Datová buňka 2</td>
  </tr>
</table>

<table border="1" cellspacing="0" summary="Tabulka obsahuje
  6 sloupců a 10 řádků. V prvním řádku je uveden popis sloupců.
  1. soupec obsahuje den, 2. pořádanou akci, 3. čas,
  4. učastníky, 5. místo a 6. poznámky.">
  <caption>Program na&nbsp;víkend</caption>
  <colgroup class="den"><!-- nastaveni tridy pro prvni sloupec -->
    <col />
  </colgroup>
  <colgroup class="akce"><!-- nastaveni tridy pro druhy az treti
    sloupec -->
    <col span="2" /><!-- nastaveni atributu zahrnuje 2 sloupce -->
  </colgroup>
  <thead>
    <tr>
      <th>Den</th>
      <th>Akce</th>
      <th>Čas [h]</th>
      <th>Účast</th>
      <th>Místo</th>
      <th>Poznámky</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="2">Pátek</th>
      <td>Příjezd</td>
      <td>do 19.00</td>
      <td>Všichni</td>
      <td>Hlavní vchod</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Ubytování</td>
      <td>19.00–20.00</td>
      <td>Všichni</td>
      <td>Perníková chaloupka</td>
      <td>Přezůvky nutné</td>
    </tr>
    <tr>
      <th rowspan="4">Sobota</th>
      <td>Snídaně</td>
      <td>8.00–8.30</td>
      <td>Všichni</td>
      <td rowspan="2">Jídelna</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Oběd</td>
      <td>12.00–13.00</td>
      <td>Pouze zájemci</td>
      <td>Vlastní příbor</td>
    </tr>
    <tr>
      <td>Svačina</td>
      <td>15.00–15.30</td>
      <td>Muži</td>
      <td>Ovocný sad</td>
      <td>Vlastní žebřík</td>
    </tr>
    <tr>
      <td>Večeře</td>
      <td>18.00–19.00</td>
      <td>Do hmotnosti 80&nbsp;kg</td>
      <td>Palouček před jídelnou</td>
      <td>Vlastní deka nutná</td>
    </tr>
    <tr>
      <th rowspan="3">Neděle</th>
      <td>Snídaně</td>
      <td>8.00–8.30</td>
      <td>Všichni</td>
      <td rowspan="2">Jídelna</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Oběd</td>
      <td>12.00–13.00</td>
      <td>Pouze zájemci</td>
      <td>Vlastní příbor</td>
    </tr>
    <tr>
      <td>Odjezd</td>
      <td>13.00</td>
      <td>Všichni</td>
      <td>Hlavní parkoviště</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

<h3>Program na&nbsp;víkend</h3>
<h4>Pátek</h4>
<ul>
  <li>Příjezd
    <ul>
      <li><strong>Čas:</strong> do 19.00&nbsp;h</li>
      <li><strong>Účast:</strong> Všichni</li>
      <li><strong>Místo:</strong> Hlavní vchod</li>
    </ul>
  </li>
  <li>Ubytování
    <ul>
      <li><strong>Čas:</strong> 19.00–20.00&nbsp;h</li>
      <li><strong>Účast:</strong> Všichni</li>
      <li><strong>Místo:</strong> Perníková chaloupka</li>
      <li><strong>Poznámka:</strong> Přezůvky nutné</li>
    </ul>
  </li>
</ul>
<h4>Sobota</h4>
<ul>
  <li>Snídaně
    <ul>
      <li><strong>Čas:</strong> 8.00–8.30&nbsp;h</li>
      <li><strong>Účast:</strong> Všichni</li>
      <li><strong>Místo:</strong> Jídelna</li>
    </ul>
  </li>
  <li>Oběd
    <ul>
      <li><strong>Čas:</strong> 12.00–13.00&nbsp;h</li>
      <li><strong>Účast:</strong> Pouze zájemci</li>
      <li><strong>Místo:</strong> Jídelna</li>
      <li><strong>Poznámka:</strong> Vlastní příbor</li>
    </ul>
  </li>
  <li>Svačina
    <ul>
      <li><strong>Čas:</strong> 15.00–15.30&nbsp;h</li>
      <li><strong>Účast:</strong> Muži</li>
      <li><strong>Místo:</strong> Ovocný sad</li>
      <li><strong>Poznámka:</strong> Vlastní žebřík</li>
    </ul>
  </li>
  <li>Večeře
    <ul>
      <li><strong>Čas:</strong> 18.00–19.00&nbsp;h</li>
      <li><strong>Účast:</strong> Do hmotnosti 80&nbsp;kg</li>
      <li><strong>Místo:</strong> Palouček před jídelnou</li>
      <li><strong>Poznámka:</strong> Vlastní deka nutná</li>
    </ul>
  </li>
</ul>
<h4>Neděle</h4>
<ul>
  <li>Snídaně
    <ul>
      <li><strong>Čas:</strong> 8.00–8.30&nbsp;h</li>
      <li><strong>Účast:</strong> Všichni</li>
      <li><strong>Místo:</strong> Jídelna</li>
    </ul>
  </li>
  <li>Oběd
    <ul>
      <li><strong>Čas:</strong> 12.00–13.00&nbsp;h</li>
      <li><strong>Účast:</strong> Pouze zájemci</li>
      <li><strong>Místo:</strong> Jídelna</li>
      <li><strong>Poznámka:</strong> Vlastní příbor</li>
    </ul>
  </li>
  <li>Odjezd
    <ul>
      <li><strong>Čas:</strong> 13.00&nbsp;h</li>
      <li><strong>Účast:</strong> Všichni</li>
      <li><strong>Místo:</strong> Hlavní parkoviště</li>
    </ul>
  </li>
</ul>

<p>
  <img width="136" height="200" src="images/logo-vav.jpg"
    alt="Logo Velitelství výcviku&nbsp;&ndash; Vojenské akademie"
    title="Logo Velitelství výcviku&nbsp;&ndash; Vojenské akademie"
    longdesc="popis/vyznam-symbolu.html" />
  <a href="popis/vyznam-symbolu.html" title="Popis jednotlivých
    symbolů loga Logo Velitelství výcviku&nbsp;&ndash; Vojenské
    akademie">[popis]</a>
</p>

<p>
  <img src="files/images/organizacni-diagram-oit.png" height="118"
    width="470" usemap="#map" alt="Organizační diagram OIT"
    title="Organizační diagram Odboru informačních technologií" />
  <map id="map" name="map">
    <area href="#OdDS" shape="rect" coords="5,82,78,115"
      title="Oddělení datových sítí" alt="OdDS" />
    <area href="#OdProIS" shape="rect" coords="82,82,155,114"
      title="Oddělení provozu informačních systémů" alt="OdProIS" />
    <area href="#OdUPod" shape="rect" coords="160,82,233,114"
      title="Oddělení uživatelské podpory" alt="OdUPod" />
    <area href="#OdKnSl" shape="rect" coords="237,82,311,114"
      title="Oddělení knihovnických služeb" alt="OdKnSl" />
    <area href="#OdMT" shape="rect" coords="314,82,387,113"
      title="Oddělení multimediální tvorby" alt="OdMT" />
    <area href="#VydOd" shape="rect" coords="392,82,465,114"
      title="Vydavatelské oddělení" alt="VydOd" />
  </map>
</p>

<object data="files/images/organizacni-diagram-oit.png" height="118"
  width="470" type="image/png" usemap="#map1"
  title="Organizační diagram Odboru informačních technologií" />
  <map id="map1" name="map1">
    <p>
      <a href="#OdDS" shape="rect" coords="5,82,78,115"
        title="Oddělení datových sítí">OdDS</a> |
      <a href="#OdProIS" shape="rect" coords="82,82,155,114"
        title="Oddělení provozu informačních systémů">OdProIS</a> |
      <a href="#OdUPod" shape="rect" coords="160,82,233,114"
        title="Oddělení uživatelské podpory">OdUPod</a> |
      <a href="#OdKnSl" shape="rect" coords="237,82,311,114"
        title="Oddělení knihovnických služeb">OdKnSl</a> |
      <a href="#OdMT" shape="rect" coords="314,82,387,113"
        title="Oddělení multimediální tvorby">OdMT</a> |
      <a href="#VydOd" shape="rect" coords="392,82,465,114"
        title="Vydavatelské oddělení">VydOd</a>
    </p>
  </map>
</object>

Strukturální a sémantické elementy

Strukturální elementy (header, nav, main, section, article, aside, footer) vytváří strukturu dokumentu tj. člení dokument na jednotlivé celky.

Sémantické elementy - popisují povahu obsahu elementu:

• blokové (hgroup, h1 až h6, p, address, ul, ol, dl, dt atd.)
• řádkové (em, strong, dfn, code, samp, kbd, var, cite, abbr a acronym)

Výhody strukturálních a sémantických elementů

1. Správně strukturovaný text může být interpretován podle možností daného zařízení (obrazovka, tiskárna, hlasový výstup atd.) a preferencí uživatele.
2. Strukturovaný dokument umožňuje lepší strojové zpracování a analýzu dokumentu (vyhledávání a určení počtu určitých pojmů atd.).
3. Vyhledávače lépe porozumí obsahu stránky a předloží tak uživateli lepší výsledky při vyhledávání.
4. Rozdělení delších textů na kratší úseky, pomocí strukturálních elementů (h1 až h6, p, ul, ol, dt atd.), zvyšuje dobrou orientaci na stránce (dlouhé texty mohou čtenáře odradit).
5. Pomocí stylů je možné jednoduše definovat vzhled dokumentu.

Cvičení 3

Z přiložených dat vytvořte webovou prezentaci.

1. Jako výchozí dokument použijte výsledný soubor index.html ze cvičení 2.
2. Vytvořené soubory uložte do kořene webové prezentace pod názvy iro.html, odds.html,  odknsi.html, odmt.html, odprois.html, odupod.html, vydod.html.
3. Obrázky ukládejte do adresáře images/.

Cvičení 4

Z přiložených dat vytvořte webovou fotogalerii.

1. XHTML
   1. Výchozí soubor index.html bude jako hlavní fotografii obsahovat foto-04.jpg.
   2. Vytvořte aktivní odkazy na fotografie foto-03.jpg a foto-05.jpg. Výsledné soubory uložte jako foto-03.html a foto-05.html.
   3. Ve fotogalerii použijte přiloženou ikonu favicon.ico.
2. Navigace – obrázková mapa
   1. Doplňte fotogalerii o obrázkovou mapu umožňující pohodlnější přechod na předcházející a následující fotografii.

Formuláře

Ukázka webového formuláře

Typografie

Internetová jazyková příručka

V češtině bychom správně měli rozlišovat pevnou mezeru non-breaking space (patří za jednoslabičné přeložky) a tenkou mezeru thin space (používá se mezi číslem a jednotkou, titulem a jménem, v telefonních číslech atd.) viz znakové entity. Bohužel ne všechny prohlížeče interpretují tenkou mezeru jako nerozdělitelnou. 

Základní zásady:

• používejte nerozdělitelnou mezeru  
  • jednopísmenné předložky: k, o, s, u, v, z
  • jednopísmenné spojky: a, i
  • jednoslabičné předložky a spojky: až, bez, buď, čím, do, ke, když, na, nad, od, po, pod, pro, před, přes, při, se, tím, ve, za, ze, že
  • jednotky: 10 cm, 50 %, 100 Kč
  • datum a jeho možné způsoby zápisu:
    1. řadové číslovky 1. 4. 2004
    2. značka, kde tečky vyjadřují dělící znaménka 01.04.2004 (při zápisu bez mezer musí být den a měsíc ve dvojciferném tvaru)
    3. sestupný zápis 2004-04-01
  • paragraf: § 123
  • symbol &: Černá & Bílá
  • poměry: 1 : 3
  • matematické výrazy: 17 + 9 - 6 *9 / 6 = 26
    • v textu (např. GNU/Linux) se kolem lomítka mezera nepíše
  • oddělovač tisíců: 10 000 000
  • pomlčka:  –
  • zkratky: s. r. o., a. s.
  • iniciály křestního jména a příjmení: V. Havel, T. G. M
  • titul před jménem: Ing. Jan Šroubeček
  • titul za příjmením: Jan Šroubeček, DiS., další text (jedná se o vsuvku)
  • víceslovné odborné termíny, jehož jednotlivé části jsou zkratkami: Mac OS X
• nepoužívejte nerozdělitelnou mezeru:
  • jednotky ve funkci přídavného jména: 100W žárovka, 12° pivo, úhel 360°
  • procenta ve smyslu přídavného jména: 3% úrok (tříprocentní úrok)
  • lomítko: km/h
  • desetinná čárka: 23,4
  • násobky: 10krát, 10násobně, 10× (10×)
  • sportovní výsledky: Ostrava-Jablonec: 0:0
  • čas (hodina se píše bez počáteční nuly, minuty a sekundy jsou vždy dvojciferné):
    • 5.32:15,147 h (5 hodin, 32 minut, 15 sekund a 147 tisícin sekundy)
    • 5.32 h (5 hodin, 32 minut)
    • 32:15 min (32 minut, 15 sekund)
    • 15,147 s (15 sekund a 147 tisícin sekundy)
• rozlišujte pomlčky (–) –a spojovníky (-)
  • pomlčka je obklopena zleva nerozdělitelnou mezerou a zprava tzv. „bílým znakem“
  • spojovník spojuje slova přímo bez žádných mezer
• rozlišujte české „kulaté“ uvozovky (dolní 99 „a horní 66 “) a anglické "rovné"
• tečka na konci věty se nezdvojuje
• za tečkou následuje mezera, ne před ní

Bližší informace:

• ÚJČ AV ČR
• Typografické rady
• Typografie
• Webdesignerovy poznámky z typografie
• Typografie na webu v kostce
• Hříchy pro šíleného korektora

Přidělení stylů

Způsob jakým se stránka zobrazí na výstupním zařízení (počítač , tiskárna, hlasový výstup atd.) je možné definovat:

• atributem style
  • vysoká priorita – přepíše všechny ostatní styly přiřazené témuž elementu jiným způsobem
• elementem <style>
  • střední priorita – přepíše styly definované v externím souboru (případně styly připojené pravidlem @import)
• připojením externího souboru elementem <link>
  • nízká priorita
• import externího souboru pravidlem @import
  • nejnižší priorita – přepíší je všechny později deklarované styly

Atribut style

Slouží k definici stylu elementu ve kterém je definován.

Pokud se rozhodnete u elementů používat tyto atributy, je nutné v hlavičce dokumentu definovat typ stylového jazyka.

  ...
  <meta http-equiv="content-style-type" content="text/css" />
</head>
<body>
  ...
  <h2 style="color: red;">Červený nadpis</h2>
  <p style="color: blue;">Modrý text odstavce</p>
  ... 

Poznámka: V případě HTML dokumentu element meta na konci lomítko nemá.

Element <style>

• slouží k definici stylu dokumentu ve kterém je definován
• může se vyskytovat pouze v hlavičce dokumentu <head>

HTML

Uzavřením stylu do komentáře znepřístupníme styly pro prohlížeče, které kaskádové styly (CSS) ještě neznají (CSS je podporováno až od HTML 3.2).

  ...
  <style type="text/css">
    <!--
      h2 {color: red;}
      p {color: blue;}
    -->
  </style>
</head>
<body>
  ...
  <h2>Červený nadpis</h2>
  <p>Modrý text odstavce</p>
  ... 

XHTML

V samotném obsahu elementu nejsou rozeznávány znakové entity.

Uzavřením stylu mezi <![CDATA[ a ]]> zajistíte rozeznávání znakových entit. Protože se ale nejedná o prvky stylu je vhodné je uzavřít do komentářů daného stylového jazyka.

  ...
  <style type="text/css">
    /* <![CDATA[ */
      h2 {color: red;}
      p {color: blue;}
    /* ]]> */
  </style>
</head>
<body>
  ...
  <h2>Červený nadpis</h2>
  <p>Modrý text odstavce</p>
  ... 

Element <link>

• slouží k definování vztahů dokumentu s jinými dokumenty
  • připojení definice stylu dokumentu
  • navigace dokumentu
• může se vyskytovat pouze v hlavičce dokumentu <head>
  • k popisu zdroje je možné využít atribut title
  • parametr rel určuje typ šablony
    • stylesheet – základní (výchozí) šablona
    • alternate – alternativní šablona (umožňuje uživateli nabídnou jiný vzhled)
  • vždy uvádějte atribut type

  ...
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
  ...
  <h2>Červený nadpis</h2>
  <p>Modrý text odstavce</p>
  ...

Připojený soubor style.css obsahuje:

h2 {color: red;}
p {color: blue;}

Pravidlo @import

Pravidlo @import je doporučeno uvádět v CSS vždy jako první.

Hlavička dokumentu

HTML

  ...
  <style type="text/css">
    <!--
      @import url("style.css");
      h2 {color: red;}
      p {color: blue;}
    -->
  </style>
</head>
<body>
  ...
  <h2>Červený nadpis</h2>
  <p>Modrý text odstavce</p>
  ... 

XHTML

  ...
  <style type="text/css">
    /* <![CDATA[ */
      @import url("style.css")
      h2 {color: red;}
      p {color: blue;}
    /* ]]> */
  </style>
</head>
<body>
  ...
  <h2>Červený nadpis</h2>
  <p>Modrý text odstavce</p>
  ...

Externí soubor

Příklad pravidla @import v externím CSS souboru:

@import url("style.css")
h2 {color: red;}
p {color: blue;}

 Doporučení:

1. Používejte externí soubory se styly.
   • do stylu se mohou bez problémů zapisovat libovolné znaky (<, >, & atd.)
   • na styly uvedené v externím souboru je možné se odkazovat ze všech dokumentů webu
   • při úpravě vzhledu dokumentu stačí upravit pouze soubor se styly
   • styly se načtou pouze pro zařízení (média), která je podporují
   • prohlížeče si externí soubor uloží do cache paměti a nemusí je znovu stahovat
2. Nepoužívejte "tabulkové" rozložení (layout) stránky.
3. Nepoužívejte rámce:
   • vyhledávače mohou odkazovat pouze na hlavní rámec s obsahem (chybí navigace, hlavička stránky atd.);
   • problémy při tisku atd.

NN4 a IE4 z kaskádových stylů spolehlivě podporují pouze styl a barvu písma.

Média

CSS dokáží rozlišovat výstupní zařízení (médium).

Typy médií

• all – všechny typy zařízení
• screen – obrazovka počítače
• projection – velkoplošné projektory, projekční jednotky a u prohlížečů režim zobrazení celá obrazovka (většinou klávesa F11)
• print – tisk na tiskárně a zobrazení výstupu na monitoru před tiskem
• tv – televizní obrazovka (nízké rozlišení, omezený počet barev, omezené možnosti posouvání obsahu atd.)
  
• handheld – obrazovka kapesního zařízení (s malým displejem)
• tty – neproporční znakový výstup (dálnopisy, terminály, zařízení s omezenou velikostí obrazovky atd.)
• aural – zvukový výstup (CSS2)
• speech – čtecí zařízení (CSS3)
• braille – braillská dotyková (hmatová) zařízení
• embossed – plastický tisk na braillské tiskárně (vícestránkové tiskárny)

 Možnosti deklarace

• v hlavičce dokumentu
  • při deklaraci CSS
    • v elementu <style>

      • <style type="text/css" media="screen, projection">

    • v pravidle @import

      • @import url("style.css") screen, projection
        

    • pravidlem @media
  • v elementu <link> atributem media

    • <link rel="stylesheet" type="text/css" href="style.css"
         media="screen, projection" />
      

• v externím souboru CSS
  • v pravidle @import
  • pravidlem @media

Pravidlo @media

Je možné použít v jakémkoli typu zápisu (jak v atributu style, v elementu <style>, tak i v externím CSS souboru).

@media screen, projection {
  h2 {color: red;}
  p {color: blue;}
}

@media
(min-width: 44em)  { /* ...STYLES... */}

@media
(min-width: 44em) and (-webkit-min-device-pixel-ratio: 1.25),
(min-width: 44em) and (min-resolution: 120dpi) { /* ...STYLES... */}

@media
(min-width: 44em) and (-webkit-min-device-pixel-ratio: 1.3),
(min-width: 44em) and (min-resolution: 124.8dpi) { /* ...STYLES... */}

@media
(min-width: 44em) and (-webkit-min-device-pixel-ratio: 1.5),
(min-width: 44em) and (min-resolution: 144dpi) { /* ...STYLES... */}

@media
(min-width: 44em) and (-webkit-min-device-pixel-ratio: 2),
(min-width: 44em) and (min-resolution: 192dpi) { /* ...STYLES... */}

<meta name="viewport" content="width=device-width, initial-scale=1">

img,
embed,
object,
video {
  display: block; /* IE (display: block; | width: auto; | width: 100%;) */
  max-width: 100%;
  height: auto;
  vertical-align: top; /* optional */
  -ms-interpolation-mode: bicubic;
}

html {
  /*-webkit-text-size-adjust: none;*/
}

<!DOCTY​PE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML 5 dokument</title>
    <meta name="description" content="Základní šablona HTML 5 dokumentu" />
    <meta name="keywords" content="html,dokument,šablona" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <header id="header">
      <p>Site Name</p>
    </header>
    <nav>
      <ul id="main-nav">
        <li><a href="#">Home</a></li>
      </ul>
    </nav>
    <main>
      <h1>Page Title</h1>
      <section>
        <h2>Section Title
        <article class="post">
          <h3>Atricle Title
          ...
        </article>
      </section>
      <section>
        <h2>Section Title
        <article class="post">
          <h3>Atricle Title
          ...
        </article>
      </section>
    </main>
    <aside id="sidebar">
      <section class="block">
        ...
      </section>   
    </aside>
    <footer id="footer">
      ...
    </footer>
  </body>
<html>

<!--[if IEMobile 7]><html class="ie iem7"><![endif]-->
<!--[if lte IE 6]><html class="ie lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if (IE 7)&(!IEMobile)]><html class="ie lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="ie lt-ie9"><![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)]><html class="ie"><![endif]-->
<!--[if !IE]><!--><html><!--<![endif]-->

<!--[if lte IE 9]>
  <meta http-equiv="x-ua-compatible" content="ie=edge" />
<![endif]-->

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->

Selektory

Selektory určují prvky, pro které má definice platit.

Univerzální selektor

Vybírá libovolný element (všechny elementy v dané hierarchii).

Příklad CSS:

* {
  color: blue;
}

Typový selektor

Vybírá element podle typu.

Část zdrojového kódu:

<p>text odstavece</p>

Příklad CSS:

p {
  color: blue;
}

Selektor třídy

Vybere element označený definovanou třídou.

Část zdrojového kódu:

<p class="odstavec">text odstavece</p>
<p class="poznamka">text poznámky</p>
<div class="poznamka">text poznámky</div>

Příklad CSS:

.odstavec {
  color: blue;
}
.poznamka {
  color: red;
}
div.poznamka {
  border: 1px solid red;
  padding: 2px;
}

Na stránce může být libovolné množství prvků se stejnou třídou.

Selektor pseudo-třídy

Tip: An ultimate guide to CSS pseudo classes and pseudo elements 

Příklad použití CSS na všechny nenavštívené odkazy:

a:link {
  color: #039;
}

Příklad použití CSS na všechny navštívené odkazy:

a:visited {
  color: #930;
}

Příklad použití dynamického CSS aktivované ve chvíli, kdy uživatel na odkaz najede kurzorem myši (:hover používejte až za :link a :visited):

a:hover {
  color: #f30;
  text-decoration: underline;
}

Příklad použití dynamického CSS aktivované prvku, který je připraven pro příjem vstupu ze vstupního zařízeni např. na který je právě kliknuto myší, stisknuta klávesa Enter nebo mezerník (:active používejte až za :link, :visited a :hover):

a:active {
  color: #f30;
  text-decoration: underline;
}

Příklad použití dynamického CSS při výběru odkazu, tlačítka, výběrovného seznamu a dalších formulářových prvnků uživatelem např. pomocí klávesnice:

a:focus {background: yellow;}
a:focus:hover {background: white;}

První podřízený prvek jiného prvku:

p:first-child {text-indent: 2em;}
p:first-child em {font-weight: bold;}

První, druhá, předposlední a poslední buňka tabulky:

td:first-child {width: 20%;}
td:nth-child(2) {width: 60%;}
td:nth-last-child(2) {width: 40%;}
td:last-child {width: 20%;}

Každá třetí řádek "counter" (3n) – pozor počátek je nula, proto je posun "offset" nastaven na jedničku (+1):

tr:nth-child(3n+1) {
    background-color: #eee;
}

Příklad různého nastavení dvojice uvozovek pro celý dokument a atribut prvku <cite> v jazyce čeština a angličtina:

:lang(cs) {quotes: '„' '“' "‚" "‘"}
:lang(en) {quotes: '“' '”' "‘" "’"}

cite[lang="cs"] {quotes: '„' '“' "‚" "‘"}
cite[lang="en"] {quotes: '“' '”' "‘" "’"}

Selektor pseudo-elementu

CSS3 od sebe označením odlišuje pseudo-třídy, které používají jednu dvojtečku :a pseudo-elementy u kterých se používá "dvojitá dvojtečka" ::(v CSS2 se u všech pseudo prvků používá dvojtečka jednoduchá).

IE8 podporuje pouze CSS2, od IE9+ je již plná podpora CSS3 pseudo prvků. 

Příklad prvního řádku odstavce:

p:first-line {text-transform: uppercase;}

Příklad použití CSS na první písmeno odstavce (vybere pouze část skutečného elementu):

p:first-letter {
  font-size: 300%;
  font-weight: bold;
  float: left;
  margin-right: .1em;
}

Vlastnost content

Vlastnost content umožňuje vkládat textový obsah a je možné ji používat ve spojení s pseudo-elementy :before a :after. Vlastnost content není možné aplikovat na "neobsahové" elementy jako je např. <input>, <select>, <img> atd. 

Příklad uvozovek definovaných na úrovni odstavce a zároveň kolem něj vložených „prázdných“ uvozovek:

p {quotes: '„' '“' "‚" "‘"}
p:before {content: no-open-quote}
p:after {content: no-close-quote}
cite:before {content: open-quote}
cite:after {content: close-quote}

Příklad přidání nového obsahu "mezery a šipky" za prvek třídy .slideshow-next:

.slideshow-next {
  position: reletive
}
.slideshow-next:after {
  content: ' >';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background: url('design.png') no-repeat -100px 6px;
}

Selektor identifikátoru

Vybere element označený definovaným identifikátorem.

Část zdrojového kódu:

<div id="zahlavi">Záhlaví</div>

Příklad CSS:

#zahlavi {
  color: green;
}

V jednom dokumentu (stránce) je možné id přiřadit pouze jedinému prvku.

Selektor následníka

Vybere element následníka, jež je vnořen do elementu předka bez ohledu na hloubku vnoření.

Část zdrojového kódu:

<div>
  <img src="logo.gif" alt="Logo" />
  <p>
    Podrobnosti viz <a href="#">statistika přístupnosti
     <img src="stat.gif" alt="Statistika" /></a>.
  </p>
</div>

Příklad CSS:

div img {
  border: none;
}

Selektor potomka

Vybere element potomka, jež je vnořen přímo do elementu rodiče.

Část zdrojového kódu:

<div>
  <img src="logo.gif" alt="Logo" />
  <p>
    Podrobnosti viz <a href="#">statistika přístupnosti
     <img src="stat.gif" alt="Statistika" /></a>.
  </p>
</div>

Příklad CSS:

div > img {
  border: none;
}

Poznámky:

• mezera mezi elementy a ostrou závorkou je nepovinná
• nepoporuje IE6-

Selektor obecného sourozence

Vybere druhý definovaný element, který je  sourozencem prvně definovaného elementu. Oba sourozenci musí mít stejného rodiče, musí ležet na stejné úrovni v hierarchii dokumentu, ale nemusí ležet bezprostředně za sebou.

Část zdrojového kódu:

<body>
  <h1>Nadpis</h1>
  <p>První odstavec</p>
  <p>Druhý odstavec</p>
  <h2>Nadpis 2. úrovně</h2>
  <p>Druhý odstavec</p>
  <p>Druhý odstavec</p>
  <h3>Nadpis 3. úrovně</h3>
  <p>Druhý odstavec</p>
  <p>Druhý odstavec</p>
</body>

Příklad CSS:

h2 ~ p {
  color: blue;
}

V tomto příkladě se deklarovaná vlastnost odstavce nepoužije dříve, než u nadpisu 2. úrovně.

Poznámky:

• mezera mezi elementy a znakem tilda je nepovinná
• nepoporuje IE6-

Selektor sousedícího sourozence

Vybere druhý definovaný element, který je  sourozencem prvně definovaného elementu. Oba sourozenci musí mít stejného rodiče, musí ležet na stejné úrovni v hierarchii dokumentu a musí ležet bezprostředně za sebou.

Část zdrojového kódu:

<body>
  <h1>Nadpis</h1>
  <p>První odstavec</p>
  <p>Druhý odstavec</p>
  <h2>Nadpis 2. úrovně</h2>
  <p>Druhý odstavec</p>
  <p>Druhý odstavec</p>
  <h3>Nadpis 3. úrovně</h3>
  <p>Druhý odstavec</p>
  <p>Druhý odstavec</p>
</body>

Příklad CSS:

h2 + p {
  color: blue;
}

Poznámky:

• mezera mezi elementy a znakem plus je nepovinná
• nepoporuje IE6-

Selektory atributů (parametrů)

Vybere element, obsahující definovaný atribut, hodnotu atributu, nebo jeho část.

Příklad použití CSS pouze na elementy aobsahující atribut titles hodnotou odkaz:

a[title="odkaz"] {
  color: blue;
}

Příklad použití CSS pouze na elementy spanobsahující atribut lang, jehož hodnoty začínají řetězcem en(en-us, en-uk):

span[lang|="en"] {
  color: blue;
}

Příklad použití CSS pouze na elementy pobsahující atribut class, jehož hodnota obsahuje řetězec nadpis(nadpis1, nadpis2, ale i podnadpis):

p[class*="nadpis"] {
  color: blue;
}

Příklad použití CSS pouze na elementy pobsahující atribut class, jehož hodnota začíná řetězcem nadpis(nadpis1, nadpis2):

p[class^="nadpis"] {
  color: blue;
}

Příklad použití CSS pouze na elementy pobsahující atribut class, jehož hodnota končí řetězcem pis(nadpis, podnadpis):

p[class$="pis"] {
  color: blue;
}

Poznámky:

• IE7 vyžaduje striktní režim
• nepoporuje IE6-

h1 {
  color: blue;
}

h1, h2, h3, h4, h5, h6 {
  color: blue;
}

Komentáře

Prohlížeče komentáře ignorují. Komentáře slouží pouze autorovi k zapsání poznámek např. k lepší orientaci v kódu.

/* odstavec */ 
p {
  color: blue; /* modra barva */
  font-size: 90%; /* velikost textu */ 
}

Poznámka:
Komentáře je vhodné psát bez diakritiky.

Jednotky

• zapisují se ihned za číslo určující množství jednotek
• jako oddělovač desetinných míst se používá tečka
• jednotku není nutné uvádět u hodnoty nula
• hodnota může být jak kladná, tak i záporná
• absolutní jednotka udává přesnou míru
• relativní jednotka se vztahuje k jiné velikosti

Příklad CSS:

div {
  margin: 1.5em 5% -10px 0;
}

Pixel (px)

• obrazovkový bod (každá obrazovka má jinou velikost obrazového bodu) – nejčastěji 96 px na palec
• relativní jednotka
• použití: grafika, (dříve se používalo na Layout a Responsive design)
• nevýhody:
  • uživatelé IE9- si nemohou přizpůsobit velikost textů; IE10 nabízí funkci zoom (funkce je již delší dobu běžná u konkurenčních prohlížečů), která umožňuje měnit velikost stránky jako celku
  • problém s "poloviční velikosti" u Retina displeje

Procenta (%)

• hodnota se počítá z velikosti rodičovského prvku (v nejvyšší úrovni je jím okno prohlížeče)
• relativní jednotka (často zděděná od rodiče)
• použití: texty

• body {font-size: 10px;}
  h1 {font-size: 240%;} /* =24px */

Čtverčík (em)

• šířka velkého písmena M
• hodnota se mění v závislosti na velikosti písma
• relativní jednotka – aktuální velikost může být ovlivněna velikostí nadřazeného prvku a volbou uživatele
• použití: rozvržení (layout) dokumentu a box model
• nevýhody:
  • násobení velikosti u vnořených prvků viz např. How to size text using ems (seznam vnořený do seznamu již nemá velikost 14px ale 20px, další úroveň již má velikost 27px atd. – řešením může být deklarace vnořených prvků na 1em)

  • body {font-size: 10px; /* font-size: 62.5%; */}
    h1 {font-size: 2.4em;} /* =24px */
    p  {font-size: 1.4em;} /* =14px */
    li {font-size: 1.4em;} /* =14px??? */
    li li, li p /* etc */ {font-size: 1em;}

Poznámky:

• prvky v jednotkách em do sebe pokud možno nevnořujte, protože aktuální velikost může být ovlivněna velikostí nadřazeného prvku, volbou uživatele a z důvodu implementační chyby IE6-
• výchozí velikost text v prohlížečích bývá 16px
  • 16px * 0.625 (tj. 62.5%) = 10px
• přepočet px na em
  • child pixels / parent pixels = child ems
    12px / 10px = 1.2em

Root em (rem)

• CSS3 zavádí několik nových jednotek, mezi které patří i jednotka rem
• relativní jednotka – rem jednotka je relativní vůči kořenu dokumentu nebo html elementu (umožňuje definovat jednu velikost a z ní odvozovat další požadované velikosti)
• použití: texty
• nevýhoda: rem jednotka není podporována v Media queries u prohlížeče Chrome (Media queries with rem units in Chrome) 
• podpora: IE9+, Safari 5+, Chrome, Firefox 3.6+ (Opera ani ve verzi 11.10 zatím rem nepodporuje)
  • pro prohlížeče bez podpory rem je vhodné nejprve definovat velikost v jednotkách, které prohlížeč podporuje např. px nebo používat procenta 

• html {font-size: 10px; font-family: sans-serif; /* font-size: 62.5%; */}
  body {
    font-size: 16px; /* IE8 */
    font-size: 1.6rem; /* =16px, =12pt */
  }
  h1 {
    font-size: 24px;
    font-size: 2.4rem; /* =24px */
  }

• poznámky
  • 768px = 60em (80% font-size sans-serif) ~ max-width page width resolution 800x600px
  • 30-80 znaků na řádek

Typografický bod (pt)

• hodnota je odvozena od anglického palce
• 1 pt = 72 in (často se používá 300 pt na palec)
• absolutní jednotka
• použití: tisk

Ex (ex)

• výška malého písmena x
• hodnota se mění v závislosti na velikosti písma
• relativní jednotka – aktuální velikost může být ovlivněna velikostí nadřazeného prvku a volbou uživatele

Centimetr (cm)

• 1 cm = 10 mm
• absolutní jednotka

Poznámka: vzhledem k různým rozlišením obrazovky funguje spolehlivě snad jen při tisku.

Milimetr (mm)

• 1 mm = 3.78 px
• absolutní jednotka

Poznámka: vzhledem k různým rozlišením obrazovky funguje spolehlivě snad jen při tisku.

Palec (in)

• 1 in = 2,54 cm, 1 in = 96 px
• absolutní jednotka

Poznámka: vzhledem k různým rozlišením obrazovky funguje spolehlivě snad jen při tisku.

Pica nebo též cicero (pc)

• 1 pc = 12 pt, 1 pc = 1/6 in, 1 pc = 16 px
• absolutní jednotka

Poznámka: vzhledem k různým rozlišením obrazovky funguje spolehlivě snad jen při tisku.

Barvy

Klíčové slovo

Definuje barvu pomocí klíčového slova:

• aqua – modrozelená
• black – černá
• blue – modrá
• fuchsia – purpurová
• gray – šedá
• green – zelená
• lime – neonově zelená
• maroon – kaštanová
• navy – tmavě modrá
• olive – olivová
• purple – fialová
• red – červená
• silver – stříbrná
• teal – tmavě modrozelená
• white – bílá
• yellow – žlutá

Příklad CSS: p {color: blue;}

RGB syntaxe

Definuje barvu pomocí odstínu červené, zelené a modré tzv. RGB (Red Green Blue) syntaxe.

Příklad CSS (různé zápisy barvy blue):

p {color: #00f;} /* #00F */
p {color: #0000ff;} /* #0000FF #0000fF #0000Ff */
p {color: rgb(0, 0, 255);}
p {color: rgb(0, 0, 100%);}

Pořadí stylů

Při definování stylů může dojít k situaci, kdy jeden element může mít definovanou vlastnost různými způsoby, nebo na více místech. V tomto případě je třeba rozhodnout, kterou deklaraci, styl nebo zdroj stylů použít.

Priority definic:

1. Kaskáda
2. Dědičnost
3. Vypočítaná hodnota
4. Výchozí hodnota

Kaskáda

Při existenci více zdrojů stylů stejné důležitosti rozhoduje o tom který styl se použije kaskáda.

1. Atribut style ve zdrojovém kódu (nejsilnější)
   

   <p style="color: blue;">
   

2. Styl v hlavičce dokumentu
   

     ...
     <style type="text/css">
       <!--
         p {color: blue;}
       -->
     </style>
   </head>
   <body>
     ...
   

3. Externí styl
   

     ...
     <link rel="stylesheet" type="text/css" href="style.css" />
   </head>
   <body>
     ...
   

4. Pravidlo @import
5. Uživatelský styl definovaný v nastavení webového prohlížeče
6. Výchozí styl webového prohlížeče (nejslabší)

Specifičnost selektoru

Určuje váhu selektoru. Selektor s vyšší váhou (silnější) přepíše deklarace stejných vlastností u selektoru s nižší váhou (slabší).

1. Specifičnost: 1000 (nejsilnější)
   • atribut style ve zdrojovém kódu <p style="color: blue;">
2. Specifičnost: 0100
   • identifikátor #header {color: blue;} /* zahlavi */
3. Specifičnost: 0010
   • třída, pseudotřída nebo selektor atributu (parametru)
     

     .note {font-size: 80%;} /* poznamka */
     a:hover {text-decoration: underline;}
     a[href]:after {content: " [" attr(href) "] ";}
     

4. Specifičnost: 0001
   • typový selektor nebo pseudoelement
     

     p {color: blue;}
     p:first-letter {font-weight: bold; font-size: 130%;}
     

5. Specifičnost: 0000 (nejslabší)
   • univerzální selektor nebo jeho kombinace * {color: blue;}

Jednotlivé úrovně specifičnosti se sčítají a vyhrává ten nejsilnější.

Příklad výpočtu:

Selektor #header ul li.note p:first-letter a:hover {color: red;} má specifičnost: 0125.

Pořadí selektoru

V případě shody pravidel vyhrává to, které je uvedeno později.

Pravidlo !important

Umožňuje upřednostnit deklaraci v případě konfliktu s jinými deklaracemi bez tohoto pravidla.

V případě střetu pravidla !important v uživatelské šabloně a pravidla !important ve stylu dokumentu, vyhraje uživatelská šablona.

a {
  text-decoration: underline; !important 
}

Jedná se o poslední možné řešení, běžné CSS se bez tohoto pravidla většinou obejdou.

Dědičnost

Elementy jsou v dokumentu uspořádány ve stromové struktuře. Elementy mohou dědit hodnoty vlastností od svého nadřazeného elementu a to i po více generací. V (X)HTML je nejvyšší element html, do něj jsou vnořeny elementy head a body, do body je vnořen element h1 atd. Jedná se o pojmy následník a předchůdce. V případě přímého příbuzenství o pojmy rodič a potomek.

V CSS má každá vlastnost určeno, zda je dědičná nebo ne. U vnořeného elementu je možné zdědění vlastnosti vynutit hodnotou inherit.

Příklad:

body {
  color: teal; /* vlastnost je dedicna */
  border: 5px solid silver; /* vlastnost neni dedicna */
}
h1 {
  border: inherit; /* vynuceni dedicnosti */
}

Poznámky:

• IE7- podporuje hodnotu inherit pouze u vlastností direction and visibility

Vypočítaná hodnota

U relativních jednotek (em, % atd.) a klíčových slov (large, small atd.) je třeba vypočítat jejich skutečnou hodnotu. Skutečné hodnoty se ještě dále upravují podle možností výstupních zařízení (násobky bodu obrazovky, barevné spektrum, možnosti tiskárny atd.).

Výchozí hodnota

Každá vlastnost má CSS specifikací určenu výchozí hodnotu, která se použije v případě, pokud není stanoveno jinak. U některých vlastností může výchozí hodnotu upřesnit prohlížeč.

Základní vlastnosti

Základní vlastnosti kaskádových stylů:

p {font: small-caps bold italic Arial 120%/1.5;}

p {font: 90% bold;}

body, table {
  font-family: 'Arial CE', 'Helvetica CE', Arial, Helvetica, clean, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
  font-family: Georgia, 'Times New Roman CE', 'Times New CE', 'Times CE', 'Times New Roman', Times, serif;
}
pre, code {
  font-family: Profont, 'lucida console', 'Courier New CE',
   'Courier CE', 'Courier New', Courier, Monaco, monospace;
}

h2 {font-size: 185%;}

p {line-height: 1.5;}

abbr {font-variant: small-caps;}

p {font-weight: normal;}
strong {font-weight: bold;}

em {font-style: italic;}

body, table {color: purple;}

h1 {word-spacing: 1em;}

h1 {letter-spacing: .3em;}

th {white-space: nowrap;}

h1 {text-align: center;} /* na stred */
p {text-align: justify;} /* do bloku */
cite {text-align: right;} /* vpravo */

.horni-index {vertical-align: super;} /* v tabulce jako baseline */
.dolni-index {vertical-align: sub;} /* v tabulce jako baseline */
.co-nejvyse {vertical-align: top;}
.s-hornim-okrajem-textu {vertical-align: text-top;} /* v tabulce
 jako baseline */
.doprostred {vertical-align: middle;}
.s-dolnim-okrajem-textu {vertical-align: text-bottom;} /* v tabulce
 jako baseline */
.co-nejnize {vertical-align: bottom;}

a:hover {text-decoration: underline;} /* podtrzeno */
.ne {text-decoration: line-through;} /* preskrtnuto */
.reklama {text-decoration: blink;} /* blikajici */

p {text-indent: 2em;}

.kapitalky {text-transform: capitalize;}
.mala {text-transform: lowercase;}
.velka {text-transform: uppercase;}

.stin {text-shadow: 3px 3px 1px #999;}
.embossed {text-shadow: 0 -1px 1px rgba(0,0,0,0.5);}
h1 {
  color: #502a2d;
  letter-spacing: 0.75em;
  text-shadow:
    2px 2px 0 #bab0a6,
    2px -2px 0 #bab0a6,
    -2px 2px 0 #bab0a6,
    -2px -2px 0 #bab0a6,
    9px 9px 0 #a63e3b;
  font-effect: outline;
}

p {direction: rtl;}

p {unicode-bidi: bidi-override; direction: rtl;}

body {background: #cf3 url(../images/pozadi.jpg) top left repeat-x;}

p {background-color: #cf3;}
#header p {background-color: transparent;}

body {background-image: url(../images/pozadi.jpg);}
.zadny-obrazek {background-image: none;}

body {
  background: url(../images/pozadi.jpg) no-repeat;
  background-position: center bottom; /* osa x a osa y */
}

body {
  background-image: url(../images/pozadi.jpg);
  background-repeat: repeat-x; /* repeat-y, no-repeat, repeat */
}

body {
  background-image: url(../images/pozadi.jpg);
  background-attachment: fixed;
}

body {
  background-image: url(../images/pozadi.jpg);
  background-size: cover;
}

img {
  background-color: black;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; /* IE8+ */
  filter: alpha(opacity=30); /* IE5+ (order 1. "-ms-filter", 2. "filter" work in IE8′s emulating IE7 mode too) */
  opacity: 0.3;
}

.gradient {
  background-color: #bada55; /* background color if gradients are not supported */
  background-image:    -moz-linear-gradient(top, #bada55 0%, #2a562c 100%); /* FF(3.6 to 15) */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bada55), color-stop(100%,#2a562c)); /* Chrome, Safari4+ */
  background-image: -webkit-linear-gradient(top, #bada55 0%, #2a562c 100%); /* Chrome10+ and Safari5.1+ */
  background-image:      -o-linear-gradient(top, #bada55 0%, #2a562c 100%); /* Opera(11.1 to 12.0) */
  background-image:     -ms-linear-gradient(top, #bada55 0%, #2a562c 100%); /* pre-releases of IE10 */
  background-image:   linear-gradient(to bottom, #bada55 0%, #2a562c 100%); /* W3C standard, IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bada55', endColorstr='#2a562c',GradientType=0); /* IE(6 to 9) */
}

<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->

.gradient {
  background-color: #1e5799; /* background color if gradients are not supported */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMWU1Nzk5IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkYjllOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
  background-image: -moz-linear-gradient(-45deg, #1e5799 0%, #7db9e8 100%); /* FF(3.6 to 15) */
  background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #1e5799), color-stop(100%, #7db9e8)); /* Chrome, Safari4+ */
  background-image: -webkit-linear-gradient(-45deg, #1e5799 0%, #7db9e8 100%); /* Chrome10+,Safari5.1+ */
  background-image: -o-linear-gradient(-45deg, #1e5799 0%, #7db9e8 100%); /* Opera(11.1 to 12.0) */
  background-image: -ms-linear-gradient(-45deg, #1e5799 0%, #7db9e8 100%); /* pre-releases of IE10 */
  background-image: linear-gradient(135deg, #1e5799 0%, #7db9e8 100%); /* W3C standard, IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=1); /* IE(6 to 8) fallback on horizontal gradient ONLY */
}

.gray {
  background: url('../images/pozadi.jpg') no-repeat 0 0;
  -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
  filter: gray; /* IE5+ */
  filter: grayscale(100%);
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}
.gray:hover { 
  -webkit-filter: grayscale(0);
  filter: none;
}

h1 {border: 4px groove green;}
p {border: 4px ridge green;}

body {
  border-top: 10px solid lime;
  border-right: 10px double green;
  border-bottom: 10px dotted purple;
  border-left: 10px dashed blue;
}

body {
  border: solid green;
  border-width: 1px 2px 3px 4px;
}

body {
  border: solid green;
  border-top-width: 5px;
  border-right-width: 10px;
  border-bottom-width: 15px;
  border-left-width: 20px;
}

body {
  border: 10px green;
  border-style: solid;
}

body {
  border: 10px green;
  border-top-style: double;
  border-right-style: dotted;
  border-bottom-style: dashed;
  border-left-style: none;
}

body {
  border: 10px solid;
  border-color: red black blue green;
}

body {
  border: 10px solid;
  border-top-color: red;
  border-right-color: black;
  border-bottom-color: blue;
  border-left-color: transparent;
}

.radius {
  -webkit-border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  -o-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
  position: relative;
  behavior: url('sites/all/themes/legadino/design/pie.htc');
}

p {margin: 1em 0 .5em;}

p {
  margin-top: 1em;
  margin-right: 0;
  margin-bottom: .5em;
  margin-left: 0;
}

th, td {padding: 0.1em .3em 0;}

th, td {
  padding-top: .1em;
  padding-right: .3em;
  padding-bottom: 0;
  padding-left: .3em;
}

#header {height: 100px;}

div {max-height: 100px;}

div {min-height: 100px;}

#header, #content, #footer {width: 760px;}

div {max-width: 100px;}

div {min-width: 100px;}

.box-shadow {
  -moz-box-shadow: 0 20px 20px -20px rgba(0, 0, 0, .7) inset,
                   0 -20px 20px 20px rgba(0, 0, 0, .7); /* FF(3.5-3.6) */
  -webkit-box-shadow: 0 20px 20px -20px rgba(0, 0, 0, .7) inset,
                      0 -20px 20px 20px rgba(0, 0, 0, .7); /* Chrome(4-9), Safari(3.1-4), iOS(3.2-4.3), Android(2.1-3) */
  box-shadow: 0 20px 20px -20px rgba(0, 0, 0, .7) inset,
              0 -20px 20px 20px rgba(0, 0, 0, .7); /* Opera10.5+, IE9+ */
}

h1 {display: inline;} /* zobrazi se jako radkovy element */
#menu a {display: block;} /* zobrazi se jako blokovy element */
.hidden {display: none;} /* nezobrazi se */

.skryt {visibility: hidden;}
.zobrazit {visibility: visible;}

pre {
  width: 556px;
  font-size: 13px;
  overflow: auto;
}

p {
  width: 100px;
  height: 100px;
  overflow-y: auto;
  overflow-x: scroll;
}

img {
  position: absolute;
  bottom: 0;
  left: 50%; /* levy roh se umisti na stred nadrazeneho elementu */
}

#links {
  position: absolute;
  top: 0;
}

#menu {
  position: absolute;
  right: 0;
}

#footer {
  position: absolute;
  bottom: 0;
}

#menu {
  position: absolute;
  left: 10px;
}

h1 img {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
#links {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

img {
  position: absolute;
  clip: rect(10px auto auto auto); /* souradnice z leveho horniho
   rohu */
}

img {  
  width: 100px; /* definovana sirka je nutnou podminkou */
  float: right;
}

.clear {clear: both;}
.clear-left {clear: left;}
.clear-right {clear: right;}

<blockquote>
  <p>Text text text text...</p>
  <div>Autor: <cite>Jan Werich</cite></div>
</blockquote>

blockquote {
  position: relative;
  text-align: justify;
}
blockquote p:before,
blockquote p:after {
  position: relative;
  display: block;
  height: 40px;
  width: 40px;
  content: '„';
  font-size: 60px;
  color: #eee;
}
blockquote p:before {
  float: left;
  margin: -46px 0 0 -45px;
}
blockquote p:after {
  float: right;
  margin: -18px -50px 0 0;
  content: '“';
}

ul.columns3 {
  -moz-column-count:3; /* Firefox */
  -webkit-column-count:3; /* Safari and Chrome */
  column-count:3;

  -moz-column-gap:40px; /* Firefox */
  -webkit-column-gap:40px; /* Safari and Chrome */
  column-gap:40px;

  -moz-column-rule:4px outset #f00; /* Firefox */
  -webkit-column-rule:4px outset #f00; /* Safari and Chrome */
  column-rule:4px outset #f00;
}

th {vertical-align: bottom;}
td {vertical-align: top;}

table {
  border: 1px dotted blue;
  border-collapse: collapse;
}
table.dvojramecek {
  border: 1px solid green;
  border-collapse: separate; /* oddelene bunky a ramecek tabulky */
}

table {
  border: 1px dotted blue;
  border-spacing: 10px;
}

table {
  caption-side: bottom;
}

table {
  border: 1px dotted blue;
  empty-cells: hide;
}
table.zobrazit {
  border: 1px solid green;
  empty-cells: show;
}

ul li {list-style: square outside none;}
ol li {list-style: upper-latin outside url(images/menu.gif);}

ul, ol {list-style-type: none;} /* bez oznaceni */
ul.kolecko {list-style-type: disc;}
ul.kruh {list-style-type: circle;}
ul.ctverec {list-style-type: square;}
ol.cislo {list-style-type: decimal;}
ol.velke-pismeno {list-style-type: upper-latin;}
ol.male-pismeno {list-style-type: lower-latin;}
ol.velke-rimske {list-style-type: upper-roman;}
ol.male-rimske {list-style-type: lower-roman;}
ol.velke-pismeno {list-style-type: upper-alpha;}
ol.male-pismeno {list-style-type: lower-alpha;}
ol.recke-pismeno {list-style-type: lower-greek;} /* nefunguje v IE */
ol.s-pocatecni-nulou {list-style-type: decimal-leading-zero;}
 /* nefunguje v IE */
ol.armenske-cislo {list-style-type: armenian;} /* nefunguje
 v IE a Opeře */
ol.hebrejske-cislo {list-style-type: georgian;} /* nefunguje
 asi nikde */

ul {list-style-position: outside;}
ol {list-style-position: inside;}

ul {list-style-image: url(images/menu.gif);}

transition:
  (hlidane_vlastnosti)
  trvani_animace
  (funkce_prubehu)
  (zpozdeni)
  (, dalsi_prechody);

.thumbs {
  opacity: 0;
  transform: rotateY(180deg) scale(0.5, 0.5);
  transition: all 450ms ease-out 0s;
}
.thumbs:hover {
  opacity: 1;
  transform: rotateY(0deg) scale(1, 1);
}

/* css3 hover opacity */
img {
  -webkit-opacity: 0.5;
  -moz-opacity: 0.5;
  -ms-opacity: 0.5;
  -o-opacity: 0.5;
  opacity: 0.5;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
img:hover {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  opacity: 1;
}

/* css3 transition fade-in effect on page load */
/* Chrome and Safari, Firefox, IE, Opera, CSS3 browser */
@-webkit-keyframes fadein {from {opacity: 0;} to {opacity: 1;}}
@-moz-keyframes fadein {from {opacity: 0;} to {opacity: 1;}}
@-ms-keyframes fadein {from {opacity: 0;} to {opacity: 1;}}
@-o-keyframes fadein {from {opacity: 0;} to {opacity: 1;}}
@keyframes fadein {from {opacity: 0;} to {opacity: 1;}}
#section-content {
  /* use animattion ease-in and repeat it only 1 time */
  -webkit-animation: fadein 2s;
  -moz-animation: fadein 2s;
  -ms-animation: fadein 2s;
  -o-animation: fadein 2s;
  animation: fadein 2s;
}

/* css3 transition fade-in effect on page load */
/* Chrome and Safari, Firefox, IE, Opera, CSS3 browser */
@-webkit-keyframes fadein {from {opacity: 0;} to {opacity: 1;}}
@-moz-keyframes fadein {from {opacity: 0;} to {opacity: 1;}}
@-ms-keyframes fadein {from {opacity: 0;} to {opacity: 1;}}
@-o-keyframes fadein {from {opacity: 0;} to {opacity: 1;}}
@keyframes fadein {from {opacity: 0;} to {opacity: 1;}}
p {
  /* make invisible upon start */
  opacity: 0;
  /* use animattion ease-in and repeat it only 1 time */
  -webkit-animation: fadein ease-in 1;
  -moz-animation: fadein ease-in 1;
  -ms-animation: fadein ease-in 1;
  -o-animation: fadein ease-in 1;
  animation: fadein ease-in 1;
  /* tafter animation is done we remain at the last keyframe value (opacity: 1) */
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  /* duration */
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  /* delay */
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
  -ms-animation-delay: 0;
  -o-animation-delay: 0;
  animation-delay: 0;
}
p.one {
  -webkit-animation-delay: 0.7s;
  -moz-animation-delay: 0.7s;
  -ms-animation-delay: 0.7s;
  -o-animation-delay: 0.7s;
  animation-delay: 0.7s;
}
p.two {
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay:1.2s;
  -ms-animation-delay:1.2s;
  -o-animation-delay:1.2s;
  animation-delay: 1.2s;
}
p.three {
  -webkit-animation-delay: 1.6s;
  -moz-animation-delay: 1.6s;
  -ms-animation-delay: 1.6s;
  -o-animation-delay: 1.6s;
  animation-delay: 1.6s;
}

Cvičení 5

Pomocí přiložených dat upravte vzhled fotogalerie ze cvičení 4.

1. Nastavte pozadí fotogalerie.
2. Vytvořte rámeček kolem hlavní fotografie.
3. Upravte orámování a umístění náhledů.
4. Nastavte tiskový výstup tak, aby se netiskly náhledy fotografií.

Cvičení 6

Pomocí přiložených dat upravte vzhled webového dokumentu ze cvičení 2.

Poznámky

Odkazy:

• u Internet Exploreru je vhodné používat podmíněné komentáře
• http://www.csszengarden.com
• http://css.maxdesign.com.au
• https://developer.mozilla.org/en/CSS_Reference – mimo jiné přehled podpory CSS v prohlížečích

Při ukládání webové stránky se neuloží (prohlížeč uloží pouze data přístupná přímo ze zdroje webové stránky):

• obrázky vložené pomocí css stylů
• css styly připojené pomocí @import

CSS Framework:

• BluePrint CSS Framework
• BlueTrip CSS Framework

overflow: Přetečený obsah zvětší v Exploreru výšku prvku

Metodika

Každý CSS kodér by si měl vytovřit svůj vlastní "FrontEnd Style Guide", obsahující koncepci "jak stylovat".

Vhodná metodika zajistí jednotný vzhled a správnou funkčnost (dynamické chování).

Doporučení:

• stylujte "bloky" (celky, objekty, komponenty) ne elementy – rozdělte projekt na znovupoužitelné části volně vázaných nezáviských prvků
  • bloky jsou nezávislé na umístění a počtu a obsahují elementy (elementy jsou závislé na kontextu tj. mají smysl v rámci bloku do kterého patří) např.
    • článek (produkt)
      • nadpis + obrázek + text + kategorie + přílohy
    • vyhledávání
      • vstupní pole + odesílací tlačítko
    • přihlašovací blok
      • uživatelské jméno + heslo + odesílací tlačítko
    • navigace
      • nadpis + strukturované pložky navigace
    • atd.
• využívejte nezávislost na umístění a počtu – nevytvářet styly závislé na umístění
  • nepoužívejte ID
    • pro každou komponentu vytvářejte raději jedinečné třídy
    • některé CMS systémy generují chybně více ID na jedné stránce
  • používejte konkrétnější třídy (class) – např. .menu__item(oddělovačem bloku a elementu jsou dvě podtržítka)
  • v selektorech nepoužívejte HTML elementy (
    • vše by mělo být nezávislé na systému např. element <input> se může změnit na <a> nebo <span> atd.)
  • používejte modifikátory – umožňují vytvářet komponenty s podobným vzhledem nebo chováním
    • modifikátor vyjadřuje vlastnost (vzhled, chování) pomocí názvu a hodnoty např. .menu__item--size-xl
    • u jednoho prvku může být používáno i více modifikátorů současně
• netvořte "dlouhé selektory" tj. snažte se o co nejméně zanoření (kaskád)
  • ideálně ​max. dvě třídy v selektoru (kaskádě)
• vyhýbejte se kaskádě bloků
• využívejte komprimace CSS do jednoho souboru
  • snížení počtu požadavku na server (zvýšení rychlosti)
  • (IE umožňuje načíst max. 31 CSS souborů)

Další zdroje informací:

• ​BEM (Block Element Modifier) – snaží se o co nejméně zanoření (kaskád) => konktrétnější popis tříd
  • např.: .menu__item--size-xl
• OOCSS – objektově orientované CSS (komponenty)
  • sémantické pojmenování
    • např. .alert--positiv, .alert--error (ne: .alert--green, .alert--mk35)
    • je možné např. využítvat velikostí oblečení (S, M, L, XL, XXL)
  • např.  Twitter Bootstrap Components Library – skvělý příklad modulárního CSS
• SMACSS (Scalable and Modular Architecture for CSS) – univerzální použití pro malé, tak i pro velké projekty
  • ​prefix X
• SASS
  • CSS3
  • proměnné

• bruskodu.cz/epizoda/5/ (obsahuje všechny zmiňované odkazy)
• vzhurudolu.cz/prirucka/oocss
• creativebloq.com/css3/create-modular-and-scalable-css-9134351

Procesory CSS

Preprocesory

Preprocesor CSS je nástroj, který ze zdrojového kódu zapsaného pomocí vlastní syntaxe vygeneruje výsledný klasický kaskádový styl (CSS). Oproti klasickému CSS nabízí funkce, proměnné a předdefinované sady tzv. mixiny.

Nevýhodou je nutnost kompilace do výsledného CSS.

CSS preprocesor:

• umožňuje používat "klasické" CSS
• do výsledného "zkompilovaného" CSS nepřidává žádné nové funkce
• zjednodušuje a zpřehledňuje zápis kaskádových stylů
• je možné používat proměnné, které umožňují měnit údaje na více místech najednou
  • ​vnořené lokální proměnné mají přednost před globálními
• usnadňuje správu více CSS souborů
• podporuje vnořené definice
• matematické operace usnadňují výpočty rozměrů a barev
• umožňuje definovat opakovaně využitelné tzv. mixins funkce
• nabízí podmíněné funkce
• definované sady funkcí je možné pojmenovat a využít tak tzv. jmenné prostory
• umožňuje využívat jak zobrazované, tak i skryté komentáře
• umožňuje "skrýt" vývojové postupy před zákazníkem

Nejznámější preprocesory CSS:

• LESS (Leaner CSS – štíhlejší CSS)
• SASS
  • youtube.com/watch?v=Q4UCtuvMDTI (česky)
  • peteschuster.com/2012/05/replacing-respond-js-with-sass/
• Stylus

Postprocesory

Modulární nástroje provádějící následnou transformaci CSS.

• Prefix free - vyžaduje v prohlížeči povolený JavaScript (6 kB)
  • Desktop: IE9+, Opera 10+, Firefox 3.5+, Safari 4+ a Chrome
  • Mobile: Mobile Safari, Android browser, Chrome a Opera Mobile
• PostCSS – vyžaduje v prohlížeči povolený JavaScript
  • Autoprefixer (1 MB) – analýza CSS a následné doplnění pouze těch prefixových pravidel, která jsou nutná pro správnou funkčnost konkrétního prohlížeče. CSS je tedy možné psát dle aktuálních W3C standardů.
  • RTLCSS a další rozšíření

Tipy

Odkazy:

• Podpora HTML5, CSS3, SVG a dalších v prohlížečích a mobilních zařízeních 
• CSS 3 maker (radius, gradient, transform, animation, transition, rgba, shadow, rotation, @font face)
• Animace obrázku pomocí CSS3.
• Button Switches with Checkboxes and CSS3 Fanciness
• useragentman.com/IETransformsTranslator/ – nevyžaduje pro některé CSS3 vlastnosti JavaSript 

Hacks:

• /* IE6 */
  #element { _color: blue }
  
  /* IE6, IE7 */
  #element { *color: blue; or #color: blue}
  
  /* Everything but IE6 */
  #element { color/**/: blue }
  
  /* IE6, IE7, IE8 */
  #element { color: blue\9; }
  
  /* IE7, IE8 */
  #element { color/*\**/: blue\9; }
  
  /* IE6, IE7 -- acts as an !important */
  #element { color: blue !ie; } /* string after ! can be anything */
  
  /* IE8, IE9 */
  #element {color: blue/;} /* must go at the END of all rules */

Upoutávka v rohu stránky:

<div id="corner">CSS3</div>

#corner {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 99;
  padding: 10px 40px;
  background: #ffb321;
  color: #7f3300;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  writing-mode: lr-tb;
}

Datum a čas

Příklad vložení aktuálního roku:

<script>
  document.write(new Date().getFullYear());
</script>

Typografie na webu

Vložení pevných mezer za definované předložky a spojky:

<script>
  var document;
  function nbsp() {
    var x = document.querySelector("body");
    x.innerHTML = x.innerHTML.replace(/ ([ai]|[kosuvz]|do|ke|na|od|po|se|ve|za|ze) /g, " $1&nbsp;");
  }
  nbsp();
</script>

CSS behavior

CSS vlastnost behavior (chování) podporovaná pouze prohlížečem Internet Explorer umožňuje implementovat JavaScriptu do webových stránek pomocí kaskádových stylů.

Oproti klasickému zápisu JavaScriptu se do každého (X)HTML prvku nemusí psát ovladač (onclick, onmouseover, onmouseout atd.) jehož hodnotou je skript. Stačí pouze (X)HTML prvku přiřadit styl s vlastností behavior, která obsahuje přímo skript nebo adresu na externí soubor s příponou *.htc (HTml Component). HTC komponenta se nejvíce vyplatí u složitých nebo často se opakujících skriptů.

Příklady použití:

• CSS3 PIE (Progressive Internet Explorer) umožňuje používat některé CSS3 vlastnosti v prohlížeči IE8-
  • border-radius
  • box-shadow
  • border-image
  • CSS3 Backgrounds (-pie-background)
  • Gradients
  • RGBA Color Values
  • PIE Custom Properties
    • -pie-watch-ancestors
    • PNG alpha transparency and -pie-png-fix
    • Lazy Initialization (-pie-lazy-init)
    • Layout polling (-pie-poll)

Průhlednost PNG formátu v IE6

Do hlavičky webové stránky vložte:

<!--[if (gt IE 5)&(lte IE 6)]>
  <link type="text/css" rel="stylesheet" media="screen, projection" href="ie-6.css" />
<![endif]-->

Obsah souboru ie-6.css:

/* obrazky musi mit nastavene rozmery */
img {
  behavior: expression((this.runtimeStyle.behavior="none") && (this.src.toLowerCase().indexOf('.png')>-1) && (this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='scale')", this.runtimeStyle.paddingTop = this.height, this.runtimeStyle.height = 0));
  overflow:hidden;
}
/* pozadi se nebude dlazdicove opakovat a bude zarovnano vlevo nahoru */
.png {
  behavior: expression((this.runtimeStyle.behavior = "none") && (this.currentStyle.backgroundImage.toString().toLowerCase().indexOf('.png')>-1) && (this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.currentStyle.backgroundImage.toString().replace('url("','').replace('")','') + "', sizingMethod='crop')", this.runtimeStyle.zoom = 1, this.runtimeStyle.backgroundImage = "none"));
}

Odkazy:

• PNG transparency in IE 6 with no extra HTTP reques
• IE PNG Fix.

Sjednocení vzhledu formulářových prvků

Bližší informace viz Formalize CSS.

jQuery

jQuery je JavaScriptová knihovna, která zjednodušuje použití JavaScriptu v HTML dokumentu.

jQuery umožňuje vytvářet interaktivní webové aplikace. Funkčnost jQuery je možné dále rozšiřovat pomocí tzv. "zásuvných modulů", které nabízejí již hotová řešení nejčastějích požadavků.

Typickým příkladem použítí mohou být např. reakce na události, okamžitá validace formuláře již při jeho vyplňování, nejrůznější animace, bez nutnosti používat technologii Flash, jednoduchá spolupráce s AJAX technologií atd.

Co budeme potřebovat:

• jQuery zkoušečka – jquery.jslab.net/zkousecka/#ab6
• editor zdrojového kódu: PhpStorm, PSPad, Notapad++ atd.
• webový server: XAMPP, MAMP atd.
• nástroje pro ladění kódu: Firebug+FireQuery (Firefox), Developer Toolbar (Google, Firefox, IE) atd.
  • konzole
  • kontrolní body (krokování)
  • sledování hodnot proměnných

jQuery knihovnu je možné k dokumentu připojit v hlavičce dokumentu interně (jQuery knihovna je součástí webové stránky) nebo externě např. pomocí odkazů na jQuery CDN, Google CDN nebo Miscrosoft CDN.

Zajištění dostupnosti jQuery knihovny (1. z CDN zdroje, 2. z lokálního umístění):

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
  if (!window.jQuery) {
    var jq = document.createElement('script'); jq.type = 'text/javascript';
    jq.src = '/path-to-your/jquery.min.js';
    document.getElementsByTagName('head')[0].appendChild(jq);
  }
</script>

Funkce "Dokument je připraven ke zpracování jQuery" + změna obsahu H1 (příkaz se provede ihned po načtení stromové struktury stránky DOM (Document Object Model) tj. ještě před načtením externího obsahu např. obrázků):

$(document).ready(function() {
  $("h1").text("Nový text tagu H1.");
});

• výraz $() je zkrácený zápis funkce jQuery()
• element h1 je prvek, na který se jQuery apikuje (selector)
• metoda .text vloží požadovaný osah
• "funkci $() předáme element h1 na který aplikujeme metodu .text"

Vkládání textu před a za:

...
<body>
  <h1>jQuery</h1>
</body>
...

$(document).ready(function() {
  $("h1").prepend("Knihovna ");
  $("h1").append(" je skvělá.");
});

Příklad automatického skrytí prvku:

$(document).ready(function(){
  $(".my-css-class").hide(1000);
});

.my-css-class – CSS selektor

.hide – jQuery metoda

Příklad výpisu proměnné do konzole webového prohlížeče (Developer Toolbar):

$(document).ready(function(){
  var text = "Text vypsaný v konzole.";
  console.log(text);
});

Detekce existence elementu:

if ($("#myID").length) {
  $("#myID").show();
}

Výhody použití Behaviors v Drupalu

$('.my-selector').click(function(e) {

    e.preventDefault();
});

$('.my-selector').click(function() {

    return false;
});

$(document).ready(function(){
  var skyscraperAd = $("#skyscraper");
  var skyscraperOffset = skyscraperAd.offset().top;
  var skyscraperBottom = $("#footer").offset().top – skyscraperAd.height();
  $(window).scroll(function() {
    skyscraperAd.stop();
    var windowTop = $(window).scrollTop();
    if (windowTop > skyscraperOffset) {
      if (windowTop > skyscraperBottom) windowTop = skyscraperBottom;
      if (windowTop < 0) windowTop = 0;
      skyscraperAd.animate({top: windowTop + 'px'}, 'fast');
    } else
      skyscraperAd.animate({top: skyscraperOffset + 'px'}, 'fast');
  });
});

#skyscraper {
  position: absolute;
  top: 300px;
  left: 50%;
  margin-left: 500px;
  width: 120px;
  height: 600px;
}

/**
 * Sticky element in the wrapper on scroll
 */
var jQuery = jQuery.noConflict();
jQuery("document").ready(function($){ 
  $(window).scroll(function () {
    var sticky = $(".sticky");
    var wrapper = $(".wrapper");
    var top = $(window).scrollTop();
    var wrapperTop = wrapper.offset().top;
    var wrapperBottom = wrapperTop + wrapper.height();
    var normalPosition = wrapperBottom - sticky.height();
    if (wrapperTop < top && normalPosition > top) {
     sticky.addClass("sticky-top");
      sticky.removeClass("sticky-bottom");
    } else {
      sticky.removeClass("sticky-top");
      if (wrapperBottom > top && normalPosition < top) {
        sticky.addClass("sticky-bottom");    
     } else {
        sticky.removeClass("sticky-bottom");
     }
    }
  });
});

/**
 * Sticky element in the wrapper on scroll
 */
body {
  min-height: 2000px; /* optional */
}
.wrapper {
  position: relative;
  height: 300px; /* optional */
  background: #eee; /* optional */
}
.sticky {
  width: 300px; /* optional */
  background: #ccc; /* optional */
}
.sticky-top {
  position:fixed;
  top: 0;
}
.sticky-bottom {
  position: absolute;
  bottom: 0;
}

<!-- show-hide -->
<script type="text/javascript">
  $(document).ready(function() {
    $('.show-hide').hide();
    $('a.toggle_link').click(function() {
      $(this).next('div.show-hide').toggle();
      return false;
    });
  });
</script>

<a href="#" class="toggle_link">Více</a>

<div class="show-hide">...</div>

$(document).ready(function(){
  $('#block-1 .text').remove();
  $('#block-1 .title').text('Nadpis');
  $('#block-1 .link').append('<a href="#">Odkaz</a>');
});

$(document).ready(function(){
  $('#block-1 .content a').each(function(){
    $(this).attr('href', 'http://www.myweb.cz' + $(this).attr('href'));
  });
});

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
  <head>
    <meta charset="utf-8" />
    <title>Fixed menu on scroll</title>
    <meta name="description" content="How to make fixed menu on scroll with jQuery and CSS" />
    <meta name="keywords" content="fixed,menu,scroll" />
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
   
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/fixed-menu-on-scroll.js"></script>
   
    <link rel="stylesheet" type="text/css" href="css/style.css" />
  </head>
  <body>
   <div class="header">Brand</div>
   <div class="main-menu">
     <ul class="clearfix">
      <li><a href="#">Home</a></li>
      <li><a href="#">jQuery</a></li>
      <li><a href="#">CSS</a></li>
     </ul>
    </div>
    <h1>Fixed menu on scroll</h1>
    <p>Make fixed menu on scroll with jQuery and CSS.</p>
  </body>
</html>

/**
* Fixed menu on scroll
*/
var jQuery = jQuery.noConflict();
jQuery("document").ready(function($){

var nav = $('.main-menu');

$(window).scroll(function () {
   if ($(this).scrollTop() > 110) {
     nav.addClass("fixed");
    } else {
     nav.removeClass("fixed");
    }
  });
});

/**
* Fixed menu top on scroll
*/
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
}

Dean Edwards IE

Dean Edwards IE je JavaScriptová knihovna umožňující naučit Internet Explorer W3C standardům:

• opravuje mnoho HTML a CSS problémů
• umožňuje používat transparentní PNG obrázky

Nevýhody:

• funkční pouze ve webovém prohlížeči se zapnutou podorou JavaScriptu
• vyžaduje strojový čas pro vykonání skriptu (nevhodné u velmi pomalých počítačů)
• velikost v základní konfiguraci cca 30kB (zůstává v cache)
• nic není dokonalé – vždy se mohou vyskytnout neočekávané situace

HTML5 script

HTML5 enabling script umožňuje prohlížeči Internet Explorer rozpoznat HTML5 prvky.

Modernizr

Viz modul Modernizr.

Otevření odkazu do nového okna (záložky)

<p>Webová standardizační organizace <a href="http://www.w3.org"
 type="text/html" charset="utf-8" hreflang="en" xml:lang="en"
 lang="en" title="The World Wide Web Consortium"
 onclick="return !window.open(this.href);" 
 onkeypress="return !window.open(this.href);">W3C</a></p>

Automatické otevření nového okna po načtení obrázku

Pozice left, top platí pro  IE4+, pozice screenX, screenY platí pro Netscape 4+

<img src="obrazek.jpg" onload="window.open('http://www.google.cz/',
 'reklama', 'width=600, height=400, left=100, top=100,
 screenX=100, screenY=100, location=no, directories=no,
 status=no, menubar=no, toolbar=no, copyhistory=no,
 scrollbars=yes, resizable=yes');" alt="Popis obrázku"/>

Průhlednost PNG formátu v IE6-

IE6- neumí zobrazit průhlednost u PNG obrázků. Můžete jej to ovšem naučit :)

Pokud webový prohlížeč neumí zobrazit PNG průhlednost, zobrazí místo ní barvu nastavenou jako barvu pozadí při ukládání obrázku.

Pouze obrázky

1. Z níže uvedeného kódu vytvořte soubor s názvem fix-png.js, který umístěte do svého webu např. do adresáře scripts/
   

   /*
     Correctly handle PNG transparency in Win IE 5.5 & 6. http://homepage.ntlworld.com/bobosola 
   */
   var arVersion = navigator.appVersion.split("MSIE")
   var version = parseFloat(arVersion[1])
   if ((version >= 5.5) && (document.body.filters)) {
     for(var i=0; i<document.images.length; i++) {
       var img = document.images[i]
       var imgName = img.src.toUpperCase()
       if (imgName.substring(imgName.length-3, imgName.length) 
        == "PNG") {
         var imgID = (img.id) ? "id='" + img.id + "' " : ""
         var imgClass = (img.className) ? "class='" + img.className 
          + "' " : ""
         var imgTitle = (img.title) ? "title='" + img.title 
          + "' " : "title='" + img.alt + "' "
         var imgStyle = "display:inline-block;" + img.style.cssText
         if (img.align == "left") imgStyle = "float:left;" + imgStyle
         if (img.align == "right") imgStyle = "float:right;" + imgStyle
         if (img.parentElement.href) imgStyle = "cursor:hand;" 
          + imgStyle
         var strNewHTML = "<span " + imgID + imgClass + imgTitle
          + " style=\"" + "width:" + img.width + "px; height:" 
          + img.height + "px;" + imgStyle + ";"
          + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
          + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
         img.outerHTML = strNewHTML
         i = i-1
       }
     }
   }

2. Do hlavičky stránky vložte níže uvedený kód s odkazem na soubor fix-png.js
   

   <meta http-equiv="content-script-type" content="text/javascript" />
   <!--[if (lte IE 7)&(gte IE 5)]>
     <script defer type="text/javascript" src="scripts/fix-png.js">
     </script>
   <![endif]-->

IE5- nepodporuje žádný JavaSript.

Obrázky a obrázkové mapy

1. Z níže uvedeného kódu vytvořte soubor s názvem fix-png-map.js, který umístěte do svého webu např. do adresáře scripts/
   

   /*
     Correctly handle PNG transparency in Win IE 5.5 & 6.
     http://homepage.ntlworld.com/bobosola/imagemap.htm
   */
   var strGif = "scripts/transparentpixel.gif"
   var strFilter = "progid:DXImageTransform.Microsoft.AlphaImageLoader"
   var arVersion = navigator.appVersion.split("MSIE")
   var version = parseFloat(arVersion[1])
   if ((version >= 5.5) && (document.body.filters)) {
     for(var i=0; i<document.images.length; i++) {
       var img = document.images[i]
       var imgName = img.src.toUpperCase()
       if (imgName.substring(imgName.length-3, imgName.length)
        == "PNG") {
         var imgID = (img.id) ? "id='" + img.id + "' " : ""
         var imgClass = (img.className) ? "class='" + img.className 
          + "' " : ""
         var imgTitle = (img.title) ? "title='" + img.title
          + "' " : "title='" + img.alt + "' "
         var imgStyle = "display:inline-block;" + img.style.cssText 
         if (img.align == "left") imgStyle = "float:left;" + imgStyle
         if (img.align == "right") imgStyle = "float:right;" + imgStyle
         if (img.parentElement.href) imgStyle = "cursor:hand;"
          + imgStyle
         if (img.useMap) {  
   	var strAddMap = "<img style=\"position:relative; left:-"
            + 0 + "px; top:" + 0 +"px;" + "height:" + img.height
            + "px;width:" + img.width +"\" " + "src=\"" + strGif
            + "\" usemap=\"" + img.useMap + "\" border=\"" + img.border
            + "\"></span>"
   	var strNewHTML = "<span " + imgID + imgClass + imgTitle
            + " style=\"" + "width:" + img.width + "px; height:"
            + img.height + "px;" + imgStyle + ";" + "filter:"
            + strFilter + "(src=\'" + img.src + "\',
            sizingMethod='scale');\">" 
   	strNewHTML += strAddMap
         }
         else {
   	var strNewHTML = "<span " + imgID + imgClass + imgTitle
           + " style=\"" + "width:" + img.width + "px; height:"
           + img.height + "px;" + imgStyle + ";" + "filter:"
           + strFilter + "(src=\'" + img.src + "\',
           sizingMethod='scale');\"></span>"
         } 
         img.outerHTML = strNewHTML
         i = i-1
       }
     }
     for(i=0; i < document.forms.length; i++)
      findImgInputs(document.forms(i))
   }
   function findImgInputs(oParent) {
     var oChildren = oParent.children
     if (oChildren) {
       for (var i=0; i < oChildren.length; i++) {
         var oChild = oChildren(i)
         if ((oChild.type == 'image') && (oChild.src)) {
   	var origSrc = oChild.src
           oChild.src = strGif
           oChild.style.filter = strFilter + "(src='" + origSrc + "')"
         }
         findImgInputs(oChild)
       }
     }
   }
   

2. Vyptvořte si průhledný obrázek o velikosti 1x1 px ve formátu GIF s názvem např. transparentpixel.gif, který umístěte do svého webu např. do adresáře scripts/. V případě jiného umístění obrázku upravte ve skriptu proměnnou strGif.
3. Do hlavičky stránky vložte níže uvedený kód s odkazem na soubor fix-png.js
   

   <meta http-equiv="content-script-type" content="text/javascript" />
   <!--[if (lte IE 7)&(gte IE 5)]>
     <script defer type="text/javascript" src="scripts/fix-png-map.js">
     </script>
   <![endif]-->

IE5- nepodporuje žádný JavaSript.

Oprava vzhledu elementu <object> v IE7-

IE7- nastavuje u elementu <object> vlastní okraje, rámeček a vertikální posuvník. Tomuto chování je možné zabránit:

1. z níže uvedeného kódu vytvořte soubor s názvem fix-object.js, který umístěte do svého webu např. do adresáře scripts/
   

   function fixObjectImages () {
     var objs = document.getElementsByTagName ('object');
     for (n = 0; n < objs.length; n++) {
       var obj = objs [n];
       if ((obj != null && obj.type != null) && ((obj.type ==
        "image/png") || (obj.type == "image/jpeg") || (obj.type ==
        "image/gif"))) {
         fixObject (obj);
       }
     }
   }
   function fixObject (obj) {
     obj.body.style.margin = '0';
     obj.body.style.border = 'none';
     obj.body.style.overflow = 'hidden';
   }
   // Do this only for IE!
   window.onload = fixObjectImages; 

2. do hlavičky stránky vložte níže uvedený kód s odkazem na soubor fix-object.js
   

   <meta http-equiv="content-script-type" content="text/javascript" />
   <!--[if (lte IE 7)&(gte IE 5)]>
     <script type="text/javascript" src="scripts/pngfix.js">
     </script>
   <![endif]-->

IE5- nepodporuje žádný JavaSript

Cvičení 7

Pomocí přiložených dat přidejte do obrázkové mapy ve fotogalerie ze cvičení 5 šipky pro přechod na předchozí a následující fotografii.

Kulaté rožky

Kulaté rožky je možné vytvářet pomocí CSS vlastnosti border-radius.

Curvy Corners

Curvy Corners používají k vytovření kulatých rožků JavaScript.

Níže uvedený příklad použije JavaScript na vytváření kulatých rožků vždy (zvyšuje zátěž počítače):

  ...
  <style type="text/css">
    /* <![CDATA[ */
      .rounded {
        background-color: #ff0;
        border: 3px solid #f00;
      }
    /* ]]> */
  </style>
  <meta http-equiv="content-script-type" content="text/javascript" />
  <script type="text/javascript" src="scripts/curvycorners.js"></script>
  <script type="text/javaScript">
    /* <![CDATA[ */
      addEvent(window, 'load', initCorners);
      function initCorners() {
        var settings = {
          tl: {radius: 20},
          tr: {radius: 20},
          bl: {radius: 20},
          br: {radius: 20},
          antiAlias: true
        }
        curvyCorners(settings, ".rounded");
      }
    /* ]]> */
  </script>
</head>
<body>
  <h1>Curvy Corners</h1>
  <div class="rounded">
    Content
  </div>
  ...

Níže uvedený příklad použije JavaScript pouze v případě, kdy prohlížeč nepodporuje CSS3 vlastnot border-radius:

  ...
  <style type="text/css">
    /* <![CDATA[ */
      .rounded {
        background-color: #ff0;
        border: 3px solid #f00;
        /* Do rounding (native in Firefox and Safari) */
        border-radius: 20px;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
      }
    /* ]]> */
  </style>
  <meta http-equiv="content-script-type" content="text/javascript" />
  <script type="text/JavaScript" src="scripts/curvycorners.js"></script>
</head>
<body>
  <h1>Curvy Corners</h1>
  <div class="rounded">
    Content
  </div>
  ...

Nifty Corners

Nifty Corners nabízí další způsob vytvoření kulatých rožků.

Překrytí stránky

Colorbox – a jQuery lightbox (obrázky včetně "Retina", stránky, multimédia)

Lightbox2 – pouze obrázky

Shadowbox – obrázky, stránky, multimédia

Greybox – obrázky, stránky, multimédia

Média

mediaelementjs.com – HTML5 přehrávač 

Flash

Galerie:

• FlippingBook - "listovací" digitální dokumenty
• MegaZine PageFlip – "listovací" digitální dokumenty
• SimpleViewer
• PostcardViewer
• TiltViewer
• AutoViewer
• Image Rotator

Tip: pokud rozbalovací menu "zajíždí" pod flash animaci, vše řeší doporučení přímo od Macromedia tj. přidání parametru "transparent":

<object wmode="transparent" ...>
  <param name="wmode" value="transparent" />
...

SWFObject

Sjednocuje metody vkládání Flash obsahu (nabízí jak značkovací metodu, tak metodu využívající JavaScript).

Statická značkovací metoda

Při vypnutém JavaScriptu vyžaduje aktivaci objektu v prohlížečích Internet Explorer 6-7 a Opera 9+.

Dynamická metoda

Vyžaduje JavaScript.

Print

Funkce print stejně tak konstruktor echo slouží pro vypsání obsahu na obrazovku.

Print je o něco málo pomalejší než echo, ale zato vrací hodnotu True nebo False. Způsob použití se dále liší při výpisu proměnné.

<?php
  $text = print "Jak se mate?"; // s echo toto neni mozne
  if($text) {
    echo “Výpis úspěšný:)“;
  }
?>

 Funkce print_r umožňuje navíc i vypsat obsah pole:

<?php
  $pole = array ('a' => 'délka', 'b' => 'šířka', 'c' => array ('x', 'y', 'z'));
  print_r ($pole);
?>

Poslední aktualizace souboru

Zobrazení poslední aktualizace souboru číselně:

<?
  /* aktualni soubor */
  $file = $_SERVER['SCRIPT_FILENAME'];
  /* cas zmeny souboru */
  $update = filemtime($file);
  /* aktualizace ciselne */
  echo "<p>Poslední aktualizace: " .date('d. n. Y – H:i\'s"', $update). "</p>";
?>

Zobrazení poslední aktualizace souboru slovně (české slovní zobrazení měsíce a dne v týdnu):

<?php
  /* aktualni cas */
  echo "<p>Nyní je " .date('l d. m. Y H:i\'s"'). ".</p>";
  /* aktualni soubor */
  $file = $_SERVER['SCRIPT_FILENAME'];
  /* cas zmeny souboru */
  $update = filemtime($file);
  /* aktualizace ciselne */
  echo "<p>Poslední aktualizace: " .date('d. n. Y – H:i\'s"', $update). "<br />";
  /* aktualizace slovne */
  $months = array('leden', 'únor', 'březen', 'duben', 'květen', 'červen', 'červenec', 'srpen', 'září', 'říjen', 'listopad', 'prosinec');
  $days = array('pondělí', 'úterý', 'středa', 'čtvrtek', 'pátek', 'sobota', 'neděle');
  echo "Poslední aktualizace: " .$days[date('w', $update) - 1] ." ". date('j', $update). ". " .$months[date('n', $update) - 1] . date(' Y – H:i\'s"', $update). "</p>";
?>

Cvičení 8

Datum

Český formát datumu:

<?php
  // Czech date
  $en = array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
  $cz = array("ledna", "února", "března", "dubna", "května", "června", "července", "srpna", "září", "října", "listopadu", "prosince");
  $date = str_replace($en, $cz, date("j. F Y"));
  $datePlusOneDay = str_replace($en, $cz, date("j. F Y", strtotime('+1 day')));
  $dateMo = str_replace($en, $cz, date("j. F Y", strtotime('monday this week')));      
  $dateTu = str_replace($en, $cz, date("j. F Y", strtotime('tuesday this week')));
  $dateWe = str_replace($en, $cz, date("j. F Y", strtotime('wednesday this week')));
  $dateMoNext = str_replace($en, $cz, date("j. F Y", strtotime('monday next week')));
?>

Zobrazení intervalu mezi datumy ve dnech:

<?php
  $dateA = date_create('2014-11-12');
  $dateB = date_create('2014-10-13');
  $interval = date_diff($dateA, $dateB);
  echo $interval->format('%R%a days');
?>

Náhodná čísla

rand – generuje náhodná celá čísla v rozsahu 0-32767 (Windows):

<?php
  echo rand() . "\n";
  echo rand(3, 12); // cela cisla v rozsahu 3 az 12
?>

mt_rand – generuje náhodná celá čísla přibližně 4x rychleji než funkce rand

<?php
  echo mt_rand() . "\n";
  echo mt_rand(3, 12); // cela cisla v rozsahu 3 az 12
?>

Textové řetězce

Při zjišťování délky řetězce pozor na diakritiku např.:

• funkce strlen není "UTF-8 fiendly"

  print strlen('Tomáš Daněk'); // 14 :(

• existuje ovšem alternativní funkce mb_strlen u které stačí pouze nastavit správné kódování

  print mb_strlen('Tomáš Daněk', 'utf-8'); // 11

Trvalé přesměrování

Trvalé přesměrování URL adresy bez ztráty pozice ve vyhledávačích (úspěch není ovšem nikdy zaručen):

1. Pokud možno, tak URL neměňte!
2. Koupit doménu a přesunout web (web by neměl být funkční na obou doménách současně).
3. U nového webu opravit veškeré staré URL na nové – projít skripty a databázi (zkontrolovat linky např. pomocí Xenu).
4. V Google Webmaster Tools si zajistit ověřený přístup ke staré i nové doméně.
5. Pomocí .htaccess (301) přesměrovat VŠECHNY URL starého webu na jeho novou url adresu (ne jen homepage)!!! Níže uvedené pravidlo přesměruje všechny stránky původní domény na novou:

   • RewriteEngine on
     RewriteRule (.*) http://www.nova-domena.cz/$1 [R=301,QSA]

6. U nového webu vygenerovat nový sitemap.xml http://www.sitemaps.org/protocol.html Adresu sitemap.xml uvést v robots.txt viz http://www.sitemaps.org/protocol.html#submit_robots a odeslat ho do Google http://www.google.com/addurl/ a na Seznam http://search.seznam.cz/pridej-stranku (u Seznamu mě více možností nenapadá) a přidat ji také do Google Webmaster Tools do sekce Site Configuration » Sitemaps.
7. V Google Webmaster Tools nastavit Konfigurace -> Změna adresy (Site configuration » Change of address)
8. Původní doménu nerušit. Ideálně ji nechat fungovat s přesměrováním “navždy”.
9. Opravit nejdůležitější zpětné odkazy. Prý je ktomu možné využít i operátor “link:” viz https://support.google.com/webmasters/answer/55281?hl=en případně sekce Your site on the web » Links to your site v Google Webmaster Tools.
10. Kontrolovat chyby – serverové chyby na staré i nové doméně zachytávat do errorlogů a kontrolovat zejména chyby 404. Obdobně v Google Webmaster Tools sledovat sekci "Diagnostics » Crawl Errors”.
11. Nastavit a sledovat Google Analytics.

Nouzové řešení:

<?php
  header("HTTP/1.1 301 Moved Permanently");
  header("Location: http://tomas.dankovi.info/");
  header("Connection: close"); // fix IE bug
?> 

Chybová hlášení

V případě hledání chyb nebo problémů v PHP skriptu je vhodné zapnout zobrazování chybových hlášení.

Změnu nastavení je možné provést několika způsoby:

• pomocí souboru .htaccess
  • PHP 4
    

    <IfModule mod_php4.c>
      php_value error_reporting 2047
      php_flag display_errors 1
    </IfModule>
    

  • PHP 5
    

    <IfModule mod_php5.c>
      #php_value error_reporting 6143 # PHP 5.2 a méně
      php_value error_reporting 30719 # PHP 5.3 a více
      php_flag display_errors 1
    </IfModule>
    

• pomocí funkce error_reporting
  • PHP 5
    

    <?php
      ini_set("display_errors", 1);
      error_reporting(E_ALL);
      $x = 2 / 0;  //chyba deleni nulou
    ?>

• pomocí souboru .user.ini
• zápisem chyb do souboru

Ochrana e-mailu proti spamu

Níže uvedený skript nabízí základní ochranu e-mailu zveřejněném na webu proti spam robotům. Převádí text e-mailové adresy na HTML entity a zobrazuje jej pomocí JavaScriptu.

<?php
  // javascript antispam e-mail link
  function antispamlink($email, $title){
    $return = "<script type=\"text/javascript\"><!--\ndocument.write('<a href=\"' + 'mailto:' + '";
    $offset = 0;
    while ($offset >= 0) {
      $code1 .= '&#'.ordutf8($email, $offset).';';
    }
    $offset = 0;
    while ($offset >= 0) {
      $code2 .= '&#'.ordutf8($title, $offset).';';
    }
    $return .= $code1."' + '\">' + '".$code2."' + '<\/a>');\n--></script>";
    return $return;
  }
  // utf-8 characters to ASCII (ord function isn't UTF-8 fiendly)
  function ordutf8($string, &$offset) {
    $code = ord(substr($string, $offset,1));
    if ($code >= 128) {  //otherwise 0xxxxxxx
      if ($code < 224) $bytesnumber = 2;  //110xxxxx
      else if ($code < 240) $bytesnumber = 3;  //1110xxxx
      else if ($code < 248) $bytesnumber = 4;  //11110xxx
      $codetemp = $code – 192 – ($bytesnumber > 2 ? 32 : 0) – ($bytesnumber > 3 ? 16 : 0);
      for ($i = 2; $i <= $bytesnumber; $i++) {
        $offset ++;
        $code2 = ord(substr($string, $offset, 1)) – 128;  //10xxxxxx
        $codetemp = $codetemp*64 + $code2;
      }
      $code = $codetemp;
    }
    $offset += 1;
    if ($offset >= strlen($string)) $offset = -1;
    return $code;
  }
  // print e-mail with title
  echo antispamlink("info@dhosting.cz","Bc. Tomáš Daněk");
?>

Webové prohlížeče

Vzhled webových stránek ve zvolených prohlížečích (veřejné statistiky) si můžete nechat zkontrolovat automaticky pomocí on-line služeb. Bližší informace o nástrojích na testování a kontrolu webových stránek viz Mobilní zařízení.

Implementaci webových standardů v internetových prohlížečích je možné zkontrolovat pomocí Acid Tests a HTML5 test.

Mozilla FireFox ( )

• neumožňuje ukládat hesla mimo prohlížeč
• náročný na operační paměť
• podrobnější informace viz FireFox

Google Chrome ( )

• neumožňuje ukládat hesla mimo prohlížeč
• založeno na jádře QtWebKit
• rychlý prohlížeč (zejména JavaScript)
• nízké systémové nároky
• velká pracovní plocha
• inteligentní adresní řádek
• Ctrl+Shift+N nové okno v "anonymním módu"
• samostatné procesy pro jednotlivé záložky
  • vyšší bezpečnost (odcizení session ID)
  • možnost být v jednom prohlížeči přihlášený i nepřihlášený uživatel (testování webů)
• nástroje pro tvůrce webu
• nelze zakázat odesílání informací o způsobu používání prohlížeče
• i při ukončení prohlížeče neustále na pozadí běží proces "Google update"
• nejde vypnout JavaScript
• nepodporuje RSS
• nástroje pro vývojáře
  • mobilní zařízení
  • experimentální nástroje:
    1. do URL napište: chrome://flags/#enable-devtools-experiments
    2. zvolte Nastavení, Experimenty
    3. stiskněte 6x Shift (zpřístupnění "skrytých" experimentálních nástrojů)
    4. povolte: Filmstrip in Network and Timeline Panel
       • v sekci Network se zobrazí ikona "kamery"
       • v horní části sekce Network zaškrtněte: Disable cache
       • znovu načtěte stránku (CTRL + R)
• rozšíření
  • Lorem Ipsum – generátor náhodného textu
  • Type-ahead-find
  • Emmet Re:view
  • Auto-Translate
    • v nastavení odškrtněte volbu "Use price comparison and coupons..."
  • TransOver | Instant Translate | 1 Click Translator | Dynamic Language Tool | Google Dictionary | Překladač Google | Right Click and Translate
  • IP Whois & Flags Chrome & Websites Rating | RozšířeníIP Address and Domain Information
  • HTML5 Outliner
  • Full Page Screen Capture
  • LivePage | Tincr
  • Wappalyzer
  • Web Developer | Developer Tools
  • Window Resizer
  • User CSS
  • ColorZilla
  • The Great Suspender
  • Firebug Lite for Google Chrome
  • Drupal for Chrome
  • Drupal Template Helper
• Spuštěním aplikace s parametrem --purge-memory-buttonse v Task Manažeru zobrazí tlačítko na ruční vyprázdnění paměti 

Nastevení

• Chromium Možnosti
  • Základy
    • Při spuštění, Znovu otevřít stránky, které byly otevřené naposledy
  • Pod pokličkou
    • Nastavení obsahu, Soubory Cookie, Při zavření prohlížeče vymazat soubory cookie a jiná data webů
    • Stahování, Před stažením se vždy zeptat na místo uložení každého souboru

Opera ( )

• neumožňuje ukládat hesla mimo prohlížeč
  • hesla jsou uložena v nečitelné formě v souboru wand ale je možné je zobrazit např. pomocí aplikace OperaPassView 
• nejpropracovanější gesta myší
• uzavřenost
• výkon
• bezpečnost
• rozšíření nejsou od "neznámých" autorů a 3. stran
• integrovaný e-mailový klient
• kontrola pravopisu (čeština, slovenština)
• "Turbo" režim komprimující obsah stránek na pomalejších linkách
• Developer console (CSS, show rules) – nástroje pro vývojáře webu
• uložená stránka je opravdu kompletní včetně obrázků připojených pomocí CSS 

Arora ( )

• neumožňuje ukládat hesla vůbec 
• založeno na jádře QtWebKit
• inteligentní adresní řádek
• soukromý mód
• WebInspector – nástroje pro vývojáře webu

Internet Explorer

• je součástí operačního systému Windows
• neumožňuje ukládat hesla mimo prohlížeč 
• Rozšíření IE Developer Toolbar
• Různé verze IE současně v jednom operačním systému:
  • IETester (IE5.5 až IE9)
  • Internet Explorer Collection (IE1 až IE8)
  • Multiple versions of IE (IE3 až IE6)
    • vývoj projektu skončil v roce 2006
• IE8
  • soukromý mód (služba InPrivate)
  • inteligentní adresní řádek
  • barevné seskupování záložek
  • akcelerátory
    • slovník pro překlad označeného textu
    • zeměpisné údaje – zobrazení polohy na mapě
  • antiphisingový a antimalwarový filter
  • Developer Tools (F12)
• Google Chrome Frame (podpora jen do ledna 2014) – zpřístupňuje otevřené webové technologie např. HTML5
  • příklad zpřístupnění posledního dostupného Internet Explorer módu, případně Google Chrom Frame
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    • hodnota IE=edge není IE týmem doporučena a může v budoucnu způsobit neočekávané chování
    • hodnota chrome=1 "inicializuje" Google Chrome Frame (pokud je nainstalován) – podpora jen do ledna 2014 !!!

Konqueror ( )

• umožňuje ukládat hesla do šifrované peněženky
• podrobnější informace viz Konqueror

Apple Safari ( )

• umožňuje ukládat hesla do šifrované peněženky
• uložení a obnova záložek
  • příkaz History, Reopen All Windows from Last Session
• nástroje pro webové vývojáře
• Safari Features (en)
• rozšíření:
  • Glims
    • psaním vyhledávat text na stránce (Type-ahead searching, Find-as-you-type)
    • obnova záložek a oken prohlížeče
    • Tabs Misc.
      • Set minimum tab labels size to favicon size
      • Position New Tab: at the right of the current tab
  • Safari Tab Reloader – automatická obnova obsahu záložky
  • Type-To-Navigate - psaním vyhledávat text na stránce (Type-ahead searching, Find-as-you-type)
  • Invisible Status Bar – zobrazení URL pouze při najetí myší na odkaz
  • Saft
    • cena 15 $ 
    • psaním vyhledávat text na stránce (Type-ahead searching, Find-as-you-type)
    • obnova záložek a oken prohlížeče
  • SafariStand
    • obnova záložek a oken prohlížeče (neobnovuje jejich velikost a polohu)
    • editace HTML zdroje
    • ukládání YouTube videa
  • SafariRestore – obnova záložek a oken prohlížeče
  • SafariTabs
    • obnova záložek a oken prohlížeče (neobnovuje jejich velikost a polohu)
  • SafariRestore
    • obnova záložek a oken prohlížeče (neobnovuje jejich velikost a polohu)
  • Tabs
    • obnova záložek a oken prohlížeče (neobnovuje jejich velikost a polohu)
  • Acid Search
    • psaním vyhledávat text na stránce (Type-ahead searching, Find-as-you-type)
  • Fiwt
    • psaním vyhledávat text na stránce (Type-ahead searching, Find-as-you-type)

Camino ()

Maxthon

FlashPeak

Flock

Avant

GreenBrowser

Sleipnir

K-Meleon

Netscape

• podpora ukončena 1. 3. 2008

Mobilní zařízení

Vzhled webových stránek je vhodné otestovat i v mobilních zařízeních. Pro testy je možné využít např.:

• vanamco.com/ghostlab (49 $) – synchronized testing for web and mobile enlightened
• crossbrowsertesting.com (30 $/mo) – cross browser test your website in dozens of browsers with instant results
• browserstack.com (39 $/mo) – Live, Web-Based Browser Testing
  • browserstack.com/screenshots (zdarma) 
  • browserstack.com/responsive (zdarma) 
• testiphone.com (mezerník přepíná mezi horizontálním a vertikálním zobrazením viz Tips and Options na stránce Test iPhone)
• mattkersley.com/responsive – Responsive Design Testing
• responsinator.com – rychlý náhled (iPhone, Crappy Android, Samsung Galaxy, iPad, Kindle)
• browsershots.org – náhledy
• Google Chrome
  • Plugin Window Resizer
• Firefox
  • Web Developer, Velikost Okna, Zobrazit responzivní layouty
  • Plugin Web Developer Toolbar Button (pložka menu: Responzivní design) - nemění velikost okna prohlížeče 

Retina displej

Možnosti jak testovat "Retina web ready" bez Retina displeje:

• Opera Mobile Emulator (Mac, Linux, Windows) 
• Součástí aplikace XCode je nástroj Quartz Debug a iOS Simulator (Mac)
• Firefox
  • V "about:config" najděte "layout.css.devPixelsPerPx" a změnte na hodnotu "1" (normal), "2" (retina) atd.
    • výhoda: reaguje na Media Queries
• Do CSS přidejte (Safari, Chrome, Firefox, IE???)

  • body {
      zoom: 200%;
      -moz-transform: scale(2);
      -moz-transform-origin: 0 0;
    }

  • nevýhoda: v Media Queries je nutné dočasně přepnout "pixel ratio" na 1
• Použijte JavaScript Web Retina Emulator
  • nevýhoda: nespouští Media Queries

Bezpečnost

• Postup na vyčištění napadených webových stránek
• Sucuri SiteCheck – Free Website Malware Scanner

Vyhledávací roboti

Soubor robots.txt

Soubor robots.txt umístěný v kořeni webu zabraňuje (povoluje) procházení a indexování určitých částí webu vyhledávacím robotům (Google, Yahoo! atd.). Tento soubor respektují pouze "slušní" roboti.

Parametry:

• User-agent – název robota
• Disallow – zakázaná hodnota
• Allow – povolená hodnota (používá se pro povolení např. podadresáře v zakázaném adresáři)
• Sitemap – umístění souboru sitemap.xml (sitemap.xml.gz), který narozdíl od souboru robots.txt roboty informuje o struktuře webu (tj. seznamem adres, které robot navštívit má)
• Crawl-delay – doba čekání mezi dotazy

Příklady

Procházení a indexace je povolena pro celý web (není zakázáno nic = je povoleno vše):

User-agent: *
Disallow:

Procházení a indexace je pro celý web zakázána (je zakázán kořen webu):

User-agent: *
Disallow: /

Komplexnější příklad (robotu s názevem W3C-checklink, kontorlující správnost odkazů, je povoleno procházet vše):

User-agent: *
# Directories
Disallow: /scripts/
# Files
Disallow: /cron.php
Disallow: /INSTALL.txt
# Paths (clean URLs)
Disallow: /admin/
# Paths (no clean URLs)
Disallow: /?q=admin/
# Images
Disallow: /*size=
# Sitemap
Sitemap: http://www.tomas.dankovi.info/sitemap.xml
# Crawl-delay
Crawl-delay: 10
# Link Checker
User-Agent: W3C-checklink
Disallow:
# majesticseo.com
User-Agent: MJ12bot
Disallow:

Odkazy

• Kontrola syntaxe souboru robots.txt (en)

Soubor sitemap.xml

Soubor sitemap.xml umístěný v rořeni webu poskytuje vyhledávacím robotům relevantní údaje k lepší orientaci na daném webu. V případě rozsáhlejších webů je vhodné soubor zagzipovat (sitemaps.xml.gz).

Minimální struktura souboru sitemap.xml:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>http://www.tomas.dankovi.info/</loc>
  </url>
</urlset>

Doplňkové značky náležející dovnitř značky url:

• lastmod – datum (a čas) poslední modifikace podle ISO 8601:
  • 2008-03-30
  • nebo v UTC: 2008-03-30T12:25:00
  • nebo v SELČ: 2008-03-30T14:25:00+02:00
• changefreq – frekvence změn prováděných na příslušné stránce:
  • always
  • hourly
  • daily
  • weekly
  • monthly
  • yearly
  • never
• priority – relativní priorita stránek na popisovaném webu (0.0 až 1.0)
  • pokud více stránek z Vašeho webu vychází na stejnou pozici ve vyhledávání, vyhledávač upřednostní stránku s vyšší prioritou. Výchozí priorita je 0.5

Všechny hodnoty, které sitemap obsahuje jsou pro vyhledávače pouze informativní!

XML Sitemap generátor:

• www.xml-sitemaps.com

Odkazy

• Bližší informaco o sitemaps.xml (en)

Reklamní systémy

Komplexní reklamní systémy:

• adsense.com
  • vyžaduje být plátcem DPH nebo být alespoň "osobu povinnou k dani"
• sklik.cz
  • nevyžaduje být plátcem DPH
  • přibližně o 30% nižší výdělky než u Adsense
• mclick.cz
• etarget.cz
• bing.com
• billboard.cz
  • platí za zobrazovanou reklamu
  • pouze pro weby nad 100 000 impresí (zobrazení stránek) měsíčně

Propagace:

• Bannery.cz
• VRS.cz
• Textlink.cz
• Lista.cz

AdSense

Dokumentace:

• Programové zásady Adsense
• Akademie Adsense

Doporučení pro mobilní zařízení:

• používat reklamy ve formátu mobilní záhlaví (320 × 50) nebo střední obdélník (300 × 250)

Novinky:

• v rámci EU už nebude nutné být plátcem DPH?
• DPH 2013: Služby do EU (z EU)
  • identifikovaná osoba
    • není plnohodnotným plátcem DPH, daň vykazuje a odvádí jen ze zahraničních plnění
      • z tuzemských plnění DPH neodvádí a nemá tudíž nárok na odpočet daně
    • podává měsíční (čtvrletní) přiznání k dani a souhrnná hlášení (stejně jako plátci DPH)
      • je vyžadován Elektronický podpis (roční poplatek) nebo Datová schránka (zdarma)
        • pro přístup k datové schránce stačí pouze webový prohlížeč 
          • na finační úřad se z Datové schránky posílají dvě samostatně zprávy obsahující pouze příslušný "předmět zprávy" a XML přílohu vytvořenou v účetním software např. Pohoda nebo aplikací EPO (nic dalšího se nevyplňuje):
            1. "Daňové přiznání k dani z přidané hodnoty" + XML příloha
            2. "Souhrnné hlášení" + XML příloha
        • datovka – multiplatformní aplikace pro přístup k datovým schránkám
    • daňový doklad (faktura)
      • do tuzemska a mimo EU
        • musí být uvedeno "nejsem plátce DPH"
        • DIČ je doporučeno neuvádět
      • do EU
        • musí být uvedeno "daň odvede zákazník"
        • DIČ je povinné
    • do 10.000,- Kč je možné vystavit zjednodušený daňový doklad včetně daně i pro bezhotovostní úhradu (i při platbě platební kartou)
    • v evidenci pro účely DPH je nutné vést veškeré údaje tj. i DIČ
    • při obratu nad 1 milion Kč (projednává se snížení na 750 tisíc) za posledních 12 měsíců se automaticky stáváte plátcem DPH
      • příjmy ze zaměstnání se do příjmů z podnikání pochopitelně nepočítají
    • paušální výdaje jsou nejjednodušší a často i nejvýhodnější způsob, jak uplatnit výdaje v daňovém přiznání (80 %, 60 % příjmů ze všech živností kromě řemeslných, 40 %, 30 %)
    • Elektronická podání pro finanční správu (průvodce)
      • Daně elektronicky MF ČR

Základní informace:

• jak má správně vypadat faktura pro Google AdSense
• fakturace do zahranicí – Google Adsense
• Google AdSense a DPH
• Google AdSense a další služby do EU + DPH především část Přiznání k DPH a služby do EU:
  • Příjem za AdSense nebo za jiné služby do EU zapíšeme na řádek 21, navíc podáme souhrnné hlášení. DPH z takových plnění neodvádíme, nebude se nám ani krátit nárok na odpočet DPH.
• jak účtovat
• http://diskuse.jakpsatweb.cz/?action=vthread&forum=14&topic=87310#5
  • http://www.advokacie-brno.cz/index.php/clanky/3-problematika-vypotu-dph-...
  • http://www.advokacie-brno.cz/index.php/clanky/4-reklama-na-webovych-stra...

DPH:

• každý, kdo poskytne službu (např. reklamní prostor Adsense) do jiného státu EU nebo přijme službu ze zahraničí (nejen z EU) se automaticky stává plátcem DPH
• plátcem DPH se stává automaticky i osoba s příjmy nad 750.000,- Kč za posledních 12 měsíců
• neplátce DPH může pro své příjmy a výdaje využít zprostředkovatele

Poznámky:

Pokud je smluvní protistranou společnost Google Ireland a nemám platební adresu v Irsku podléhají služby tzv. mechanismu reverse charge, kdy DPH platí pouze příjmence, tedy GOOGLE IRELAND. Vice přímo na stránkách Google. DPH v takovém případě platby hradí Google Ireland, společnost zapsaná v obchodním rejstříku podle zákonů Irska. V souladu s podmínkami smlouvy se společností Google podléhají poskytované služby mechanismu reverse charge, kdy DPH musí být v souladu s článkem 196 směrnice Rady č. 2006/112/ES vyúčtována příjemcem, tedy společností Google Ireland. V případě dalších dotazů se obraťte na místního daňového poradce.

Pokud nejsem plátce DPH mohu se společností, která plátcem je, uzavřít smlouvu o zporstředkování pronájmu webových ploch a jakmile přijdou peníze, vystavit fakturu na obnos, který z Googlu z mých stranek (reklmaních kanálu) přijde.

Postup:

1. Zaregistrovat se na AdSense
   • jako typ účtu zvolit raději firma a pravdivě vyplnit všechny požadované údaje
2. Počkat na schválení účtu
   • schválení může trvat i několik měsíců
   • pro kladné posouzení žádosti a schválení účtu je vhodné jako první uvést kvalitní webové stránky nejlépe s delší historií (na uvedený web ve skutečnosti nemusí být nikdy reklama umístěna)
   • další webové stránky pro umisťování reklam již nikdo neschvaluje
   • v Přístupu a ověření omezit zobrazování reklam pouze na své weby  (sníží se tak možnost zneužítí a následné blokace účtu)
   • pro každý web vytvořte a používejte samostatný kanál 
3. Najít často hledaná slova nebo fráze
   • najít klíčová slova (seznam.cz, Google AdWords – Návrhy klíčových slov)
   • denní a týdenní hledanost klíčových slov na Seznamu
4. Vytvořit kvalitní web s originálním obsahem
   • klíčová slova v názvu domény
   • rozsah přibližně 2 až 5 stránek (kopie obsahu je vyhledávači penalizována)
   • stránky mezi sebou prolinkovat (v případě více webů se stejným obsahem prolinkovat také tyto weby mezi sebou)
   • originální titulky stránek 
   • ideální jsou weby v angličtině
   • rozhoduje také stáří domény
5. Sledovat návštěvnost webu pomocí Google Analytics
6. Zaregistrovat stránky do katalogů
7. Publikovat PR články
8. Vytvořit minisites (text s prolinky) směřující pro podporu hlavního webu

Tipy:

• reklamní jednotky blízko hlavičky jsou penalizovány jako MFA (Made For Adsense)
• každý kód reklamní jednotky vkládejte samostatně do souboru (název by měl obsahovat i rozměry), které pomocí funkce include zobrazte na požadovaném místě
  • výhodou je rychlá záměna či úprava reklamních služeb (Adsense, Sklik, Affiliate atd.)
• při vytváření nové reklamní jednotky je vhodné vytvořit i kanál, který umožňuje sloučit více reklamních jednotek a sledovat tak výkon sloučených reklamních jednotek (např. celého webu)
  • kanály např. umožňují zjistit výsledky při optimalizaci vzhledu a pozice reklamních jednotek
• URL kanál umožňuje sledovat výkon konkretní URL nebo prefix URL
• nastavte si pravidelný e-mail report
  • v Přehledy výkonu si požadované parametry filtru a přehled si uložte
  • v Přehledy výkonu, Uložené přehledy – Spravovat si pak můžete nastavit posílání požadovaného pravidelného reportu emailem
• omezte zobrazování reklam pouze na konkrétní domény (aby kódy nemohly být zneužity k úmyslnému porušení podmínek používání Adsense)
  • Domovská stránka, Nastavení účtu (vlevo), Přístup a ověření (sekce v obsahu), Weby oprávněné zobrazovat reklamy, Upravit, Povolit... a do okna vypsat vsechny domény
    • seznam domén v je možné zobrazit v Přehled výkonu, Stránky

AdSense pro obsah

• na jedné stránce mohou být současně zobrazeny nejvíce
  • max. 3 reklamní jednotky pro obsah, ale pouze jedna o rozměrech 300×600
  • max. 3 odkazové jednotky
  • max. 2 vyhledávací pole
    • na stránkách s výsledky AdSense pro vyhledávání může být umístěna pouze jedna odkazová jednotka nebo grafická reklama
• pozor na zákaz "Formátování obsahu podle podoby reklam" viz Zásady pro umístění reklam 

AdSense pro vyhledávání

• na jedné stránce mohou být současně zobrazena nejvíce dvě pole AdSense pro vyhledávání
• na stránkách s výsledky služby AdSense pro vyhledávání může být také jedna odkazová jednotka nebo vyhledávací pole, ale nikoli jiné reklamy Google

Rozšíření webového prohlížeče

• Google Publisher Toolbar

PR články

PR články mírně zvedají povědomí a umožňují získávat zpětné odkazy.

Příklad výpočtu ceny za napsaný text:

• počet znaků textu: 3600
• cena za normostranu (NS): 150,- Kč
• počet znaků na normostranu (NS – normostrana): 1800
• 3600 / 1800 = 2 NS * 150 Kč/NS = 300 Kč

PR weby:

• http://www.stojizazminku.cz
• www.firmy-sobe.cz
• http://www.kratce.info
• http://www.tipblog.cz
• http://promo-clanky.cz
• http://www.prclanek.cz
• http://www.pr-brana.cz
• http://www.e-clanky.cz
• http://cotezajima.cz
• http://start.xarea.cz
• http://prclanky.ic.cz
• http://pr.piseme.info
• http://prclanky.ehity.cz
• http://www.prectetesi.cz
• http://vasepr.cz
• http://prclanky.org
• http://www.prblogy.cz
• http://www.seo-clanky.cz
• http://xn--1caa.eu
• http://prclanky.cz247.cz

Duplicita

Na každé stráce mít dostatečné množství originálního textu.

Každá duplicita snižuje váhu.

Linkbuilding

Získání dostatečného množství kvalitních zpětných odkazů, pomocí nichž je možné u cílového webu zvýšit postavení ve výsledcích vyhledávání.

• Publikování článků na cizích webech
• Účast v diskuzních fórech a komentování článků
• Registrace do katalogů
• Výměna odkazů
• Nákup odkazů
• Vytváření podpůrných stránek a propagačních blogů (pozor prolinky by měly vést z jiné IP adresy )

Kontrola zpětných odkazů:

• Majestic Site Explorer - zpětné odkazy včetně historie jejich budování 
• Open Site Explorer

Struktura a sémantika

Strukturální elementy H1 až H6 mít na stránce pouze jednou (např. více nadpisů H2 snižuje jejich váhu).

V H1 mít název stránky (ne název webu).

Vyhledávače indexují maximáně prvních 70 znaků z nadpisu.

Klíčová slova i odkazy zvýraznit a doplnit o atribut TITLE, který by měl obsahovat rozšiřující text ve kterém je použito dané klíčové slovo.

U rozsáhlejších stránek vytvořit "Osnovu" s odkazy na "ID kotvy" v nadpisech "kapitol (sekcí)". Vybrané odkazy se zobrazují pod nadpisem ve výsledcích vyhledávání např. na seznam.cz.

URL adresa

URL adresa by měla být jedinečná (použít .htaccess nebo mode_rewrite pro vynucení adresy bez nebo s www).

Slova v URL adrese oddělovat spojovníkem (krátká pomlčka).

kontrola

Přesměrovat neexistující URL adresu např. na mapu webu nebo se zadaným výrazem provést vyhledávání.

Externí spolupráce:

• http://www.seocentrum.sk/

Authorship: důvěrychodný autor

Jak se stát důvěrychodným autorem:

• nastavte si profilovou fotku na Google+
• propojte svůj profil Google+ s obsahem, který vytváříte - plus.google.com/authorship
  • texty v diskusích
  • články na svých webech
  • články v PR médiích
• změřte si svůj Author Rank – beta.authorrank.org
• v Google Webmaster Tools sledujte své Sta­tistiky autora - google.com/webmasters/tools/labs-author-stats-1
• propojte všechny své sociální sítě a získáte přehled o svých nejpopulárnějších příspěvcích – klout.com

Facebook

Vytvoření stránky:

• typ stránky Účel nebo komunita umožňuje nastavit vlastní URL adresu hned bez nutnosti mít minimální počet 30 "To se mi líbí"

Like box na webu:

• na stránce Facebook developers Like box je možné použít konfigurátor vzhledu Like boxu a výsledný kód (HTML5, XFBML, IFRAME nebo URL) vložit do vlastních stránek

Time line:

• vložení příspěvku:
  • vložením URL odkazu do textového pole se z cílové adresy automaticky načte obrázek, nadpis, odkaz a popis 
    • před stisknutím tlačítka Přidat příspěvek
      • odstraňte ručně vložený URL odkaz (v horní části) a nechejte pouze automaticky načtený obsah
      • je možné automaticky načtený obsah upravit (zvolit obrázek, změnit texty atd.)

Automatizace:

• z Facebooku je možné automaticky vkládat příspěvky na Twitter viz Jak propojit profil na Facebooku s účtem na Twitteru.
• bufferapp.com umožňuje plánované zveřejňování příspěvků na sociálních sítích:
  • Twitter
  • Facebook (osobní účet i stránky)
  • LinkedIn (osobní účet, skupiny i stránky)
  • app.net
  • Google+ (pouze stránky, pro osobní profily není zatím dostupné API)

Twitter

Automatizace:

• Na Twitter je možné automaticky vkládat příspěvky z Facebooku viz Jak propojit profil na Facebooku s účtem na Twitteru.
• bufferapp.com – plánované zveřejňování příspěvků na sociálních sítích:
  • Twitter
  • Facebook (osobní účet i stránky)
  • LinkedIn (osobní účet, skupiny i stránky)
  • app.net
  • Google+ (pouze stránky, pro osobní profily není zatím dostupné API)

Webové služby:

• bitly.com – služba umožňující zkrácení dlouhého odkazu na několik znaků (využití např. pro Twitter)

Správa:

• tweetdeck.com – správa více Twitter účtů najednou

Vlastní vyhledávání dle parametrů (Custom Google Search)

Vyhledávače kromě stránek indexují i soubory (pdf, doc, xls, ppt, odt, ods, odp atd.). Hledaný obsah je možné parametrizovat dle kritérií (site:, -site:, link:, related: atd.). Vyzkoušejte např. do vyhledávače Google zadat níže uvedené parametry, které vyhledají veškeré PDF dokumenty na webu tomas.dankovi.info:

site:tomas.dankovi.info filetype:pdf

Níže je uveden příklad definice vlastního vyhledávacího pole dle parametrů Google Custom Search Engine (CSE) tj. např. vyhledávání pouze v PDF dokumentech (vygenerování zdrojového kódu vyžaduje Google účet):

<div id='cse' style='width: 100%;'>Loading</div>
<script src='//www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>
google.load('search', '1', {language: 'en', style: google.loader.themes.V2_DEFAULT});
google.setOnLoadCallback(function() {
  var customSearchOptions = {};
  var orderByOptions = {};
  orderByOptions['keys'] = [{label: 'Relevance', key: ''} , {label: 'Date', key: 'date'}];
  customSearchOptions['enableOrderBy'] = true;
  customSearchOptions['orderByOptions'] = orderByOptions;
  customSearchOptions['overlayResults'] = true;
  var customSearchControl =   new google.search.CustomSearchControl('012680400026706346516:cmutncfxzbk', customSearchOptions);
  customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
  var options = new google.search.DrawOptions();
  options.setAutoComplete(true);
  customSearchControl.draw('cse', options);
  /* Add query addition to restrict filetype */
  customSearchControl.setSearchStartingCallback(
    this,
    function(control, searcher, query) {
      searcher.setQueryAddition("filetype:pdf OR filetype:PDF");
    }
);
}, true);
</script>
<style type='text/css'>
  .gsc-control-cse {
    font-family: Arial, sans-serif;
    border-color: #FFFFFF;
    background-color: #FFFFFF;
  }
  .gsc-control-cse .gsc-table-result {
    font-family: Arial, sans-serif;
  }
  input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus {
    border-color: #D9D9D9;
  }
  input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
    border-color: #666666;
    background-color: #CECECE;
    background-image: none;
    filter: none;
  }
  .gsc-tabHeader.gsc-tabhInactive {
    border-color: #FF9900;
    background-color: #FFFFFF;
  }
  .gsc-tabHeader.gsc-tabhActive {
    border-color: #E9E9E9;
    background-color: #E9E9E9;
    border-bottom-color: #FF9900
  }
  .gsc-tabsArea {
    border-color: #FF9900;
  }
  .gsc-webResult.gsc-result, .gsc-results .gsc-imageResult {
    border-color: #FFFFFF;
    background-color: #FFFFFF;
  }
  .gsc-webResult.gsc-result:hover, .gsc-imageResult:hover {
    border-color: #FFFFFF;
    background-color: #FFFFFF;
  }
  .gs-webResult.gs-result a.gs-title:link, .gs-webResult.gs-result a.gs-title:link b, .gs-imageResult a.gs-title:link, .gs-imageResult a.gs-title:link b  {
    color: #0000CC;
  }
  .gs-webResult.gs-result a.gs-title:visited, .gs-webResult.gs-result a.gs-title:visited b, .gs-imageResult a.gs-title:visited, .gs-imageResult a.gs-title:visited b {
    color: #0000CC;
  }
  .gs-webResult.gs-result a.gs-title:hover, .gs-webResult.gs-result a.gs-title:hover b, .gs-imageResult a.gs-title:hover, .gs-imageResult a.gs-title:hover b {
    color: #0000CC;
  }
  .gs-webResult.gs-result a.gs-title:active, .gs-webResult.gs-result a.gs-title:active b, .gs-imageResult a.gs-title:active, .gs-imageResult a.gs-title:active b {
    color: #0000CC;
  }
  .gsc-cursor-page {
    color: #0000CC;
  }
  a.gsc-trailing-more-results:link {
    color: #0000CC;
  }
  .gs-webResult .gs-snippet, .gs-imageResult .gs-snippet, .gs-fileFormatType {
    color: #000000;
  }
  .gs-webResult div.gs-visibleUrl, .gs-imageResult div.gs-visibleUrl {
    color: #008000;
  }
  .gs-webResult div.gs-visibleUrl-short {
    color: #008000;
  }
  .gs-webResult div.gs-visibleUrl-short  {
    display: none;
  }
  .gs-webResult div.gs-visibleUrl-long {
    display: block;
  }
  .gs-promotion div.gs-visibleUrl-short {
    display: none;
  }
  .gs-promotion div.gs-visibleUrl-long  {
    display: block;
  }
  .gsc-cursor-box {
    border-color: #FFFFFF;
  }
  .gsc-results .gsc-cursor-box .gsc-cursor-page {
    border-color: #E9E9E9;
    background-color: #FFFFFF;
    color: #0000CC;
  }
  .gsc-results .gsc-cursor-box .gsc-cursor-current-page {
    border-color: #FF9900;
    background-color: #FFFFFF;
    color: #0000CC;
  }
  .gsc-webResult.gsc-result.gsc-promotion {
    border-color: #336699;
    background-color: #FFFFFF;
  }
  .gsc-completion-title {
    color: #0000CC;
  }
  .gsc-completion-snippet {
    color: #000000;
  }
  .gs-promotion a.gs-title:link,.gs-promotion a.gs-title:link *,.gs-promotion .gs-snippet a:link  {
    color: #0000CC;
  }
  .gs-promotion a.gs-title:visited,.gs-promotion a.gs-title:visited *,.gs-promotion .gs-snippet a:visited {
    color: #0000CC;
  }
  .gs-promotion a.gs-title:hover,.gs-promotion a.gs-title:hover *,.gs-promotion .gs-snippet a:hover  {
    color: #0000CC;
  }
  .gs-promotion a.gs-title:active,.gs-promotion a.gs-title:active *,.gs-promotion .gs-snippet a:active {
    color: #0000CC;
  }
  .gs-promotion .gs-snippet, .gs-promotion .gs-title .gs-promotion-title-right, .gs-promotion .gs-title .gs-promotion-title-right * {
    color: #000000;
  }
  .gs-promotion .gs-visibleUrl,.gs-promotion .gs-visibleUrl-short  {
    color: #008000;
  }
  .gsc-control-cse table,
  .gsc-control-cse td {
    margin: 0;
    border: 0;
  }
  td.gsib_b {
    padding: 0;
  }
  td.gsc-search-button input {
    margin: 0;
  }
  table.gsc-search-box td {
    vertical-align: top;
  }
</style>