Webové stránky

Nejen vzhled Vašich webových stránek může rozhodnout o tom, zda návštěvník stránky podrobněji prozkoumá nebo je opustí.

Návrh webových stránek

K vytvoření webových stránek můžete využít:

  1. Komerční produkt
  2. Open source řešení
  3. Vlastní znalosti

Tip: Jak navrhnout úspěšný web krok za krokem aneb jak hodně se můžete/máte zapojit

Vizuální koncept

Konzultace:

Vizuální koncept:

  • invisionapp.com – vizualizace včetně možnosti vkládání připomínek enlightened
PřílohaVelikost
Webová režie - základy koncepčního myšlení u online projektů3.77 MB
Komplexní analýza webových stranák1.61 MB

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

 

Struktura dokumentu

Po rychlé zobrazení alespoň částečného obsahu stránky je vhodné dokument rozdělit minimálně na dva samostatné bloky.

Záhlaví stránky

  • logo
  • název stránky

Tělo stránky

  • obsah (pokud možno před navigací)
  • navigace
    • primární
    • sekundární
    • hlavní menu
  • postranní sloupec
    • vyhledávání
    • změna jazyka
    • kategorie
    • oblíbený obsah
    • poslední komentáře
    • odkazy
    • reklama
  • zápatí
    • copyright
    • kontaktní informace
    • mapa stránek
    • RSS kanály

 

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:

Jednosloupcové

  • výchozí vlastnost bloků

Vícesloupcové

  • HTML
    • tabulka
      • Tabulkové rozložení
      • 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í
      • Rozložení pomocí absolutního 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
      • Rozložení pomocí obtékání
      • 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" yes
            • výhoda: kromě .clearfix není potřeba znát šířku sloupce s osahem yes
            • nevýhoda: je třeba pomocný prvek
            • frown
            • #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ů no
            • /* 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"?
            • Flexbox
            • <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řílohaVelikost
flexbox.png5.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 m2 ≈ 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) Komerční produkt
  • Corel PHOTO-PAINT (CPT) Komerční produkt

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) Komerční produkt
  • CorelDraw (CDR) Komerční produkt

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 Ne 4 miliardy
(32 bitů)
Ne 4 miliardy
(32 bitů)
Gama korekce Ne   Ano  
Průhlednost 2 úrovně
(1 bit)
Ne 256 úrovní
(8 bitů)
256 úrovní
(8 bitů)
Komprese bezztrátová ztrátová bezztrátová bezztrátová
Proklad Ano Ano Ano Ne
Animace Ano Ne Ne Ne
Vrstvy Ne Ne Ne Ano

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: 232 (32 bitů)

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

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. enlightened 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ů

Grafický návrh 1a Grafický návrh 1b Grafický návrh 2a Grafický návrh 2b Grafický návrh 3a Grafický návrh 3b Grafický návrh 3c Grafický návrh 3d Grafický návrh 4 Grafický návrh 5 Grafický návrh 6 Grafický návrh 7

Odkazy:

 

Kontrola přístupnosti

Přehled nástrojů pro kontrolu přístupnosti (Tools for validating accessibility).

Informace o přístupnosti:

  • webaim.org

FAE

  • FAE umožňuje po registraci prověřit celý web do hloubky 3. úrovně odkazů yes

Total Validator

Total Validator poskytuje souhrnnou kontrolu webové stránky (v placené verzi umožňuje prověřit celý web yes):

  • W3C Markup Validation Service nebo ISO/IEC definition
  • přístupnost dle W3C WAI Accessibility GuidelinesUS Section 508 Standard (Section 508, WCGA – Priority 1, 2, 3)
  • kontrolu odkazů
  • kontrolu pravopisu (English, French, Italian, Spanish, German)
  • náhledy stránek v různých prohlížečích na různých platformách a v různých rozlišeních
  • nástroje ke stažení umožňující kontrolu všech stránek webu před jejich publikováním
  • rozšíření pro FireFox pro rychlou kontrolu jedním kliknutím

World Wide Web Consortium

World Wide Web Consortium (W3C) je webová standardizační organizace, která se snaží o přístupnost webu z nejrůznějších zařízení (nejen z počítače):

Kontrola odkazů

Cynthia Says

Cynthia Says umožňuje kontrolu stránky (Section 508, WCGA – Priority 1, 2, 3)

WAVE

Web Accessibility Evaluation Tool (WAVE) kontroluje dostupnost informací

Search Engine Optimization (SEO)

Optimalizace pro vyhledávače:

  • vytváření a úprava webu takovým způsobem, aby forma a obsah webu byly vhodné pro automatické zpracování
  • cílem je získat vyšší pozici ve výsledku hledání ve vyhledávačích
  • lépe zpřístupňuje web nejen strojům ale i uživatelům

Kontrola:

 Barvy

  • Check My Colours - kontrola barev s ohledem na minimální požadavky, které vyžadují metodiky WCAG 2.0 a 1.0 (v dnešní době je důležitá kontrola kontrastu, jas a rozdíl barev má již zastaralý algoritmus).

 

Požadavky uživatelů

Základní požadavky uživatelů na webové stránky:

  1. Přístup k informacím i bez podpory stylů, skriptů, obrázků, appletů, flash animací atd. (případně zpřístupněte alternativní textovou verzi).
  2. Rychlost načtní stránky – nízký objem dat (optimalizace).
  3. Čitelnost (kontrast mezi popředím a pozadím stránky).
  4. Odkazy jsou odlišeny od ostatního textu (nejlépe nejen barvou).
  5. Možnost změny velikosti textu (±300%).
  6. Nerozpadající se vzhled stránky při změně velikosti okna prohlížeče (zejména šířky) u vícesloupcovém zobrazení.
  7. Tabulky obsahující záhlaví řádků, nebo sloupců.
  8. Jedinečný grafický návrh.

Technické požadavky:

  • vlastní doména druhého řádu
  • zálohování
  • ošetření chybové stránky 404
  • robots.txt
  • favicon.ico
  • facebookové tlačítko "líbí se mi"

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 (&ndash;), která může být při kopírování souborů na server nahrazena jiným znakem.

"Dlouhou" pomlčku (&ndash;) 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

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 %).

 

(X)HTML

Hypertextový značkovací jazyk

Ú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) enlightened
  • webflow.com – responzivní web (zdarma doména 3. řádu, další možnosti -> měsíční platba) enlightened
  • 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

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)
Operační systém Microsoft Windows Operační systém Mac OS
Komerční produkt
  • usnadňuje psaní elementů a atributů
Quanta
Operační systém Linux
 
  • usnadňuje psaní elementů a atributů
  • WYSIWYG i textový režim současně
Microsoft FrontPage
Operační systém Microsoft Windows Operační systém Mac OS
Komerční produkt
  • usnadňuje psaní elementů a atributů
  • pouze kódování win-1250
CKeditor
Operační systém Microsoft Windows Operační systém Mac OS Operační systém Linux
 
  • funkční v prohlížečích
    Internet Explorer FireFox Safari Opera Chrome Camino
  • 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)
Operační systém Microsoft Windows Operační systém Mac OS Operační systém Linux
 
  • 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
Operační systém Microsoft Windows Operační systém Mac OS Operační systém Linux
 
  • není možné zvolit typ dokumentu
Easy Editor
Operační systém Microsoft Windows
   
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
Operační<br />
            systém Microsoft Windows Operační systém Mac<br />
            OS Operační systém<br />
            Linux
 
  • PHP
  • Flex

NetBeans IDE
Operační systém Microsoft Windows Operační systém Mac OS Operační systém Linux 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
Operační systém Microsoft Windows
 
  • 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++
Operační systém Microsoft Windows
   
Macromedia HomeSite
Operační systém Microsoft Windows
Komerční produkt
  • usnadňuje psaní elementů a atributů
  • pouze kódování win-1250
AceHTML
Operační systém Microsoft Windows
   
EasyPad
Operační systém Microsoft Windows
   
Bluefish
Operační systém Microsoft Windows Operační systém Mac OS Operační systém Linux
 
  • obsahuje různé šablony

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

  • Microsoft Word, Excel, PowerPoint Operační systém Microsoft Windows Operační systém Mac OS Komerční produkt
    • 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></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 &nbsp;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

 

Vývoj

Vývoj základního jazyka pro tvorbu webových stránek, který umožňuje publikovat dokumenty na Internetu.

HTML 2.0

  • HyperText Markup Language – hypertextový značkovací jazyk vycházející z jazyka SGML
  • Specifikaci vydala standardizační organizace v roce 1994
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">

HTML 3.0

Verze 3.0 nebyla nikdy jako standard přijata pro svoji přílišnou složitost.

HTML 3.2

  • Začleněny prvky sloužící k definici vzhledu
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

HTML 4.0

  • Je možné oddělit vzhled dokumentu od jeho struktury (pomocí kaskádových stylů CSS)
  • Specifikace je z důvodu přechodu výrobců prohlížečů a autorů stránek rozdělena na:
    • Strict – striktní
    • Transitional – přechodná specifikace, zachovává vzhledové atributy HTML 3.2
    • Frameset – přechodná specifikace rozšířena o definici rámců

HTML 4.01

  • Opraveny některé chyby HTML 4.0
  • Kompletní (uzavřený) popis jazyka (rok 1999)
<!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">

XHTML 1.0

  • EXtensible HyperText Markup Language – rozšiřitelný hypertextový značkovací jazyk
  • Specifikace je stejná jako HTML 4.01, pouze jsou zde integrována pravidla XML
<!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">

XHTML 1.1

  • Modulově založené XHTML (XHTML Modularization) – jednotlivé elementy jazyka jsou seskupeny do modulů odpovídajících jejich určení (funkci) společně s vlastnostmi, které se k nim mohou vztahovat
  • Vynechává již prakticky všechny prezentační vlastnosti
  • Název dokumentu musí mít příponu .xhtml nebo je nutné pomocí HTTP hlavičky odeslat požadovaný MIME typ application/xhtml+xml
  • Pouze jediný typ dokumentu, který je definován pomocí modulů pro alternativní zařízení (mobilní telefony, PDA, hlasové čtečky, braillovský výstup atd.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML 2.0

  • Není zpětně kompatibilní se svými předchůdci
  • Specifikace měla být budoucností webu, ovšem uživatelé webu a výrobci prohlížeču zřejmě o revoluční změny nestojí

HTML 5

  • První pracovní návrh byl zveřejněn v roce 2008
    • je možné používat jak "volnější" HTML 5, tak i "přísnější" XHTML 5 syntaxi
  • Od konce roku 2012 se začíná HTML5 na webu postupně prosazovat
  • Výhody
    • nové elementy (např. header, footer, menu, section – určeno pro bloky, article – určeno pro nody (články), audio, video, canvas, ruby atd.)
    • nativní podpora funkcí, které bylo dříve možné používat pouze se zásuvnými moduly (geolokace, MathML, SVG, API WebSocket atd.)
    • možnost tvorby offline webových aplikací (data se ukládají lokálně a k synchronizaci dat může dojít v okamžiku připojení k Internetu)
    • jednodušší a bezpečnější komunikace (mezi různými doménami, záložkami prohlížeče atd.)
    • přístupnost dle standardů Web Accessibility Initiative (WAI) i Accessible Rich Internet Applications (ARIA)
    • podpora všech světových jazyků
    • zpětná kompatibilita s prohlížeči (neplatí u nových API rozhraní)
  • Na vývoji HTML5 se podílí
    • Web Hypertext Application Technology Working Group (WHATWG)
    • WorldWide Web Consortium (W3C)
    • Internet Engineering Task Force (IETF)

XML

  • EXtensible Markup Language – rozšiřitelný značkovací jazyk, který umožňuje snadné vytváření konkrétních značkovacích jazyků pro různé účely
  • Jazyk je určen především pro výměnu dat mezi aplikacemi a pro publikování dokumentů
  • Univerzální datový formát, ze kterého je možné pomocí transformací vytvořit různé výstupy (PDF, HTML, XHTML atd.)
  • Specifikaci vydala standardizační organizace v roce 1998

 

Srovnání HTML, XHTML a XML

Stejná technologie

  • elementy (prvky, značky)
    <h1>Nadpis první úrovně</h1>
    <p>Odstavec textu</p>
  • atributy a jejich hodnoty
    <a href="http://www.google.com/">Google</a>

Různé použití

HTML

  • daný počet prvků (elementů)
  • nejednoznačná pravidla (některé elementy uzavírat musíte, některé nesmíte a některé můžete, ale nemusíte atd.)
  • pouze formátovací jazyk (zobrazení dokumentu)
  • pouze pro webové stránky

XHTML

  • specifikace je stejná jako HTML, pouze jsou zde integrována jednoznačná pravidla XML

XML

  • neomezený počet prvků (elementů)
  • jednoznačná pravidla
  • plnohodnotný jazyk
  • použitelnost i mimo web – přenos dat mezi různými systémy a aplikacemi (databáze, vektorová grafika atd.)

 

Základní pojmy

Interpret (User Agent)

Zařízení, které interpretuje (zpřístupňuje, vyjadřuje) webovou stránku:

  • prohlížeče
    • vizuální (počítač, PDA, telefony atd.)
    • nevizuální (zvukové, braillovský výstup atd.)
  • tiskárny
  • vyhledávací a analytické roboty

URI (Uniform Resource Identifier)

Jedinečná identifikace zdroje, obecně použitelná množina na všechny druhy adres.

URL (Uniform Resource Locator)

Jedinečná identifikace zdroje často používaných schémat, která jsou podmnožinou URI.

Definuje:

  • Protokol (http, ftp, file, mailto atd.)
  • Doména (cs.wikipedia.org)
  • Port (80, 21 atd.)
  • Název dokumentu včetně cesty (w/wiki.phtml)
  • Parametry (název "title", hodnota "URL", název "action", hodnota "edit")

Příklad URL pro http protokol:

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

Zavržený (Deprecated)

Zastaralý prvek, který byl nahrazen jiným, nebo bude ze specifikace vypuštěn.

Znakové sady

Znaková sada určuje uspořádanou množinu znaků.

Znakové sady

128 znaků (27)

Ve dvojkové soustavě je možné 128 znaků vyjádřit pomocí 7 bitů.

ASCII kódování

ASCII

  • znaky anglické abecedy
  • znaky používané v informatice
    Vybrané znaky ASCII tabulky
    Znak Pořadové číslo
    " 34
    & 38
    ' 39
    < 60
    > 62
    @ 64
    \ 92

256 znaků (28)

Ve dvojkové soustavě je možné 256 znaků vyjádřit pomocí 8 bitů (bajt).

ISO kódování

Prvních 128 znaků je shodných s ASCII.

ISO 8859-1

  • Západoevropská znaková sada (ISO Latin 1)

ISO 8859-2 Operační systém Linux

  • Východoevropská (středoevropská) znaková sada (ISO Latin 2)
    • bosenština
    • chorvatština
    • čeština
    • maďarština
    • polština
    • rumunština
    • srbština (psaná v latinské transkripci)
    • srbochorvatština
    • slovenština
    • slovinština
    • hornolužičtina
    • dolnolužičtina
    • atd.

ISO 8859-...

  • ISO 8859-3: Jihoevropská znaková sada (ISO Latin 3)
  • ISO 8859-4: Baltská (ISO Latin 4)
  • ISO 8859-5: Cyrilice (ruština/cyrilika/ukrajinština)
  • ISO 8859-6: Arabská
  • ISO 8859-7: Řecká
  • ISO 8859-8: Hebrejská
  • ISO 8859-9: Turecká (Latin-5)
  • ISO 8859-10: Latin-6, Nordická
  • ISO 8859-11: Thaiská
  • ISO 8859-13 : Baltská (Latin-7)
  • ISO 8859-14: Keltská (Latin-8)
  • ISO 8859-15 : Západoevropská (Latin-9)
  • ISO 8859-16 : Jihovýchodoevropská (Latin-10)

CP852 Operační systém Microsoft DOS

  • středoevropské jazyky (PC Latin 2)
    • polština
    • rumunština
    • čeština
    • slovenština
    • atd.

Kód Kamenických Operační systém Microsoft DOS

  • upravená sada CP437, kde jsou znaky 128 až 171 nahrazeny znaky české a slovenské abecedy
    • čeština
    • slovenština

Windows 1250 (CP 1250) Operační systém Microsoft Windows

  • středoevropské jazyky (PC Latin 2)
    • bosenština
    • chorvatština
    • čeština
    • maďarština
    • polština
    • rumunština
    • srbština (psaná v latinské transkripci)
    • srbochorvatština
    • slovenština
    • slovinština
    • hornolužičtina
    • dolnolužičtina
    • atd.
  • vlastní sada Microsoftu, která nedodržuje ISO standard (liší se zejména ve znacích š, Š, ž, Ž, ť, Ť a ľ)

Miliardy znaků

Unicode (ISO 10646)

Na rozdíl od osmibitových tabulek znaků jako je bratří Kamenických, Latin 2, Windows-1250 či ISO-8859-2 lze všechny znaky zobrazit současně bez použití znakových entit. Tj. v jednom textu lze tedy kombinovat např. češtinu, ruštinu a řečtinu.

  • 231 ~ 2 miliardy znaků
    • všechny známé znakové sady jazyků na Zemi, včetně japonského nebo čínského písma
    • fonetické abecedy (zápis výslovnosti)
    • speciální vědecké a matematické symboly
    • kombinované znaky
  • 4 bajty, každý po 8 bitech (max. však 31 bitů)
    • může obsahovat nuly na začátku bajtů, což je nevýhodné např. při programování v jazyce "C" (kódování ISO 8859 nuly na začátku neobsahuje)
  • výchozí znaková sada XML
UTF-8 Operační systém Mac OS Operační systém Linux
  • 8bitové slovo – 1 znak zabírá nejméně 8 bitů (1 bajt)
    Kódování UTF-8
UTF-16
  • 16bitové slovo – 1 znak zabírá nejméně 16 bitů (2 bajty)
    Kódování UTF-16
  • není kompatibilní s ASCII
UTF-32
  • 32bitové slovo – každý znak zabírá 32 bitů (4 bajty)
    Kódování UTF-32

 

Kódování znaků

Kódování znaků vyjadřuje binární podobu znaků znakové sady a je možné jej určit pomocí:

  • HTTP hlavičky dokumentu
    <?php header("Content-Type: text/html; charset=utf-8"); ?>
  • XML deklarace
    <?xml version="1.0" encoding="utf-8"?>
  • meta XHTML elementu
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  • meta HTML5 elementu
    <meta charset="utf-8" />

 

Značkovací jazyk

Značkovací jazyky se dělí na:

  • popisné – např. (X)HTML
  • prodedurální
  • prezentační

(X)HTML je značkovací jazyk, který je tvořen pomocí elementů (prvků, značek).

Element (prvek, značka)

Elementy nejsou webovým prohlížečem zobrazovány přímo, ale jsou interpretovány k vytvoření vizuálního obsahu.

Element je tvořen sekvencí znaků obsahující:

  • otevírací část (počáteční tag)
  • obsah – žádný, text, nebo další prvky
  • uzavírací část (koncový tag)
    • některé specifikace (verze) značkovacího jazyka uzavírací část nevyžadují – jedná se o tzv. nepárové (prázdné) elementy, kterým je např. <img>, <hr>, <br> atd.
    • pokud u párových elementů není uzavírací značka uvedena, prohlížeč si ji snaží "domyslet" např. neuzavřený blokový element uzavře, pokud je bezprostředně následován dalším blokovým elementem 
<h1>Nadpis první úrovně</h1>

Při vnořování se prvky nesmí křížit!

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

Element bez obsahu

Zápis elementu bez obsahu je možné zkrátit.

Např. zápis:

<hr></hr>
  • je možné v XHTML zkrátit na:
    <hr />
  • je možné v HTML zkrátit na:
    <hr>

Poznámka:
Elementy bez obsahu nemají v HTML uzavírací část!

Atributy (parametry, vlastnosti)

Atributy se dělí na:

  • obecné (globální) – mohou být použity u všech elementů např. id, class, title atd.
  • specifické (vlastní) – jsou určeny pouze pro konkrétní elementy např. href pro odkaz, src pro obrázek atd.

Slouží k upřesnění významu nebo k přiřazení vlastností prvku. Každý atribut má definovanou svoji výchozí hodnotu. Atribut se uvádí pouze u počátečního tagu.

<h1 id="nadpis1">Nadpis první úrovně</h1>
<hr class="vytisknout" />
<img src="logo.jpg" alt='Popis “našeho” obrázku' />
  • v XHTML se názvy a atributy elementů musí psát malými písmeny
  • chcete-li u hodnoty atributu použít uvozovky, uzavřete jej do apostrofů a naopak

Poznámka:
U HTML nezáleží na velikosti písmen názvů a atributů elementů. Pokud je vlastnost atributu jednoslovná (neobsahuje mezeru), nemusí se u HTML uzavírat do uvozovek, nebo apostrofů.

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. V obsahu komentáře není možné použít dvě pomlčky bezprostředně za sebou (tj. konec komentáře).

<!-- komentar -->

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

Podmíněné komentáře

Podmíněné komentáře (Conditional Comments (en)) umožňují vkládat bloky kódu přístupné pouze pro určitou verzi prohlížeče Internet Explorer. Ostatní prohlížeče podmíněné komentáře ignoruji.

Podmíněné komentáře je možné využít např. k opravě implementačních chyb prohlížeče Internet Explorer (IE).

Syntaxe podmíněných komentářů
 Syntaxe Význam
! negace (not)
lt menší než (less than)
lte menší nebo rovno (less than or equal to)
gt větší než (greater than)
gte větší nebo rovno (greater than or equal to)
& a (and)
| nebo (or)
Skrývající (downlevel-hidden) komentáře

Příklady:

<!--[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]-->
Odhalující (downlevel-revealed) komentáře

U odhalujících komentářů je nutné před zobrazovaným obsahem komentář ukončit a za zobrazovaným obsahem komentář opět začít.

Příklady:

<!--[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]-->

Pro odstranění mezer (používá se např. v hlavičce dokumentu) se používá syntaxe:

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

Znakové entity

Používají se pro vyjádření znaků nezávisle na znakové sadě dokumentu.

Příklad znakových entit
Decimální zápis znakové entity Alternativní zápis Grafické vyjádření
&#223;   β (řecká abeceda)
&#229;   å (norština)
&#27700;   水 (čínský znak pro vodu)
&247; &divide; ÷ (děleno)
&#215; &times; × (krát)
&#177; &plusmn; ± (plus mínus)
&8722; &minus; – (minus)
&#8211; &ndash; – (půlčtverčíková pomlčka, ne spojovník)
&#8212; &mdash; — (čtverčíková pomlčka)
&#8222; &bdquo; „ (počáteční kulatá uvozovka – 99)
&#8220; &ldquo; “ (koncová kulatá uvozovka – 66)
&#8218; &sbquo; ‚ (počáteční jednoduchá uvozovka)
&#8216; &lsquo; ‘ (koncová jednoduchá uvozovka)
&#8217; &rsquo; ’ (apostrof – odsuvník)
&#187; &raquo; » (počáteční obrácené franc. uvozovky)
&#171; &laquo; « (koncové obrácené franc. uvozovky)
&#174; &reg; ® (registrovaná známka)
&#169; &copy; © (copyright)
&#182; &para; ¶ (znak odstavce)
&#9733;   ★ (černá hvězda)
&#9734;   ☆ (bílá hvězda)
&#10004;   ✔ (ano)
&#10003;   ✓ (ano)
&#x2713;   ✓ (ano)
&#x2717;   ✗ (ne)
&#x2718;   ✘ (ne)
&#x2715;   ✕ (ne)
&#x2716;   ✖ (ne)
&permil;   ‰ (promile)

Speciální znakové (html) entity

Mají v kódu dokumentu zvláštní význam a proto musí být v běžném textu nahrazovány entitami.

Speciální znakové entity
Decimální zápis znakové entity Alternativní zápis Poznámka Grafické vyjádření
&#034; &quot; quote "
&#38; &amp; ampersand (et) &
&#039; &apos; (neznají všechny prohlížeče) apostrophe '
&#060; &lt; less than <
&#062; &gt; greater than >
&#160; &nbsp; non-breaking space (patří za jednoslabičné přeložky) "pevná (nerozdělitelná) mezera"
&#8209; N/A

non-breaking hypen

(Dalším řešením může být použití CSS: <span style="white-space: nowrap;">e-mail</span>)

"pevná (nerozdělitelná) pomlčka"
  &thinsp; thin space (Měla by se používat mezi číslem a jednotkou, titulem a jménem, v telefonních číslech atd. Bohužel ne všechny prohlížeče ji interpretují jako nerozdělitelnou.) "tenká" mezera

Převodníky znaků:

 

Dokument

(X)HTML dokument (zdrojový kód webové stránky) je základní textový soubor sloužící k ukládání dat.

Struktura HTML 4.01 dokumentu

<!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>

Struktura XHTML 1.0 dokumentu

  • X-UA-Compatible zpřístupňuje poslední dostupný Internet Explorer mód
    • meta tag "X-UA-Compatible" by měl být přímo za elementem <head> (v ideálním případě by mezi DOCTYPE, html, head a tímto meta tagem nemělo být nic tj. ani žádný podmíněný komentář no)
    • hodnota IE=edge není IE týmem doporučena a může v budoucnu způsobit neočekávané chování bližší info viz What's the difference if meta “X-UA-Compatible” exists or not?
    • hodnota chrome=1 "inicializuje" Google Chrome Frame (pokud je nainstalován)
      • podpora jen do ledna 2014 !!!
<?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> 

Struktura HTML 5 dokumentu

<!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>

Struktura XHTML 5 dokumentu

<?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 deklarace

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

Uvádí, že se jedná o XML dokument (logicky tudíž není u HTML dokumentu) a obsahuje dva pseudo-atributy:

  • version – verze XML dokumentu (u XML 1.0 i 1.1 vždy 1.0)
  • enconding – použité kódování dokumentu

Celá XML deklarace je nepovinná, pro kódování UTF-8 nebo UTF-16.

IE6- a některé starší verze Mozilly a Opery XML deklaraci nerozumí a přepínají vykreslování do nestandardního (tzv. quirk) režimu. Z tohoto důvodu je vhodné psát dokument v kódování UTF-8 a neuvádět XML deklaraci.

Typ dokumentu

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

Syntaktická pravidla stanovující:

  • které elementy je možné používat
  • jaké atributy je možné používat u daných elementů
  • jaký obsah může daný element obsahovat atd.

U HTML 4.01 a XHTML 1.0 je možné si zvolit jeden ze tří typů dokumentu:

  • Strict – striktní
  • Transitional – přechodný – povoleny zavržené (deprecated) prvky
  • Frameset – přechodný režim rozšířený o specifikaci rámů

Typ dokumentu obsahuje:

  • html – jméno kořenového elementu
  • klíčové slovo PUBLIC – udává, že se jedná o veřejně dostupnou deklaraci
  • veřejný identifikátor – součást programu (prohlížeče) nebo systému, aby se pravidla nemusela stahovat z internetu
  • systémový identifikátor – webová adresa souboru syntaktických pravidel

Element <html>

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

Kořenový element celého dokumentu do kterého se vkládá veškerý obsah obsahující atributy:

  • xmlns – povinný atribut xhtml
  • xml – kód jazyka dokumentu
  • lang – kód jazyka dokumentu (zpětná kompatibilita s HTML prohlížeči)

Důvody uvádění kódu jazyka:

  • zařazení vyhledávacími roboty do správné jazykové skupiny
  • určení výslovnosti u hlasového výstupu
  • dodržování typografických pravidel příslušející danému jazyku (např. uvozovky)
  • automatická kontrola pravopisu

Hlavička dokumentu <head>

<head>

</head>

Tělo dokumentu <body>

<body>

</body>

Doporučení:

Stránku začněte tvořit ve striktním režimu. Pokud z nějakého důvodu potřebujete použít i zavržené elementy změňte typ dokumentu na přechodný (transitional). Typ dokumentu s rámy již raději nepoužívejte.

PřílohaVelikost
dokument-html401.html753 bajtů
dokument-xhtml10.html859 bajtů

Cvičení 1

Z přiložených dat vytvořte dle PDF vzoru:

  1. Dokument v aplikaci MS Word, který vyexportujte do HTML formátu.
  2. Prezentaci v aplikaci MS PowerPoint, kterou vyexportujte do HTML formátu.
PřílohaVelikost
data-oit.zip124.45 KB
data-oit-easy.zip124.22 KB

Cvičení 2

Postupně, na základě získávaných znalostí vytvořte XHTML dokument s názvem index.html pomocí textového editoru PSPad obsahující data ze cvičení 1.

  1. Využijte předpřipravenou XHTML šablonu.
  2. Obrázky ukládejte do adresáře images/.

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:langlang
  • 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; [email protected]" />
Více
<meta name="author" content="code: Tomáš Daněk (Tomas Danek); [email protected]" />
<meta name="author" content="style: Petr Novák (Petr Novak); [email protected]" />
<meta name="author" content="scripts: Petr Kozina; [email protected]" />

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í ([email protected])" />

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í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

 

Základní blokové elementy

Blokové elementy při zobrazení začínají a končí novým řádkem.

Nadpisy <h1> až <h6>

<h1>Nadpis první úrovně</h1>
  • stručně popisují část dokumentu, kterou předcházejí
  • rozčleňují dokument na logické úseky (strukturální bloky)
  • interpret XHTML je také může využít k vytvoření obsahu daného dokumentu
  • úrovně nadpisů:
    • <h1> – nejvyšší důležitost (v dokumentu právě jednou)
    • <h2>, <h3>, <h4>, <h5>
    • <h6> – nejnižší důležitost

Nepřeskakujte úrovně (nepoužívejte např. <h4> bezprostředně po <h1>)!

Vizuální prohlížeče vykreslují nadpisy jako blokové elementy tučným zvětšeným písmem. Velikost logicky odpovídá důležitosti nadpisu, takže např. <h1> je největší. Toto zobrazení můžete změnit pomocí stylů.

Odstavec <p>

<p>Odstavec textu</p>
  • ve vizuálních prohlížečích formátován jako samostatný blok s vertikálním odsazením zarovnaný vlevo
  • může obsahovat
    • text
    • řádkové elementy
  • nesmí obsahovat blokové elementy
    • element <div>
    • nadpisy <h1> až <h6>
    • další element <p>
    • tabulku
    • formulář atd.

Vodorovný oddělovač <hr />

<hr />

Kontaktní informace <address>

<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>
  • používá se k zobrazení kontaktních informací
  • uvádí se na začátku, nebo konci dokumentu
  • může obsahovat
    • text
    • řádkové elementy
    • element <br />

Konec řádku <br />

<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>

Přeformátovaný text <pre>

Viz Bílé znaky

Seznamy <ul>, <ol> a definice <dt>

Viz Seznamy a definice

Neformátovaný kontejner <div>

Viz Kontejnery

Citace <blockquote>

Může přímo obsahovat pouze blokové elementy, ne tedy hned text – ten musí být uzavřen v nějakém „kontejneru“, nejčastěji v odstavci.

<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>

Atribut cite uvádí citovaný zdroj, odkaz na další zdroje nebo citaci (jména osob, organizací apod.). Pro zobrazení zdroje použijte řádkový element cite

PřílohaVelikost
elementy-blokove.html2.34 KB

Základní řádkové elementy

Řádkové elementy:

  • nevytváří souvislý útvar tj. nachází se v normálním textu
  • obsahem řádkového elementu nesmí být blokový element

Odkazy <a>

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

Odkaz (anchor, tedy kotva, nebo také hyperlink či zkráceně link) je místo v dokumentu, pomocí kterého může uživatel přejít na jiné místo, které se nachází buď v aktuálním dokumentu nebo kdekoli jinde na Internetu (může se jednat o jiný dokument, obrázek, zvuk, video atd).

K přemístění na nové místo dojde po aktivaci odkazu, například kliknutím myší, stiskem klávesy nebo hlasovým příkazem.

  • vizuální prohlížeče zobrazují odkazy
    • podtržené
    • odlišnou barvou od textu
  • vzhled je možné změnit pomocí stylů, ale rozhodně by i potom měly být odkazy dostatečně kontrastní vzhledem k normálnímu textu
  • funkce odkazu
    • pohodlný pohyb po webu pro uživatele
    • obohacení stylu psaní na webu (odkaz vypadá tajemně, vybízí uživatele, aby se podíval, co se za daným odkazem skrývá)
    • pomocí odkazů se po webu pohybují roboti vyhledávačů
  • může obsahovat
    • text
    • řádkové elementy
    • externí objekty (např. obrázek)
    • odkazy se do sebe nesmí vnořovat
  • výskyt
    • pouze v těle dokumentu <body>, ale vždy uvnitř jiného elementu
  • doporučení
    • odkaz musí být jasný i bez kontextu
      • vyhledávací roboti
      • hlasové prohlížeče čtou nejprve seznam odkazů a teprve potom obsah dokumentu (někteří uživatelé postupují obdobně)
    • k úplnému popisu používejte atribut title

Příklad odkazu s více atributy:

<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>

Odkaz na pojmenované místo v dokumentu:

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

Pojmenované místo v dokumentu tzv. kotva:

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

Pokud si v dokumentu pojmenujete určité místo, můžete se na něj odkazovat tak, že v adrese za jménem dokumentu uvedeme znak # (zvaný též sharp, hash a pod.), následovaný jménem, které jsme místu přidělili.

V XHTML dokumentu je možné se odkazovat na libovolný element s id, ovšem starší prohlížeče podporují pouze element <a> s atributem name.

Atributy namehref můžete použít současně v jednom elementu <a>, což znamená, že jeden element <a> může být zároveň odkazem i cílem jiného odkazu. Pokud ale element <a> slouží pouze jako cíl jiného odkazu, potom byste zde neměli používat žádné z atributů pro bližší určení zdroje: charset, type, hreflang, relrev.

U odkazů využívejte textu s významem odkazu. Nepoužívejte nic neříkající odkazy.

Příklad:

  • Špatně:
    • statistiku návštěvnosti si můžete zobrazit zde (nevhodné jak pro lidi, tak pro vyhledávače)
  • Dobře:

Důraznější zvýraznění <strong>

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

Poznámka:
Logicky formátovaný textový element <strong> je zhlediska přístupnosti webu vhodnější než fyzicky formátovaný prezentační element <b>.

Zvýraznění (emphasis) <em>

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

Poznámka:
Logicky formátovaný textový element <em> je zhlediska přístupnosti webu vhodnější než fyzicky formátovaný prezentační element <i>.

Horní index <sup>

Příklad 23:

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

Dolní index <sub>

Příklad H2O:

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

Citace (quote) <q>

Kratší citace uvnitř textu. Kolem textu by se ve vizuálním prohlížeči měly automaticky doplnit uvozovky podle jazyka, v kterém je dokument psán.

<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>

Citovaný zdroj <cite>

Tento element označuje citovaný zdroj, odkaz na další zdroje nebo citaci (jména osob, organizací apod.).

Zkratka (abbreviation) <abbr>

Označuje zkratku, jejíž plné znění by se alespoň při prvním výskytu v dokumentu mělo nacházet v jeho atributu title (XHTML, URI, ČR, ÚV KSČ apod.).

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

Zkratkovité slovo <acronym>

Tento element se používá k uzavírání zkratkových slov. Ty se narozdíl od zkratek vyslovují většinou jako jedno slovo, ne po jednotlivých písmenech. Pravidla pro použití atributu title jsou zde stejná jako u elementu abbr (Čedok, NATO, NASA apod.).

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

Definice (definition) <dfn>

Obsahem tohoto elementu je pojem nebo definice.

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

Počítačový kód <code>

Používá se k označení počítačového nebo programového kódu.

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

Výstup programů <samp>

Vyznačuje vzorový výstup programů, skriptů apod.

Proměnná <var>

Označuje proměnnou, její vzorovou hodnotu apod.

Text zadávaný uživatelem (keyboard) <kbd>

Indikuje text, který má být zadán uživatelem.

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

Zvětšené písmo <big>

Velikost textu bude o jednu úroveň větší než okolní text.

Zmenšené písmo <small>

Velikost textu bude o jednu úroveň menší než okolní text.

Neproporcionální písmo (teletype text) <tt>

Všechny znaky písma jsou stejně široké (napodobení psacího stroje nebo dálnopisu).

Neformátovaný kontejner <span>

Viz Kontejnery

PřílohaVelikost
elementy-radkove.html6.07 KB

Základní nahrazované elementy

Některé elementy jsou nahrazovány jinými objekty.

Jedná se např. o elementy <img>, <audio>, <video>, <canvas> atd.

Změny obsahu

Elementy <del><ins> se používají v situacích, kdy je třeba návštěvníka informovat o změně obsahu dokumentu.

Oba elementy se mohou chovat jako blokové i řádkové, ale ne současně. Tzn. pokud vystupují jako řádkové (např. jsou obsaženy v elementu <p>), nemohou obsahovat blokové elementy, jako jsou odstavce nebo nadpisy.

<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>

Oběma elementům je možné přiřadit atribut cite, který by měl obsahovat URL dokumentu, který vysvětluje důvod změny a atribut datetime obsahující specifikuje datum a čas změny (ISO formát). Důvod změny může být obsažen v atributu title.

Odstraněný obsah (delete) <del>

 Bývá zobrazen přeškrtnutý.

Nově vložený obsah (insert) <ins>

 Bývá zobrazen kurzivou.

Bílé znaky

Mezera, tabulátor a konec řádku

  • Ze začátku a konce blokového prvku jsou bílá místa odstraněna.
    <p>     Mezery a→     →     tabulátory     </p>
  • Více bílých znaků za sebou je nahrazeno jedinou mezerou.
    <p>Mezery     a→     →     tabulátory</p>
    
    <p>
      Mezery
          a
    →     →     tabulátory
    
    </p>

Toto chování umožňuje udržet „pořádek“ v kódu dokumentu.

Zobrazení bílých znaků

Předformátovaný text <pre>

  • blokový element – při zozbrazení začíná a končí novým řádkem
  • zobrazuje bílá místa přesně tak, jako v kódu dokumentu
<pre>

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

a s odřádkováním

</pre>

Pevná (nerozdělitelná) mezera &nbsp;

Prohlížeč (interpret) rozděluje dlouhé texty na řádky v místech, kde jsou mezery (dělení slov neumí).

<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>

Konec řádku <br />

Příklad nového řádku v XHTML:

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

Přídlad nového řádku v HTML:

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

Poznámka:
U hodnot atributů nepoužívejte zlom (konec) řádků z důvodu různého chování prohlížečů.

PřílohaVelikost
bile-znaky.html1.4 KB

Vícejazyčný obsah

Příklad použití jiného jazyka uvnitř HTML dokumentu

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

Příklad použití jiného jazyka uvnitř XHTML dokumentu

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

 

Kontejnery

  • nemění uzavřený obsah
  • umožňují označit libovolný obsah (k identifikaci se využívají atributy idclass) a přiřadit mu určité vlastnosti:
    • CSS
    • skripty
    • odlišný jazyk

Neformátovaný blokový element <div>

  • blokový element – při zozbrazení začíná a končí novým řádkem
  • může obsahovat
    • text
    • blokové elementy
    • řádkové elementy
<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>

Neformátovaný řádkový element <span>

  • řádkový element – nevytváří souvislý útvar (nachází se v normálním textu)
    • řádkový element nesmí obsahovat blokový element
  • může obsahovat
    • text
    • řádkové elementy

Příklad použití jiného jazyka uvnitř HTML dokumentu:

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

Příklad použití jiného jazyka uvnitř XHTML dokumentu:

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

 

PřílohaVelikost
kontejnery.html1.05 KB

Seznamy a definice

Seznamy

Neuspořádaný seznam (odrážky) <ul>

Výčet zdůrazňuje rovnocennost položek.

Element <ul> ohraničuje obsah seznamu. Jednotlivé položky <li> mohou obsahovat:

  • text
  • řádkové elementy
  • blokové elementy
<ul>
  <li>jedna položka</li>
  <li>druhá položka</li>
  <li>třetí položka</li>
</ul>

Uspořádaný seznam (číslování) <ol>

Výčet zdůrazňuje rovnocennost a pořadí položek.

Element <ol> ohraničuje obsah seznamu. Jednotlivé položky <li> mohou obsahovat:

  • text
  • řádkové elementy
  • blokové elementy
<ol>
  <li>první položka</li>
  <li>druhá položka</li>
  <li>třetí položka</li>
</ol>

Nastavení počátku a hodnoty číslování:

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

Definice

Definice je možné použít k vysvětlení pojmů, nebo několik podobných témat – definice (témata) umístěte do elementů <dt> a vysvětlení do elementů <dd>.

Seznam definic <dl>

Ohraničuje obsah seznamu.

Definice <dt>

Měla by být co možná nejkratší. Povolený obsah:

  • text
  • řádkové elementy

Popis <dd>

Povolený obsah:

  • text
  • řádkové elementy
  • blokové elementy
<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>

Příklady

Kombinace seznamů:

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

Kombinace definic a seznamů:

<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>

 Výhody používání seznamů a definic

  • Dokument je lépe strukturován
  • Uživatel se na stránce lépe orientuje (dlouhé texty mohou čtenáře odradit)

Doporučení:
Delší texty rozdělujte na kratší úseky pomocí nadpisů (h1 až h6), seznamů (ul, ol) a definic (dt) apod.

PřílohaVelikost
seznamy-definice.html1.77 KB

Tabulka

Tabulka umožňuje prezentovat data „dvojrozměrně“ – uživatel může tato data vnímat jak v řádcích tak ve sloupcích. To je u mnoha typů dat vhodný a většinou nenahraditelný prostředek např. u programů, ceníků, srovnávání atd.

Z této „dvojrozměrnosti“ však vyplývají i nevýhody, tabulka musí být prezentována ve dvojrozměrném výstupu (obrazovce) a pokud možno celá najednou. Bohužel ne všechna zařízení pro práci s webem (např. čtečky obrazovky) mají tyto schopnosti. Proto je lepší použití tabulky nejprve zvážit, a pokud je data možné reprezentovat jinou formou (např. pomocí výčtu), použít tuto formu nebo ji alespoň nabídnout jako alternativu k tabulce.

Každá tabulka v (X)HTML je tvořena svým titulkem a samotnými daty. Ta se nacházejí v takzvaných buňkách. Každá buňka patří minimálně do jednoho řádku a jednoho sloupce. Řádky se mohou seskupovat do skupin řádků a sloupce do skupin sloupců.

Příklad jednoduché tabulky:

<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>

Tabulka <table>

Povolený obsah:

  • titulek (nadpis) <caption>
    • nepovinný
    • pouze jeden
  • definice skupiny sloupců <colgroup> a vlastností sloupců <col>
    • nepovinný
    • libovolné množství
  • záhlaví <thead>
    • nepovinný
    • pouze jeden
  • zápatí <tfoot>
    • nepovinný
    • pouze jeden
  • tělo: <tbody> nebo řádek <tr>
    • povinný
    • jeden, nebo více (odlišná témata s jiným významem)

Pomocí atributu summary vždy uvádějte popis tabulky tj. souhrn účelu a struktury tabulky pro nevizuální interprety.

Řádky tabulky <tr>

Povolený obsah:

  • hlavičková buňka <th>
  • datová buňka <td>
Hlavičková <th> a datová <td> buňka tabulky

Povolený obsah:

  • blokové elementy
  • řádkové elementy
  • text

Některé povolené atributy:

  • rowspan – přes kolik řádků se daná buňka rozpíná
    • výchozí hodnotou je 1
    • hodnota 0 znamená, že buňka se rozpíná přes všechny řádky od toho, v kterém se nachází, až po konec skupiny řádků (thead, tbody a tfoot), v které se nachází
  • colspan – přes kolik sloupců se daná buňka rozpíná
    • výchozí hodnotou je 1
    • hodnota 0 znamená, že buňka se rozpíná přes všechny sloupce od toho, v kterém se nachází, až po konec skupiny sloupců (colgroup), v které se nachází

Poznámka:

Do prázdných buněk je vhodné vložit znakovou entitu &nbsp; nebo mezeru z důvodu zpětné kompatibility prohlížečů.

Příklad složitější tabulky:

<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>

Alternativní způsob zobrazení složitější tabulky:

<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řílohaVelikost
tabulka.html6.29 KB

Obrázek

Element <img> slouží ke vkládání obrázků, které nesou v dokumentu nějakou informační hodnotu.

 Nepoužívejte tento element pro vkládání dekorativních obrázků (odrážky, oddělovací čáry, zakulacené rohy atd.) K těmto účelům slouží styly.

Poznámky:

  • U vkládaných objektů (obrázků, animací, multimédií atd.) vždy definujte rozměry pomocí atributů nebo CSS. Zabráníte tak nepříjemnému posunování stránky při načítání obsahu.
  • U jpg obrázků používejte kvalitu alespoň 85%.

Atribut src

Povinný atribut určující URI adresu obrázku (umístění a název).

Atribut alt

Atribut alt obsahuje alternativní textovou verzi (popis) obrázku.

Uživatel by měl mít přístup ke všem informacím (X)HTML dokumentu. Pokud interpret nemůže zpřístupnit objekt vložený do webové stránky, měl by uživateli nabídnout jeho alternativní textovou verzi.

Textový formát je přístupný všem zařízením (počítač, PDA, telefon, prohlížeč pro nevidomé atd.). Bez uvedení alternativní textové verze omezujete přístupnost svých dokumentů na úzkou skupinu zařízení, která umí zacházet s Vámi poskytovaným objektem.

V žádném případě nepoužívejte nicneříkající texty jako např. „obrázek“, „nic“, „Všimněte si krásných barev loga“ apod. (uvedené texty neinformují uživatele o obsahu obrázku).

<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>

Atribut title

Vizuální prohlížeče zobrazí obsah tohoto atributu u kurzoru myši jako popisný text v okamžiku kdy uživatel přesune myš na daný element.

Použití:

  • popis obrázku
  • popis odkazu
  • kontextová nápověda
  • sdělení klávesové zkratky atd.

Atribut longdesc

Alternativní informace k obrázku, pokud nestačí atribut alt.

PřílohaVelikost
obrazek.zip20.58 KB

Obrázková mapa

Obrázkové mapy umožňují pomyslně rozdělit objekt (obrázek) na oblasti, kterým lze přiřadit nějakou akci, např. přechod na jinou stránku nebo spuštění skriptu.

"Klasická" obrázková mapa

<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>

Bezbariérová obrázková mapa s přístupnou navigací

<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>

Vzhled v IE7- je možné upravit pomocí JavaScriptu.

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.htmlodknsi.html, odmt.html, odprois.html, odupod.html, vydod.html.
  3. Obrázky ukládejte do adresáře images/.

 

PřílohaVelikost
data-iro.zip110.7 KB

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.jpgfoto-05.jpg. Výsledné soubory uložte jako foto-03.htmlfoto-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.

 

PřílohaVelikost
data-fotogalerie.zip2.25 MB

Formuláře

Ukázka webového formuláře

PřílohaVelikost
formular.html4.91 KB

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. no

Základní zásady:

  • používejte nerozdělitelnou mezeru &nbsp;
    • 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 
    • 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&times;)
    • 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 (–) &ndash;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 &bdquo;a horní 66 &ldquo;) a anglické "rovné"
  • tečka na konci věty se nezdvojuje
  • za tečkou následuje mezera, ne před ní

Bližší informace:

 

CSS

Kaskádové styly (Cascading Style Sheets) umožňují formátovat (X)HTML či XML dokumenty.

Výhody

  1. umožňuje od sebe oddělit data (informace) a vzhled (formátování)
  2. vzhled celého webu je možné měnit na jednom místě

Ukázky možností CSS:

Kaskádové styly představují pravidla, kterými říkáme:

  1. Kde se mají použít – Selektor (identifikátor prvku)
    • blok vlastností je uzavřen do složených závorek {}
  2. Co mají ve výsledné stránce ovlivnit – Deklarace vlastnosti (definice stylu)
    • název vlastnosti
    • oddělovač :
    • jedna nebo více hodnot (hodnoty se od sebe oddělují mezerou  )
    • ukončení definice ;

Níže uvedené pravidlo se aplikuje na nadpis 1. úrovně, kterému nastaví modrou barvu.

Príklad pravidal kaskádového stylu

Předpokladem pro tvorbu kaskádových stylů je správně strukturovaný dokument (X)HTML či XML:

Výsledný dokument by měl být přehledný. Začínat nejdůležitějšími informacemi a postupovat k méně důležitým.

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[]]> 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.
Způsoby přidělení stylů
Způsob Podpora prohlížečů Poznámka
<link> všechny prohlížeče  
<style>   IE 5.5 nerespektuje atribut media
@import url("ie4.css") dodatky pro IE4 odřízne NN4
@import "moderni_prohlizece.css" moderní prohlížeče (od IE5+, NN6/Moz, Opera) odřízne IE4

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

PřílohaVelikost
prideleni-stylu.zip1.04 KB

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 Queries

Vlastosti CSS3 Media Queries:

  • width – šířka cílové oblasti výstupního zobrazovacího zařízení (viewport) včetně případných posuvníků
    • obrazovka nebo projektor (u prohlížečů režim zobrazení Celá obrazovka) s výřezem o šířce minimálně 980px (grafický návrh by měl v tomto případě počítat s šířkou 960px)
    • <link rel="stylesheet" type="text/css" media="screen and (min-width: 960px), projection and (min-width: 960px)" href="screen-projection-960.css" />
      @media screen and (min-width: 960px),
      projection and (min-width: 980px) { …STYLES… }
    • .info (Drupal)
    • stylesheets[screen and (min-width: 480px) and (max-width: 760px)][] = design/screen-480-760.css
      
      stylesheets[screen and (min-width: 960px)][] = design/screen-960.css
  • height
  • device-width – šířka výstupního zobrazovacího zařízení (bez ohledu na velikost okna)
  • device-height
  • orientation – na výšku, na šířku
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid

Nativní podpora: IE9+, Firefox 3.5+, Safari 3+, Chrome, Opera 7+, iOS Safari 3.2+, Opera Mini 5+, Opera Mobile 10+, Android Browser 2.1+

Přehled některých zařízení a prohlížečů
Device CSS px Actual px Device pixel ratio dpi
iPhone 2,3 320x480 320x480 1  
iPhone 4 320x480 640x960 2 192
iPhone 5 320x568 640x1136 2 192
iPad mini, 1, 2 768x1024 768x1024 1  
iPad 3, 4 768x1024 1536x2048 2 192
Android 2.3     1.5 144
Android 4.1     2 192
Windows 8 Phone        
Interenet Explorer on Windows Phone 8       96 ???
Opera Mini        
Firefox OS        
Firefox for Mobile (Fennec)        
Google Nexus 7     1.3 124.8
Playbook        

Příklad Media Queries pro Tablet:

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

Příklad Media Queries pro Tablet s Retina displejem:

@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... */}
Responsive web design layout
  Smartphone Tablet Desktop TV
Rozlišení zařízení (velikost okna aplikace) [px] 320x480 portrait 480x320 landscape 768x1024 portait 1024x768 landscape 1280x960(1024) 1680 3456
Bod zlomu (break point) 320 480 650, 700, 704, 740, 767, 768 979, 980, 1024 1025, 1120, 1200, 1220   3456
Maximální šířka objektu (při 10px okraji) 300 460 720 960 1200   3436
Šířka sloupce při gridu 12 (max. šířka/12) (320) (480) 60 80 100    
Téma Omega 3 global global >=740 (narrow)

740-840 (narrow landscape)

>=980 (normal)

=1024 (normal landscape)

>=1220    
Téma Omega 4     >=44em
(16px * 44em ~ 704px)
  >=70em
(16px * 70em ~ 1120px)
   
Téma AdaptiveTheme <=320 321-480 481-768 796-1024 >=1025    
Bootstrap   <=480 <=767 768-979 >=1200    
Foundation              
templatemonster.com 320 480 768 980      

Podporu je možné rozšířit pomocí JavaScript knihovny css3-mediaqueries.js i na IE 5+, Firefox 1+ and Safari 2 (umožňuje navíc i podporu průhlednosti u PNG obrázků).

Tipy


Poznámky:

  • otestovat, zda je nutné uvádět vlastnost projection

Responzivní webdesign

Pro rychlé vytvoření responzivního rozvržení je možné použít generátory nebo využít některého z frameworků např.:

  • responsify.it (grid – pružná šířka sloupce, less, scss)
  • getbootstrap.com (grid)
  • foundation.zurb.com (grid)

Mé požadavky:

  • samostatné sekce (hlavička, obsah, patička atd.) – zrychlení počátku vykreslování webu (Start Render)
  • (možnost fixní šířky sloupců – např. pro reklamní bloky)
    • v takto definovaných "úzkých" šířkách není vhodné uživateli povolovat zvětšování písma
  • HTML5
  • responzivní design

Zajímavé zdroje informací:

Techniky vytváření vzhledu:

  • Mobile first – vzhled se začíná tvořit od mobilního, přes tablet, notebook, desktop až k TV
  • Desktop first – většinou při nedostatku času nebo při nutnosti podpory starších prohlížečů

CSS:

  1. Nejdříve pište "obyčejné" selektory – vzhled načtou i prohlížeče nepodporující Media Query
  2. Teprve poté pište selektory v Media Queries podmínkách – upřesňují vzhled pro moderní prohlížeče

Optimalizace:

  • pro cílové zařízení používejte konkrétní kvalitu médií (vzhled, obrázky, videa atd.)
  • využívejte asynchronní verze skriptů

Jak vytvořit responzivní webdesign?

enlightened Pro sjednocení vzhledu (vykreslení) všech prvků napříč moderními prohlížeči je vhodné použít normalize.css (pro zastaralé prohlížeče je nutné použít dnes již "zavržený" reset.css).

Normalize.css:

  • zachovává užitečné výchozí nastavení prvků
  • opravuje některé běžné chyby (HTML5 elementy, dědičnost písma ve formulářových prvcích, korekce velikosti písma, SVG přetečení v IE9, vzhled tlačítek v iOS atd.)
  • neznehodnocuje práci ve vývojových nástrojích a při ladění CSS atd.

enlightened Většina mobilní prohlížečů přizpůsobí stránku (pomocí změny měřítka "scale") tak, aby se celá vešla na obrazovku (=>téměř nečitelný text). Pro zamezení tohoto chování je tedy třeba do hlavičky vložit níže uvedený meta tag (umožňuje změnu šířky při natočení):

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

Více viz např. developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

Tip: Alternativou k výše uvedeném tagu muže být CSS @viewport

enlightened Pružné (flexibilní) obrázky a multimédia:

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;
}

Tip: Responsive images – how to prevent reflow

enlightened Responzivní tabulky

  • FooTable yes
    • Nastavení vlastních beakpointů
    • <script>
        $(function () {
          $('.footable').footable({
            breakpoints: {
              phone: 749,
              tablet: 969
            }
          });
        });
      </script>
    • Nastavení + výpis beakpointů do logů (např. Chrome/Console)
    • <script>
        $(function () {
          $('.footable').footable({
            breakpoints: {
              phone: 749,
              tablet: 969
            }
          }).bind({
            'footable_breakpoint' : function(e) {
              console.log(e.breakpoint);     
            }
          });
        });
      </script>
  • Simple Responsive Table – CSS
  • (Responsive Tables - CSS/JS)
  • (Responsive Data Tables - CSS)

enlightened U mobilních telefonů je možné zakázat funkci automatického zvětšení písma, ovšem sníží se tím čitelnost textu:

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

enlightened Dostatečná velikost aktivního prvku (položka navigace, tlačítko, formulářový prvek atd.):

  • průměr dotykové plošky prstu je přibližně 10 mm
  • doporučení: min. 7 x 7 mm (48 x 48 px) + min. 5 mm (32 px) rozestup mezi aktivními prvky

enlightened Základní HTML5 struktura (layout) stránky:

<!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>

Element main byl přidán až v HTML5.1:

  • prvek main nesmí být potomkem prvků header, nav, article, aside, footer
  • u IE9+ je zatím nutné definovat main jako blokový prvek
    • main {display: block;}
  • u IE8- je navíc kromě CSS ještě nutné prvek v head skriptem definovat (případně použít html5shiv.js knihovnu)
    • <script>document.createElement('main');</script>

V HTML5 je možné vynechat atribut type:

  • místo <style type="text/css"> je tedy možné psát jen <style>
  • místo <script type="text/javascript"> je tedy možné psát jen <script>

Tipy: Vyhněte se nejobvyklejším chybám v HTML5

Internet Explorer 8 a starší verze

Využijte výhod validních podmíněných komentářů (IE Conditional Stylesheets vs CSS Hacks) přímo pro element <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]-->

IE8- můžete nechat v jednosloupcovém "mobilním" vzhledu viz Leaving Old Internet Explorer Behind nebo podporu Media Queries zpřístupníte pomocí JavaScriptu.

enlightened X-UA-Compatible zpřístupňuje poslední dostupný Internet Explorer mód:

  • meta tag "X-UA-Compatible" by měl být vložen přímo za elementem <head> (v ideálním případě by mezi DOCTYPE, html, head a tímto meta tagem nemělo být nic tj. ani žádný podmíněný komentář no)
    • nejvhodnějším řešením by bylo např. detekovat hodnotu HTTP_USER_AGENT (viz např. Drupal modul Browser class) a na základě ní hlavičku dokumentu o níže uvedený meta tag automaticky doplnit
  • hodnota IE=edge není IE týmem doporučena a může v budoucnu způsobit neočekávané chování bližší info viz What's the difference if meta “X-UA-Compatible” exists or not?
  • hodnota chrome=1 "inicializuje" Google Chrome Frame (pokud je nainstalován)
    • podpora jen do ledna 2014 !!!
    • <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" />
<!--[if lte IE 9]>
  <meta http-equiv="x-ua-compatible" content="ie=edge" />
<![endif]-->

enlightened Pro podporu media queries v IE8- je třeba použít media-queries.js (nabízí více možností ovšem na úkor výkonu) nebo respond.js:

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

enlightened Pro podporu nových HTML5 prvků (header, nav, article, aside, section, footer atd.) v IE8- je nutné k dokumentu připojit html5shiv (pouze pro IE8-) nebo Modernizr (nabízí více možností):

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

 


Tipy:

  • Responsive Web Design
  • Mobile First
  • Sass
  • Compass
  • Singularity Grid System
  • Breakpoint
  • Base Theme
  • Drush

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 yes

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ů. enlightened

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. enlightened

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-

 

Deklarace

Jednoduchá

Jednoduchá deklarace přiřazuje vlastnosti jednomu selektoru.

h1 {
  color: blue;
}

Vícenásobná

Vícenásobná deklarace přiřazuje vlastnosti více selektorům odděleným čárkou.

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 Chromeno
  • 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 enlightened
  • 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 headbody, do body je vnořen element h1 atd. Jedná se o pojmy následníkpředchůdce. V případě přímého příbuzenství o pojmy rodič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ů:

Text a písmo

Sdružená definice písma – font

Umožňuje zkrácený zápis všech vlastností písma:

  • font-size
  • line-height
  • font-variant
  • font-weight
  • font-style
  • font-family
p {font: small-caps bold italic Arial 120%/1.5;}

Při použití sdružené definice jsou u neuvedených vlastností nastaveny výchozí hodnoty.

p {font: 90% bold;}

Typ písma – font-family

  • Proporcionální písmo – různé znaky mají různou šířku, která obsahuje prázdný prostor před a za písmenem
    • Bezpatkové (rodina sans-serif)
    • Patkové (rodina serif)
    • Ozdobné písmo (rodina fantasy, cursive)
  • Neproporcionální písmo (rodina monospace) – všechny znaky písma jsou stejně široké (napodobení psacího stroje nebo dálnopisu)
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;
}

Více viz Font-Family.

Velikost písma – font-size

h2 {font-size: 185%;}

Výška řádku – line-height

p {line-height: 1.5;}

Varianta písma – font-variant

abbr {font-variant: small-caps;}

Tučnost písma – font-weight

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

Styl písma – font-style

em {font-style: italic;}

Barva textu – color

body, table {color: purple;}

Velikost mezer mezi slovy – word-spacing

h1 {word-spacing: 1em;}

Nepodporuje IE5.5

Velikost mezer mezi písmeny – letter-spacing

h1 {letter-spacing: .3em;}

Bílé znaky – white-space

Určuje způsob zacházení s mezerami, tabulátory a konci řádků.

  • normal – výchozí hodnota
  • nowrap – zakáže automatické zalamování řádků
  • pre – zobrazuje bílé znaky přesně tak, jako v kódu dokumentu
  • pre-wrap – zobrazuje bílé znaky přesně tak, jako v kódu dokumentu, ale je povoleno automatické zalamování řádků (nepodporuje IE7-, FireFox 2.0-, Opera 7.5- a Safari 2.0-)
  • pre-line – zobrazuje zlomy řádků tak, jako v kódu dokumentu (nepodporuje IE7-, FireFox 3.0-, Opera 9.2- a Safari 2.0-)
th {white-space: nowrap;}

Horizontální zarovnání obsahu – text-align

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

Vertikální zarovnání – vertical-align

Používá se pro vertikální zarovnání např. malého obrázku na vyšším řádku nebo v tabulkách.

.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;}

IE5- podporuje pouze hodnoty baseline, subsuper.

Dekorace textu – text-decoration

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

IE7 nezná hodnotu blink.

Odsazení prvního řádku – text-indent

p {text-indent: 2em;}

Převod textu – text-transform

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

Stín textu – text-shadow

.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;
}

Podpora: Firefox 3.5, Gecko 1.9.1, Opera 9.5 Safari 1.1, WebKit 100, Konqueror 3.4, Chromium 2.0.158.0

Nepodporuje IE8-, (IE5.5 podporuje pouze filtry ShadowDropShadow)

Směr psaní textu – direction

p {direction: rtl;}

Orientace toku textu – unicode-bidi

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

 

Font-Family

Google Fonts

Tipy pro češtinu:

  • Zvolte: Latin Extended
  • Pro kontrolu využijte Pangram (z řečtiny „každé písmeno“): "Nechť již hříšné saxofony ďáblů rozzvučí síň úděsnými tóny waltzu, tanga a quickstepu. 1234567890"
  • Volte raději užší písmo (u moc širokého písma se vejde na řádek málo znaků)
  • Sekce "Quick Use" zobrazuje rychlost načítání písma enlightened

Font Squirrel

Font Squirrel umožňuje aplikovat zvolený font písma nezávisle na fontech uživatelského operačního systému.

Výhody:

Postup:

  1. Stáhnout si požadovaný TTF font písma:
  2. Pomocí Font Squirrel generátoru vygenerovat požadované soubory:
    • pro české fonty nastavit volby:
      • Expert
      • Subsetting: Custom Subsetting
        • Language: Czech
        • (Unicode Tables: Basic Latin, Latin Extended-A)
  3. Rozbalit webfontkit archiv, rozbalený adresář přejmenovat např. na fonts a umístit do svého tématu vzhledu.
  4. V html zdroji připojit CSS fonts/stylesheet.css (v Drupalu nejlépe pomocí .info souboru).
  5. Název fontu obsažený v souboru stylesheet.css je možné použít v libovolném CSS jako vlastnot font-family.
  6. Tipy:
    • Velikost fontu @font-face udávaná v jednotkách em někdy neodpovídá předpokladům, proto je vhodnější udávat velkost fontu v jednotkách pxenlightened
    • Ačkoli by přidání vyhlazení a průhledného stínu nemělo nic změnit – opak je pravdou. Přidáním níže uvedených vlastností se font najednou renderuje úplně jinak a to mnohem lépe:
    • .selector {
        -webkit-font-smoothing: antialiased;
        text-shadow: transparent 0px 1px 1px;
      }

Font Awesome

  • fortawesome.github.io/Font-Awesome – ikony zdarma i pro komerční účely. yes

Glyphicons

Zdarma pouze obárzky ve formátu PNG. no


Porovnání rychlosti načítání stránek s "online" a "offline" fontem:

Porovnání rychlosti načítání stránek s "online" a "offline" fontem

Pozadí

Sdružená definice pozadí – background

Umožňuje zkrácený zápis všech vlastností pozadí:

  • background-color
  • background-image
  • background-position
  • background-repeat
  • background-attachement
  • background-size
body {background: #cf3 url(../images/pozadi.jpg) top left repeat-x;}

Při použití sdružené definice jsou u neuvedených vlastností nastaveny výchozí hodnoty.

Barva pozadí – background-color

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

Obrázek na pozadí – background-image

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

Pozice obrázku na pozadí – background-position

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

Ekvivalentní zápisy:

  • left top ~ 0% 0% ~ 0 0
  • right bottom ~ 100% 100%

Pokud uvedete pouze jednu hodnotu, druhá se automaticky nastaví na střed:

  • 0 ~ left ~ left center ~ 50% 50%
  • 50% ~ center ~ center center ~ 50% 50%
  • 100% ~ right ~ right center ~ 100% 50%
  • top ~ center top ~ 50% 0% ~ 50% 0
  • bottom ~ center bottom ~ 50% 100%

V jedné deklaraci nepoužívejte současně textové a číselné hodnoty.

Opakování obrázku na pozadí – background-repeat

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

Posouvání obrázku na pozadí – background-attachment

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

IE6- umožňuje použít hodnotu fixed pouze pro element body.

Velikost pozadí na pozadí – background-size

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

Průhlednost – opacity

Vlastnost průhlednosti nastavená na 30 % je definovaná pro IE, FireFox a ostatní moderní prohlížeče (černá barva pozadí je nepovinná).

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;
}

Přechody – gradienty

Dokumentace viz W3C gradients.

Generátory gradientů vám mohou ušetřit mnoho času (podpora prohlížečů). Některé generátory umožňují např. i převádět obrázky gradientů na CSS. enlightened

Lineární přechod – linear gradient

Podpora: FF3.6+, Chrome, Safari4+, Opera11.1

  • horizontální nebo vertikální přechod dvou barev: IE6+
  • přechod dvou barev o libovolném úhlu: IE9+
  • přechod tří a více barev o libovolném úhlu: IE10+

Příklad vertikálního přechodu dvou barev:

.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) */
}

Příklad přechodu dvou barev v úhlu 135°:

  • Pro úplnou podporu multi-stop (více barev) gradientu v IE9 (pomocí SVG) je nutné pomocí podmíněného komentáře "zakázat" filtr.
<!--[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 */
}

Filtry - filter

Příklad odbarvení obrázku na pozadí:

.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;
}

...

Rámeček, okraje a rozměry

Zápis hodnot vlastností, u kterých je možné nastavovat všechny čtyři strany je možné zkrátit.

Příklad nastavení vnitřního okraje
Definice Horní Pravý Dolní Levý
padding: 1px 2px 3px 4px; 1 2 3 4
padding: 1px 2px 3px; 1 2 3 2
padding: 1px 2px; 1 2 1 2
padding: 1px; 1 1 1 1

Sdružená definice rámečku – border

Umožňuje zkrácený zápis všech vlastností rámečku:

  • border-width
  • border-style
  • border-color
h1 {border: 4px groove green;}
p {border: 4px ridge green;}

Při použití sdružené definice jsou u neuvedených vlastností nastaveny výchozí hodnoty.

Samostatně lze zadávat i jednotlivé strany:

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

Šířka rámečku – border-width

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

Samostatně lze zadávat i jednotlivé strany:

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

Šířka vykreslování klíčových slov (thin, medium, thick) se v jednotlivých prohlížečích liší.

Styl rámečku – border-style

  • solid – spojitý
  • double – dvojitý
  • groove – příkop
  • ridge – val
  • inset – vmáčknutý
  • outset – vystouplý
  • dotted – tečkovaný
  • dashed – čárkovaný
  • none – žádný
body {
  border: 10px green;
  border-style: solid;
}

Samostatně lze zadávat i jednotlivé strany:

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

IE6- vykresluje tečkovaný rámeček o šířce 1px čárkovaně.

IE5- vykresluje tečkovaný a čárkovaný rámeček jako spojitý.

Barva rámečku – border-color

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

Samostatně lze zadávat i jednotlivé strany:

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

Zaoblení rámečku – border-radius

.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');
}

V současné době nepodporují prohlížeče IE a Opera. Pro prohlížeče Mozilla Firefox, Google Chrome a Safari je možné již dnes používat zkušební vlastnosti -moz-border-radius-webkit-border-radius.

Omezení:

  • zaoblit rohy elementu <img>není možné, ale můžete použít obrázek v pozadí elementu <div>
  • pro prohlížeč Opera musí být styl pro kulaté rožky uveden ve zdrojovém kódu stránky (na odstranění tohoto omezení se pracuje)

Vnější okraj – margin

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

Samostatně lze zadávat i jednotlivé strany:

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

Vnitřní okraj – padding

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

Samostatně lze zadávat i jednotlivé strany:

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

Výška – height

  • pouze pro blokové elementy (pro řádkové je možné použít vlastnost line-height)
  • hodnota vyjádřená procenty se vztahuje k zadané výšce nadřazeného elementu
  • je-li obsah elementu menší než zadaná výška, vytvoří se pod obsahem prázdné místo
  • přetečení obsahu řeší vlastnost overflow
#header {height: 100px;}

 Maximální výška – max-height

div {max-height: 100px;}

Nepodporuje IE6-

Minimální výška – min-height

div {min-height: 100px;}

Nepodporuje IE6-

Šířka – width

  • pouze pro blokové elementy
  • hodnota vyjádřená procenty se vztahuje k zadané šířce nadřazeného elementu
  • je-li obsah elementu menší než zadaná šířka, vytvoří se vedle obsahu prázdné místo
  • přetečení obsahu řeší vlastnost overflow
#header, #content, #footer {width: 760px;}

Maximální šířka – max-width

div {max-width: 100px;}

Nepodporuje IE6-

 Minimální šířka – min-width

div {min-width: 100px;}

Nepodporuje IE6-

Stín bloku – box-shadow

box-shadow: [horizontální posun] [vertikální posun] (rozostření) (roztažení) [barva] (pozice), (...další stíny...)

.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+ */
}

Praktický příklad použití stínů je vidět např. u loga Microsoft.

 

Zobrazení, pozice a obtékání

Způsob zobrazení – display

Skrytý element na stránce nezabírá žádné místo.

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

Viditelnost – visibility

Skrytý element na stránce stále zabírá své místo.

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

Přetečení – overflow

Určuje jakým způsobem zacházet s obsahem, který se do elementu nevejde:

  • visible – přetékající obsah se zobrazí
  • hidden – přetékající obsah se nezobrazí
  • scroll – posuvníky se zobrazí vždy
  • auto – posuvníky se zobrazí pouze v případě nutnosti
pre {
  width: 556px;
  font-size: 13px;
  overflow: auto;
}

Samostatně lze zadávat i jednotlivé směry:

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

Pozice – position

Umístění každého elementu v rámci dokumentu může být statické (výchozí), relativní, absolutní nebo fixní. Umístění se vztahuje vždy k obsahovému bloku elementu.

Statické pozicování – static:

  1. Obsahovým blokem je nejbližší nadřazený blokový element.
  2. Blok elementu je umístěn v rámci běžného toku dokumentu (dle zdrojového kódu).

Relativní pozicování – relative:

  1. Obsahovým blokem je nejbližší nadřazený blokový element.
  2. Blok elementu je posunut z původního umístění jedním nebo více směry.
  3. Původní prostor po elementu zůstane zachován.
  4. Nová pozice elementu neovlivní pozici jiného elementu.

Absolutní pozicování – absolute:

  1. Obsahovým blokem je nejbližší nadřazený pozicovaný element v jiném než statickém umístění.
  2. Blok elementu je vyjmut z běžného toku dokumentu, kde uvolní místo následujícím elementům a přesune se na určenou pozici vzhledem ke svému obsahovému bloku.
  3. V nové pozici blok nijak neovlivňuje jiné elementy.

Fixní pozicování – fixed:

  1. Obsahovým blokem je zobrazovací obslat prohlížeče.
  2. Blok elementu je vyjmut z běžného toku dokumentu, kde uvolní místo následujícím elementům a přesune se na určenou pozici vzhledem ke svému obsahovému bloku.
  3. Blok zůstane v nové pozici i při posunu obsahu prohlížeče.

IE6- vyhodnocuje fixní umístění jako absolutní.

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

Horní vzdálenost – top

Vzdálenost horního vnějšího okraje relativně či absolutně pozicovaného elementu od horního vnitřního okraje nadřazeného elementu.

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

Pravá vzdálenost – right

Vzdálenost pravého vnějšího okraje relativně či absolutně pozicovaného elementu od pravého vnitřního okraje nadřazeného elementu.

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

Spodní vzdálenost – bottom

Vzdálenost spodního vnějšího okraje relativně či absolutně pozicovaného elementu od spodního vnitřního okraje nadřazeného elementu.

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

Levá vzdálenost – left

Vzdálenost levého vnějšího okraje relativně či absolutně pozicovaného elementu od levého vnitřního okraje nadřazeného elementu.

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

Vrstva – z-index

Umístění absolutně pozicovaného elementu do vzdálenější (nižší číslo) nebo bližší vrstvy (vyšší číslo).

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

Ořez – clip

Ořízne absolutně pozicovaný element.

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

IE6- neumí oříznout pozadí, ale pouze obsah elementu

Plovoucí pozice – float

  1. Obsahovým blokem je nejbližší nadřazený blokový element.
  2. Blok elementu je možné umístit vlevo nebo vpravo v rámci obsahového bloku.
  3. Následujícímu obsahu je umožněno, aby element v plovoucím umístění obtékal zprava nebo zleva.
  4. Plovoucí blok elementu se snaží umístit co možná nejvýše v rámci svého obsahového bloku.
  5. V nové pozici plovoucí blok ovlivňuje pozice následujících elementů v normálním toku dokumentu.
  6. Původní pozice je uvolněna pro další elementy.

Hodnoty:

  • left – umístí element vlevo a umožní dalšímu obsahu, aby jej obtékal zprava
  • right – umístí element vpravo a umožní dalšímu obsahu, aby jej obtékal zleva
  • none – běžný tok dokumentu (zrušení plovoucí pozice)
img {  
  width: 100px; /* definovana sirka je nutnou podminkou */
  float: right;
}

Ukončení obtékání – clear

Určuje stranu, ze které se ukončí obtékání.

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

Příklad stylování prvku blockquote

<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: '“';
}

Sloupce

Rozdělení obsahu (např. nečíslovaného seznamu) na definovaný počet sloupců

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;
}

Tabulka

Vertikální zarovnání obsahu buněk tabulky – vertical-align

Hodnoty:

  • baseline – účaří prvního řádku všech buněk na řádku (různé velikosti písma, vložený objekt)
  • top – horní okraj
  • middle – střed
  • bottom – spodní okraj
th {vertical-align: bottom;}
td {vertical-align: top;}

Splynutí rámečku sousedních buněk a tabulky – border-collapse

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

Velikost mezer mezi rámečky – border-spacing

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

Nepodporuje IE7-

Umístění titulku – caption-side

Hodnoty:

  • top – nad tabulkou
  • bottom – pod tabulkou
  • left – vlevo
  • right – vpravo
table {
  caption-side: bottom;
}

Nepodporuje IE7-

Opera zná pouze hodnoty top a bottom

Rámeček kolem prázdných buněk – empty-cells

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

Nepodporuje IE7-

 

Seznamy

Sdružená definice seznamů – list-style

Umožňuje zkrácený zápis všech vlastností seznamů:

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

Typ označení položky seznamu – list-style-type

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 */

Pozice označení položky seznamu -list-style-position

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

Obrázek označení položky seznamu – list-style-image

Definovaný obrázek přepíše vlastnost list-style-type.

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

Tipy:

Animace

CSS3 přechody

Original Hover Effects with CSS3 Transitions and Animations

Syntaxe:

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

CSS3 transformace

Rotace, zvětšení a změna průhlednosti při najetí myší:

.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 animace

Změna průhlednosti obrázku po najetí myši

/* 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;
}

Změna průhlednosti (prolnutí) obsahové části při načtení stránky

/* 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;
}

Postupná změna průhlednosti odstavců po načtení stránky

/* 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í.
PřílohaVelikost
data-fotogalerie-css.zip154.93 KB
bg.png2.86 KB

Cvičení 6

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

PřílohaVelikost
data-cviceni-6.zip552.75 KB
data-cviceni-6-easy.zip208.12 KB

Poznámky

Odkazy:

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:

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
  SASS/SCSS Stylus LESS
Zpracování server server server i klient
Jazyk Ruby Ruby JavaScript
Syntaxe bez {};
i
klasické CSS
(vyžaduje nejvíce psaní)
bez {}, :;
i
klasické CSS
(vyžaduje nejméně psaní)
klasické CSS
Hlášení chyb nejpřesnější občas chybné určení řádku nejhorší
Možnosti zřejmě největší velké drobná omezení
Mixins Compass CSS3 mixins NIB LESS Elements
Bootstrap LESS mixins

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:

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;
}

 

JavaScript

JavaScript je multiplatformní, objektově orientovaný skriptovací jazyk, určený především pro programování dynamických internetových stránek (aplikací).

Ukázky:

JavaScript projekty:

Hlavička dokumentu

U stránek používajících JavaScript je nutné vždy do hlavičky dokumentu doplnit meta informaci o typu skriptovacího jazyka.

Definice JavaScriptu v hlavičce dokumentu:

  ...
  <meta http-equiv="content-script-type" content="text/javascript" />
  <script type="text/javascript">
    /* <![CDATA[ */
      alert('Můj první JavaScript');
    /* ]]> */
  </script>
</head>
<body>
  ...

Připojení externího souboru s JavaScriptem v hlavičce dokumentu:

  ...
  <meta http-equiv="content-script-type" content="text/javascript" />
  <script type="text/javascript" src="muj-skript.js"></script>
</head>
<body>
  ...

Poznámka: IE5- nepodporuje žádný JavaSript.

Příklady

 

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:

 

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 CDNGoogle 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

Selektory

codylindley.com/jqueryselectors – vizulání demonstace selektorů

Příklady selektorů:

  • $('*') – univerzální selektor (všechno)
  • $('.myclass') – všechny prvky obsahující třídu myclass
  • $('#myid') – prvek s jedinečným identifikátorem myid
  • $('div p') – všechny p, které jsou potomky div
  • $('div > p') – všechny p, které jsou přímými potomky div
  • $('div + p') – všechny p, které jsou následujícími sourozenci div
  • $('div:has(p)') – všechny div, které mají alespoň jednoho potomka p
  • $('input:text') – všechny input typu "text" (jen textová pole)
  • $('input:disabled') – všechny zakázané (deaktivované) input
  • $('input[name]') – všechny input, které mají atribut name s libovolnou hodnotou
  • $('input[name^="hodnota"]') – všechny input, jejichž name začíná na "hodnota"
  • $('input[name*="hodnota"]') - všechny input, jejichž name obsahuje text "hodnota"
  • $('input[name!="hodnota"]') – všechny input, jejichž name neobsahuje text "hodnota"
  • $('input[name$="hodnota"]') – všechny input, jejichž name končí na "hodnota"
  • $('a[href^="http"][href*="ano"][href!="ne"][href$=".pdf"]') – odkazy začínající http, obsahující "ano", neobsahující "ne" a končící příponou .pdf
  • $('span:contains('text')') – všechny span, které obsahují "text"
  • $('span:empty') – všechny span, které jsou prázdné (např. nevyplněná pole, prázdné buňky tabulek atd.)
  • $('span:parent') – všechny span, které nejsou prázdné (neprázdný prvek se stává rodičem)
  • $(':input') – všechny formulářové prvky (input, textarea, select a button)
  • $(':animated') – všechny právě animované elementy
  • $(':header') – všechny nadpisy (h1, h2, h3, h4, h5 a h6)
  • $('li:first') – první položka seznamu
  • $('li:not(:first)') – všechny položky seznamu kromě první
  • $('li:last') – poslední položka seznamu
  • $('div:first-child') – všechny div, které jsou prvními potomky
  • $('div:last-child') – všechny div, které jsou posledními potomky
  • $('div:only-child') – všechny div, které jsou jedinými potomky
  • $('tr:nth-child(even)') – sudé řádky tabulky (řádky se číslují od nuly, proto není použito odd)
  • $('td:eq(3)') – 4. buňky tabulky (indexuje se od nuly)
  • $('td:gt(3)') – buňky tabulky, které mají větší než 3. indexové pořadí (páté a větší)
  • $('td:lt(3)') – buňky tabulky, které mají menší než 3. indexové pořadí (třetí a menší)

Metody

.text – změna obsahu

.val – získání/přiřazení hodnoty

.prepend – vložení obsahu před

.append – vložení obsahu za

.hide – skrytí

.addClass – přidání třídy

.css – nastavení kaskádového stylu

Události

Události umožňují interakci s uživatelem (reakce na myš, klávesnici atd.).

Načtení dokumentu (pomocí metody .ready):

  • $(document).ready(function() {...});

    je možné zkrátit na:

    $().ready(function() {...});

Klepnutí myší:

  • $().ready(function() {
      $('.test').click(function() {
        $(this).css('background', 'green');
      });
    });

Ukázka shodného zápisu:

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

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

    return false;
});

Příklady

Parallax

Parallax efekt – obrázky a video na pozadí:

  • Implement a Simple Parallax Effect
    • jQuery(document).ready(function($) {
          // Set the background-attachment for body to "fixed" so that
          // we can control it's scroll speed.
          $('body').css('background-attachment', 'fixed');
      
          // Attach a function to watch the window.scroll event, and
          // move the background image slower than the content scroll.
          $(window).scroll(function () {
              document.body.style.backgroundPosition = "0px " + (0 – (Math.max(document.documentElement.scrollTop, document.body.scrollTop) / 4)) + "px";
          });
      });
  • Wordpress
  • Drupal
  • Další
    • Skrollr
    • sequencejs.com/themes/sliding-horizontal-parallax
    • github.com/IanLunn/jQuery-Parallax
    • pixelcog.github.io/parallax.js
    • github.com/flesler/jquery.scrollTo

Příklad parallax efektu: wwws.superfish.com

Plovoucí blok - Skyscraper

julianware.com/jquery-scroll-follow-sticky-fixed-sidebar yes

  • // Float block + Sticky navigation
    $(function() {
      scrollPoint       = 100,             // Distance to scroll before sticking
      topPadding        = 100,             // Fixed minimum distance from top of window
      bottomPadding     = 40,              // Adjustment to scrolling element point of deactivation at footer
      $window           = $(window),
      documentHeight    = $(document).height(),
      $sticky           = $('.float-block'),    // Scrolling element
      $footer           = $('footer'),     // Footer container
      $sidebar          = $('.content'),      // Sidebar Container
      sidebarHeight     = $sidebar.outerHeight(),
      footerHeight      = $footer.outerHeight(),
      offset            = $sticky.offset(),
      stop       = sidebarHeight - $sticky.height() - 15,
      $menu = $('#main-menu');
    });
    function floatBlock() {
      if (($window.scrollTop() > offset.top - scrollPoint) && ($window.scrollTop() < (documentHeight - footerHeight) - sidebarHeight + bottomPadding)) {
        if (($window.scrollTop() - offset.top + topPadding) < stop) {
          $sticky.stop().animate({marginTop: $window.scrollTop() - offset.top + topPadding},0);   // Last number is drag animation duration     
        }
        else {
          $sticky.stop().animate({marginTop: stop},0);
        }
        $menu.addClass('affix'); // Sticky navigation
      } else {
        $sticky.stop().animate({marginTop: 0},0);   // Input same drag animation duration as above
        $menu.removeClass('affix'); // Sticky navigation
      }
    }
    $(window).scroll(function(){
      floatBlock();
    });

Plovoucí (floating div) SkyScraper reklama

  • respektuje výchozí umístění od horního okraje
  • nepřekryje obsah patičky
  • pohyb obsahuje efekt animace

JS:

$(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');
  });
});

CSS:

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

Plovoucí blok respektující obklopující prvek (např. postranní sloupec – sidebar)

  • respektuje rozměry obklopujícího prvku
  • Demo viz příloha

JS:

/**
 * 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");
     }
    }
  });
});

CSS:

/**
 * 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;
}
PřílohaVelikost
sticky-element-in-wrapper-on-scroll.zip40.3 KB

Akordeon

Efekt rozbalování s sbalování obsahu využívající jQuery rozšíření Collapser.

Demo viz přiložený archiv akordeon.zip.


Zjednodušenou variantou (samozřemě vyžaduje jQuery knihovnu) může být také:

<!-- 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>

Kdy se po kliku na odkaz:

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

Skryje obsah elementu s třídou .show-hide:

<div class="show-hide">...</div>
PřílohaVelikost
akordeon.zip39.94 KB

Dynamické chování

jQuery Waypoints

  • Sticky Elements
  • Infinite Scroll
  • Dial Controls
  • Scroll Analytics

Dynamické rozmístění obsahu

Masonry automaticky "skládá" obsah stránky dle volného místa (jQuery).

Columnizer umožňuje zalomit dlouhý úzký obsah do více sloupců (jQuery).

Google API

Google Maps Marker Animations

Grafické efekty

jQuery Flat Shadow – vržený stín

Intro Loader

factory.brainleaf.eu/jqueryIntroLoader

Obtékání textu okolo obrázku

http://www.jwf.us/projects/jQSlickWrap/

Ovládání pomocí klávesnice

  • Jquery-spinner - ovládání číselných polí pomocí klávesnice

Posun obsahu (scrolling)

PřílohaVelikost
Correct CSS margin (jquery.simplyscroll)12.1 KB

Slider

Posuvník (JqueryUI Slider) se používá pro změnu číselných hodnot v určitém rozsahu.

Výhodou posuvníku je, že všechny zvolené hodnoty jsou platné (brání vložení chybné hodnoty).

Příklady:

Slideshow

jQuery Slideshow podporující dotyková gesta.

Stejná výška prvků

Pokud potřebujete zajistit na stránce stejnou výšku některých prvků (tj. zjistit maximální výšku a nastavit ji u všech ostatních) jistě se Vám bude hodit níže uvedené řešení.

  1. Do stránky připojte jQuery knihovnu, skripty jquery.equalHeights.jsjquery.pxem.js (převod z px na em v em-based layoutech) skripty obsažené v arichvu eaualheights.zip.
      ...
      <meta http-equiv="content-script-type" content="text/javascript" />
      <script type="text/javascript" src="jquery-1.6.4.min.js"></script>
      <script type="text/javascript" src="jquery.equalHeights.js"></script>
      <script type="text/javascript" src="jquery.pxem.js"></script>
      <script type="text/javascript" src="jquery.settings.js"></script>
    </head>
    <body>
      ...
  2. Vytvořte soubor jquery.settings.js s níže uvedeným obsahem a upravte požadované selektory dle potřeb (skript se spustí automaticky po načtení celé stránky):
    $(document).ready(function(){
      // vyber selektoru
      $("#box1, #box2, .boxes ... etc.").equalHeights({ relative: true });  
    });

Další možnosti:

  • CSS Demo of Equal Height Columns - Full Cross-Browser CSS. No CSS Hacks. No Images. No JavaScript.
  • Unify Heights
  • /*
    * Unify Heights
    *
    * <div id="container">
    *   <div id="sidebar"></div>
    *   <div id="content"></div>
    * </div>
    *
    *//*
    $(function() {
      function unifyHeights() {
        var maxHeight = 0;
          $('#container').children('#sidebar, #content').each(function() {
            var height = $(this).outerHeight();
            // alert(height);
            if (height > maxHeight) {
              maxHeight = height;
            }
          });
        $('#sidebar, #content').css('height', maxHeight);
      }
      unifyHeights();
    });
  • Resize iFrame to Fit Content (Same Domain Only)
  • iframe Auto Adjust Height as content changes
  • /*
    * iframe Auto Adjust Height as content changes
    *
    * <div id="main">
    *   <div id="navigation"></div>
    *   <div id="content">
    *     <iframe></iframe>
    *   </div>
    * </div>
    *
    * html, body, #main {
    *   margin: 0;
    *   padding: 0;
    *   height: 100%;
    * }
    *
    */
    $(function() { 
      // Resize iFrame Height to Fit Content
      function ResizeIframe() {
        var mainHeight = $('#main').outerHeight();
        var navHeight = $('#navigation').outerHeight();
        var contenHeight = mainHeight - navHeight;
        $('iframe').css('height', contenHeight);
      }
      // Resize
      ResizeIframe();
      // Try to change the iframe size every 2 seconds
      setInterval(function() {
        ResizeIframe();
      }, 2000); 
    });
PřílohaVelikost
equalheights.zip2.63 KB

Text a odkazy

Práce s textem (odstranění, úprava, vložení):

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

Příklad úpravy URL adresy:

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

Změna velikosti textu zvoleného prvku:

  • jFontSize – jque.re/plugins/effects-ui/jfontsize

Twitter

Zobrazení příspěvku zvoleného uživatele:

  • coda.co.za/content/projects/jquery.twitter

Validace formuláře

  • Validate – jqueryvalidation.org
  • Validity – validity.thatscaptaintoyou.com

Trvalé zobrazení hlavní navigace pomocí jQuery a CSS

Ukázka Fixed menu on scroll (soubory ke stažení).

Zdroj:

<!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>

jQuery:

/**
* 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");
    }
  });
});

CSS:

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

 

PřílohaVelikost
fixed-menu-on-scroll.zip40.12 KB

Upozornění a dialog

Modální upozornění:

  • $("#alert").hover(
      function() {
        alert("Your book is overdue.");
      }
    );

Modální upozornění vytvořené pomocí jQuery Dialog:

  • // Inserting modal information message when clicking on the link
      $('#dialog a').click(function(event) {
        var link = $(this).attr('href');
        // create message
        $(this).append('<div id="message" title="AKCE">Výprodej!</div>');
        // show message as dialog
        $(function() {
          $("#message").dialog({
            modal: true,
            resizable: false,
            buttons: {
              Ok: function() {
              // close dialog
              $(this).dialog("close");
              // execute a link
              location.href = link;
            }
          }
        });
      });
      // stop link execution
      return false; //event.preventDefault();
    });
    
  • Příklad CSS
  • .ui-dialog .ui-widget-header {
      background: #ffb321;
      color: #7f3300;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    }
    .ui-dialog .ui-button {
      background: #d6007f;
      color: #fff;
      box-shadow: none;
    }

Další možnosti:

Vysouvání

Vysouvání (Slide Out and In):

  • funkce slideToggle()
  • funkce animate()
    • ​vysunutí zespodu nahoru
      • <!-- Slide Toggle -->
        <div class="slide-toggle">
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      • /**
        * Slide Toggle
        */
        var jQuery = jQuery.noConflict();
        jQuery("document").ready(function($){
          var toggle = $('.slide-toggle');
          $(toggle).click(function(){
            if(toggle.css("bottom") == "0px") {
              toggle.animate({bottom: "-60px"}, 1000);
            } else {
              toggle.animate({bottom: "0px"}, 1000);
            }
            return false;
          });
        });
      • /**
        * Slide Toggle
        */
        .slide-toggle {
          position: fixed;
          bottom: -60px;
          left: 60%;
          z-index: 99;
          margin: 0;
          height: 300px;
          cursor: pointer;
        }
    • boční vysunutí
      • přidána detekce RTL, upraven směr a přidáván (odebíran) CSS styl
      • <div id="block-block-2">
          <h2 class="block-title">Announcement Area</h2>
          <div class="content">
            <p>Lorem ipsum dolor sit amet.</p>
          </div>
        </div>
      • /**
        * Slide Toggle
        */
        $('#block-block-2 .block-title').click(function(){
          if ($("body").css("direction").toLowerCase() == "rtl") {
            if($("#block-block-2").css("right") == "-170px") {
              $("#block-block-2").animate({right: "0"}, 1000);
              $("#block-block-2").addClass('in');
            } else {
              $("#block-block-2").animate({right: "-170px"}, 1000);
              $("#block-block-2").removeClass('in');
            }
          } else {
            if($("#block-block-2").css("left") == "-170px") {
              $("#block-block-2").animate({left: "0"}, 1000);
              $("#block-block-2").addClass('in');
            } else {
              $("#block-block-2").animate({left: "-170px"}, 1000);
              $("#block-block-2").removeClass('in');
            }
          }
          return false;
        });
      • /**
        * Slide Toggle
        */
        #block-block-2 {
          position: absolute;
          top: 100px;
          left: -170px; /* LTR */
          width: 200px;
        }
        #block-block-2 .block-title {
          position: absolute;
          left: 70px; /* LTR */
          top: 99px;
          width: 228px;
          height: 30px;
          line-height: 27px;
          cursor: pointer;
          text-align: center;
          font-weight: normal;
          font-size: 16px;
          background: #ff0000;
          color: #fff;
          -webkit-transform: rotate(-90deg);
          -moz-transform: rotate(-90deg);
          -o-transform: rotate(-90deg);
          -ms-transform: rotate(-90deg);
          writing-mode: lr-tb;
          filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
        }

Zvýraznění obrázkové mapy

Efekt grafického zvýraznění obrázkové mapy využívající jQuery rozšíření Map Hilight.

PřílohaVelikost
map-hilight.zip70.75 KB

Řazení dat v tabulce

Pomocí jQuery pluginu TableSort je možné řadit data v tabulce dle záhlaví:

  • detekce typu dat (datum, číslo atd.)
  • současné řazení více sloupců (klávesa Shift)
PřílohaVelikost
tablesorter.zip17.8 KB

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
PřílohaVelikost
DeanEdwardsIE.zip25.04 KB

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.

PřílohaVelikost
transparentpixel.gif43 bajtů
fix-png.js.txt1.48 KB
fix-png-map.js.txt2.63 KB

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.

PřílohaVelikost
data-cviceni-7.zip2.11 KB
js-formular.zip65.75 KB

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řílohaVelikost
curvycorners-2.0.4.zip188.9 KB
curvy-corners-css.zip2.66 KB

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č enlightened

Multimédia

Video a audio je možné snadno publikovat pomocí služeb YouTube, Viddler, Revver, MySpace a dalších.

Přestože je možné multimédia do stránek vkládat prostřednictvím různých pluginů jako je např. QuickTime, Windows Media a další, Flash je v současnosti jediný rozšířený plugin, který je multiplatformní a nabízí potřebné API (Application Programming Interface – aplikační programové rozhraní) pro vývojáře.

mediaelementjs.com – HTML5 přehrávač enlightened

Návody:

Převod multimediálních formátů

FFmpeg Operační systém Linux Operační systém Mac OS Operační systém Microsoft Windows

Microsoft VC-1 Encoder SDK – Professional Operační systém Microsoft Windows

Riva FLV Operační systém Microsoft Windows

Webové přehrávače

Flowplayer

JW FLV Media Player

WordPress Audio Player

XSPF Web Music Player

 

PřílohaVelikost
puzzle.swf39.46 KB
puzzle.zip468.8 KB
slivovice.swf39.63 KB
slivovice.zip468.96 KB
dvojcata-jak-jsme-se-narodili.flv9.61 MB
dvojcata-jak-jsme-se-narodili.jpg8.58 KB

Flash

Galerie:

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.

PřílohaVelikost
audio.zip4.81 MB
video.zip113.85 KB
flash-clock.zip682.84 KB

PHP

PHP (Hypertextový Preprocesor, původně Personal Home Page) je multiplatformní skriptovací programovací jazyk, určený především pro programování dynamických internetových stránek (aplikací).

LAMP je často používaná zkratka pro kombinaci operačního systému GNU/Linux, webového serveru Apache, databázového systému MySQL (případně PostgreSQL) a PHP.

Příklad PHP skriptu, který zobrazí slovo Ahoj:

<?php
  echo "Ahoj";
?>

Další informace viz manuálové stránky PHP.

Vývojová prostředí pro PHP

Nabízejí PHP dokumentaci, šablony a zejména usnadňují psaní skriptů (třídy, funkce, procedury).

 

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

PřílohaVelikost
php-1.zip1.82 MB
php-2.zip1.94 KB
php-3.zip5.47 KB

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
Úroveň zobrazování chyb
Popis error_reporting() PHP4 PHP5 PHP5.3
Nezobrazovat hlášení (implicitní) 0 0 0 0
Zobrazovat všechna hlášení E_ALL 2047  6143 30719
Zobrazovat pouze chyby a varování E_ERROR | E_WARNING | E_PARSE 7 7 7
Všechna hlášení, kromě notice E_ALL ^ E_NOTICE 2039 6135 30711
Všechna hlášení, kromě deprecated E_ALL ^ E_DEPRECATED - - 22527

 

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("[email protected]","Bc. Tomáš Daněk");
?>

Výsledky cvičení

Cvičení 1

Cvičení 2

Cvičení 3

Cvičení 4

Cvičení 5

Cvičení 6

Cvičení 7

Cvičení 8

Kontrola

V průběhu vytváření a zejména po dokončení webových stránek je třeba všechny stránky zkontrolovat, zda neobsahují chyby. Je možné využít jak on-line, tak i off-line validátory integrované v editorech.

  1. Obsah:
    • by měl být důvěryhodný
    • neměl by být v rozporu se zákony
    • není zkopírován z jiných stránek (originalita, plagiátorství)
      • plagtracker.com - kontrola doposud nezveřejněného textu
      • copyscape.com – kontrola duplicitních textů na konkrétní URL adrese
        • v placené verzi je možné
          • prohledat dávkově i celý web
          • zkontrolovat i doposud nezveřejněný text
          • využívat Copysentry – automatická kontrola webu (týdenní, denní)
        • pro vývojáře je k dispozici API
      • tineye.com - vyhledávání zkopírovaných obrázků, včetně jejich modifikací (výřez, koláž atd.)
        • pluginy pro Firefox a Internet Explorer
        • placené API pro vývojáře
      • tynt.com - při vložení textu do schránky (zkopírování) přidá automaticky řádek s informací o zdroji kopie
        • statistika kopírování
        • statistika návštěvnosti z takto zkopírovaného textu
        • Heatmap – barevné zvýraznění nejvíce kopírovaných částí textu
        • ke své funkci využívá JavaScript
    • obsahuje užitečné a aktuální informace
    • jsou správně používání strukturálních a sémantické elementy
    • má dostatečný kontrast mezi textem a pozadím
    • je čitelný
      • i bez načtených obrázků
      • při změně velikosti písma
    • stránky "ve výstavbě" nejsou zveřejněny
    • názvy a popisy stránek jsou objektivní
    • objem dat je optimalizován (grafika, multimédia)
    • nepoužívejte průhlednost u png obrázků (případně ošetřete průhlednost pro starší prohlížeče)
    • u png obrázků s průhledností zkontrolujte jejich funkčnost v IE6- (je možné vyřešit např. pomocí JavaScriptu)
  2. Dokument:
    • zejména navigace je funkční ve všech oblíbených prohlížečích uživatelů i bez:
      • povolených JavaScriptů (VisualBasic skriptů)
      • podpory Flash
    • při rozlišení 800x600 px není nutný horizontální posuv
    • obsahuje soubor favicon.ico
    • obsahuje základní meta elementy v hlavičce dokumentu (description, keywords, author, webmaster, copyright, robots, googlebot)
  3. Technologie:
    • validní zdrojový kód
      • W3C - pouze experimentální podpora pro HTML5 (nepodporuje RDFa metatagy)
      • validator.nu - úplná podpora HTML5
        • v nastavení zvolte: HTML5 + SVG 1.1 + MathML 2.0 + RDFa 1.1 + Microdata (nepoužívejte RDFa Lite verzi)
      • Total Validator
      • WDG HTML validator - umožňuje zkontrolavat celý web a je zdarma
    • funkční všechny odkazy – Total Validator, Xenus's Link Sleuth, SEO Spider (Windows, Mac, Linux)
    • validní kaskádové styly
    • bezchybné skripty
    • standardy US 508 a WCAG – Total Validator
    • optimalizace pro vyhledávače – SEO servis
    • barvy – Check My Colours
    • podrobnosti viz kontrola přístupnosti
    • rychlost (performance)
      • ověřte si chování webové stránky při nízké rychlosti připojení
        • Sloopy (multiplatformní aplikace) – pouze konkrétní stránka
        • Hardware IO Tools for Xcode (Mac)
          • Network Link Conditioner – celkové připojení do internetu
      • zjistěte si co web nejvíce zpomaluje při jeho načítání
        • webpagetest.org - stránka by se měla načíst do 2 sekund při simulovaném EDGE připojení (při načítání nad 3 s nepočká 40 % uživatelů)
          • CSS sprites
            • spritecow.com – jednoduché určení souřadnic včetně zvětšení pro Retina displeje enlightened
          • Minifikace (CSS, JavaScript)
          • Lazy loading
          • posílání statických souborů z domény bez cookies
          • nezobrazovat velké grafické prvky pozadí na mobilních zařízeních
        • developers.google.com/speed/pagespeed/insights – souhrn doporučení pro zvýšení rychlosti načítání stránek a uživatelského dojmu (mobilní zařízení, počítač) enlightened
        • tools.pingdom.com – DNS Health (root.cz, wedos.cz), Ping, Traceroute

 

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í.enlightened

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

Mozilla FireFox FireFox (Operační systém Linux Operační systém Mac OS Operační systém Microsoft Windows)

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

Google Chrome (Operační systém Linux Operační systém Mac OS Operační systém Microsoft Windows)

  • 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 smiley

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 Opera (Operační systém Linux Operační systém Mac OS Operační systém Microsoft Windows)

  • 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 angry
  • 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 smiley

Arora (Operační systém Linux Operační systém Mac OS Operační systém Microsoft Windows)

  • 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 Internet Explorer

  • je součástí operačního systému Windows Operační systém Microsoft Windows
  • neumožňuje ukládat hesla mimo prohlížeč no
  • Rozšíření IE Developer Toolbar
  • Různé verze IE současně v jednom operačním systému:
  • 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 (Operační systém Linux Operační systém Mac OS Operační systém Microsoft Windows)

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

Apple Safari Safari (Operační systém Mac OS Operační systém Microsoft Windows)

  • 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 Camino (Operační systém Mac OS)

Maxthon

FlashPeak

Flock

Avant

GreenBrowser

Sleipnir

K-Meleon

Netscape 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) yes
    • browserstack.com/responsive (zdarma) yes
  • 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 yes

Retina displej

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

  • Opera Mobile Emulator (Mac, Linux, Windows) yes
  • 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

Registrace

Webové stránky je možné ručně nebo automaticky zařadit do webových vyhledávačů, katalogů, databází firem, e-shopů atd.

Před registrací:

  1. Zkontrolujte, zda je web trvale k dispozici (kvalita webhostingu).
  2. Proveďte celkovou kontrolu.
  3. Podívejte se, zda již web není v databázi stránek zaregistrován.
  4. Vyhledejte vhodnou kategorii (nevhodnou kategorií můžete zpozdit zařazení i o několik měsíců).

Mezinárodní

České a slovenské

Katalogy a vyhledávače

Databáze firem

E-shopy

Regionální

Domény 2. řádu

Cestování

Společnost

Tvůrci webů

Programování

Sport

Hudba a film

Chemický průmysl

Auto-moto

Zdravotnictví

Církev

Bydlení

Truckerství

RSS zdroje

 

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

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:

Odkazy

Návštěvnost

Nejlépe se přirozená návštěvnost webu zvýši zajímavým obsahem (články, recenze, návody, tipy a triky, akntety atd.).

Veřejné statistiky

Vlastní statistiky návštěvnosti stránek

Služby

Aplikace

Serverové (log file)
Klientské

 

Marketing

Nenabízejte všechno všem – nabídněte správným zákazníkům co chtějí ve chvíli, kdy to chtějí.

Personalizace a automatizace:

Prodej:

Podnikání

Povinný souhlas k ukládání souborů cookie uživatele z Evropské Unie (EU) od 30. září 2015:
Monetizace webu:
Základní informace:

Účetnictví:

Faktura:

Autorský zákon 121/2000 Sb. (např. § 40)

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:

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č enlightened
            • 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)

Základní informace:

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
    • Přístupu a ověření omezit zobrazování reklam pouze na své weby enlightened (sníží se tak možnost zneužítí a následné blokace účtu)
    • pro každý web vytvořte a používejte samostatný kanál enlightened
  3. Najít často hledaná slova nebo fráze
  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 enlightened

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

Rychlost

Placené služby:

SEO

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 enlightened)

Kontrola zpětných odkazů:

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:

Sociální sítě

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 enlightened
      • 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

Ukládání dat v prohlížeči

Rozšíření

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>

Odkazy

Web Design
Open source projekty:
E-mail:
Skripty a jQuery Pluginy:
Výuka:

Převod formátů:

Nástroje:

CSS:

Grafika:

Fotobanky:

Obrázky zdarma (pozor Ceative commons licence je pouze pro NEkomerční použití):

Webová inspirace:

Knihovny zdarma při dodržení uvedených licencí:

Sdílení dat:

Video konference:

SEO nástroje:

Info podnikání:

Multimédia:

Domény:

Překlady

Generátory

Pro zefektivnění práce je možné využívat i automatizované nástroje.

Mapy:

Layout:

Tlačítka:

Témata vzhledu: